Dmitry_Tkachenko/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actions
Build Action / Run-Build (push) Successful in 3m7s
Details

Browse Source
This commit is contained in:
Dmytro Tkachenko
2024-10-22 22:44:24 +03:00
parent d510189905
commit 9a138e53a9
39 changed files with 1050 additions and 19941 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitea/workflows/demo.yaml → .gitea/workflows/build.yaml
View File
gatsby-config.js
-1
View File
@@ -6,7 +6,6 @@ module.exports = {
siteUrl: 'https://www.yourdomain.tld', siteUrl: 'https://www.yourdomain.tld',
}, },
plugins: [ plugins: [
'gatsby-plugin-styled-components',
'gatsby-plugin-image', 'gatsby-plugin-image',
'gatsby-transformer-remark', 'gatsby-transformer-remark',
'gatsby-plugin-sharp', 'gatsby-plugin-sharp',
package-lock.json
Generated
-19679
View File
File diff suppressed because it is too large Load Diff
package.json
+2 -1
View File
@@ -21,13 +21,14 @@
"gatsby-plugin-image": "^3.13.1", "gatsby-plugin-image": "^3.13.1",
"gatsby-plugin-sass": "^6.13.1", "gatsby-plugin-sass": "^6.13.1",
"gatsby-plugin-sharp": "^5.13.1", "gatsby-plugin-sharp": "^5.13.1",
"gatsby-plugin-styled-components": "^6.13.1",
"gatsby-source-filesystem": "^5.13.1", "gatsby-source-filesystem": "^5.13.1",
"gatsby-transformer-json": "^5.13.1", "gatsby-transformer-json": "^5.13.1",
"gatsby-transformer-remark": "^6.13.1", "gatsby-transformer-remark": "^6.13.1",
"gatsby-transformer-sharp": "^5.13.1", "gatsby-transformer-sharp": "^5.13.1",
"lodash": "4.17.21",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-dropdown-select": "4.11.3",
"react-slick": "^0.30.2", "react-slick": "^0.30.2",
"react-tooltip": "5.28.0", "react-tooltip": "5.28.0",
"sass": "^1.77.8", "sass": "^1.77.8",
src/components/Badge/Badge.jsx
+5 -2
View File
@@ -2,8 +2,11 @@ import * as React from 'react';
import '../../styles/styles.scss'; import '../../styles/styles.scss';
function Badge({tag, isSource}) { function Badge({tag, tagObj, isSource, onRemove}) {
return <div className={`badge ${isSource && 'badge--source'}`}>{tag}</div>; return <div className={`badge ${isSource && 'badge--source'} ${tagObj && 'badge--filter'}`}>
{tag || tagObj.label}
{onRemove ? <span onClick={(() => onRemove(tag || tagObj))} /> : null}
</div>;
} }
export default Badge; export default Badge;
src/components/Breadcrumbs/Breadcrumbs.jsx
+4 -4
View File
@@ -1,12 +1,12 @@
import * as React from 'react'; import * as React from 'react';
import {Link} from 'gatsby'; import {Link} from 'gatsby';
function Breadcrumbs({location, label}) { function Breadcrumbs({location}) {
const paths = location.split('/').filter((i) => i); const paths = location.split('/').filter((i) => i);
const getBreadcrumbTitle = (name) => const getBreadcrumbTitle = (name) =>
name name
.replace('-', ' ') .replaceAll('-', ' ')
.replace(/(^\w{1})|(\s+\w{1})/g, (letter) => letter.toUpperCase()); .replaceAll(/(^\w{1})|(\s+\w{1})/g, (letter) => letter.toUpperCase());
return ( return (
<nav className="breadcrumb" aria-label="Breadcrumb"> <nav className="breadcrumb" aria-label="Breadcrumb">
<ol className="breadcrumb__list"> <ol className="breadcrumb__list">
@@ -26,7 +26,7 @@ function Breadcrumbs({location, label}) {
<span className="breadcrumb__separator" aria-hidden="true"/> <span className="breadcrumb__separator" aria-hidden="true"/>
</> </>
) : ( ) : (
<div className="breadcrumb__link">{label}</div> <div className="breadcrumb__link">{getBreadcrumbTitle(path)}</div>
)} )}
</li> </li>
))} ))}
src/components/Filter/Filter.jsx
+53
View File
@@ -0,0 +1,53 @@
import * as React from 'react';
import SelectBox from "./SelectBox";
import {FILTER_TYPES} from "./constants";
import Badge from "../Badge/Badge";
const _ = require("lodash");
function Filter() {
const [tags, setTags] = React.useState([]);
const updateTags = e => {
e.every(i => i.value)
? setTags(_.uniqBy([...tags.filter(tag => tag.group !== e[0].group), ...e], 'value'))
: setTags(tags.filter(tag => tag.group !== e[0].group))
}
const removeItem = (e) => {
setTags(tags.filter(tag => tag.value !== e.value));
}
const clearFilters = () => {
setTags([]);
}
return <div className="filter">
<div className="filter__list">
{FILTER_TYPES.map((filter, i) => {
return <SelectBox
key={i}
options={filter.values}
label={filter.group}
setValuesOutside={updateTags}
tags={tags}
/>
})}
<div className="filter__input-wrapper">
<input
type="text"
className="filter__input"
placeholder="Search"
/>
</div>
</div>
{tags.length
? <div className="filter__tags">
{tags.map((tag, i) => <Badge tagObj={tag} onRemove={removeItem} key={i}/>)}
<span className="filter__tags-close" onClick={clearFilters}>Clear All</span>
</div>
: null}
</div>;
}
export default Filter;
src/components/Filter/SelectBox.jsx
+75
View File
@@ -0,0 +1,75 @@
import * as React from 'react';
import {useEffect} from 'react';
import Select from "react-dropdown-select";
function SelectBox({options, label = "Select", setValuesOutside, tags}) {
const [values, setValues] = React.useState([]);
const [opts, setOpts] = React.useState([]);
useEffect(() => {
setOpts(options.map(opt => ({...opt, group: label})));
}, [options, label]);
useEffect(() => {
setValues(tags.filter(tag => tag.group === label));
}, [tags, label]);
const customContentRenderer = ({state}) => {
return <div
className="selectbox__content">{label} {state.values.length ? `(${state.values.length})` : null}</div>
}
const customDropdownRenderer = (s) => {
const {state, methods, props} = s;
const regexp = new RegExp(state.search, 'i');
return <div className="selectbox__dropdown">
{options.length > 6
? <input type="text"
className="selectbox__input"
value={state.search}
onChange={methods.setSearch}
placeholder="Search"
/>
: null}
<div className="selectbox__options">
{opts
.filter((item) => regexp.test(item[props.searchBy] || item[props.labelField]))
.map((option) => {
return (
<div
className="selectbox__option"
key={option.value}
onClick={option.disabled ? null : () => methods.addItem(option)}>
<input
type="checkbox"
className="selectbox__dropdown-checkbox checkbox"
onChange={() => state.values.indexOf(option) !== -1 ? methods.addItem(option) : methods.removeItem(null, option, false)}
checked={state.values.indexOf(option) !== -1}
/>
<label className="selectbox__dropdown-label">{option.label}</label>
</div>
);
})}
{opts.filter((item) => regexp.test(item[props.searchBy] || item[props.labelField])).length
? null
: <span className="selectbox__dropdown-label">No Data Found</span>
}
</div>
</div>
}
return <Select
className={`selectbox ${values.length ? "selectbox--active" : null}`}
options={options}
multi={true}
values={values}
onChange={(values) => {
setValuesOutside(values.length ? values.map(item => ({...item, group: label})) : [{group: label}])
}}
contentRenderer={customContentRenderer}
dropdownRenderer={customDropdownRenderer}
/>
}
export default SelectBox;
src/components/Filter/constants.js
+193
View File
@@ -0,0 +1,193 @@
export const FILTER_TYPES = [
{
group: "Type",
values: [
{
value: "Blazers",
label: 'Blazers'
},
{
value: 'Blouses',
label: 'Blouses'
},
{
value: 'Coats',
label: 'Coats'
},
{
value: 'Dresses',
label: 'Dresses'
},
{
value: 'Jackets',
label: 'Jackets'
},
{
value: 'Jeans',
label: 'Jeans'
},
{
value: 'Jumpers & Knitwear',
label: 'Jumpers & Knitwear'
},
{
value: 'Jumpsuits',
label: 'Jumpsuits'
},
{
value: 'Skirts',
label: 'Skirts'
},
{
value: 'Shirts & Topics',
label: 'Shirts & Topics'
},
{
value: 'Shorts & Bermudas',
label: 'Shorts & Bermudas'
},
{
value: 'Stockings & Tights',
label: 'Stockings & Tights'
},
{
value: 'Sweaters',
label: 'Sweaters'
},
{
value: 'Trouser Suits & Costumes',
label: 'Trouser Suits & Costumes'
},
{
value: 'Trousers',
label: 'Trousers'
},
{
value: 'Underwear & Pyjamas',
label: 'Underwear & Pyjamas'
},
{
value: 'Waistcoats',
label: 'Waistcoats'
},
{
value: 'Maternity Wear',
label: 'Maternity Wear'
},
{
value: 'Sportswear',
label: 'Sportswear'
},
{
value: 'Home & Loungewear',
label: 'Home & Loungewear'
}
]
},
{
group: "Customer",
values: [
{
value: 'Gen Alpha',
label: 'Gen Alpha'
},
{
value: 'Gen Z',
label: 'Gen Z'
},
{
value: 'Generation X',
label: 'Generation X'
},
{
value: 'Millennials',
label: 'Millennials'
}
]
},
{
group: "Market",
values: [
{
value: 'Worldwide',
label: 'Worldwide'
},
{
value: 'Europe',
label: 'Europe'
},
{
value: 'Germany',
label: 'Germany'
}
]
},
{
group: "Fit",
values: [
{
value: "Fit",
label: 'Fit'
}
]
},
{
group: "Brand",
values: [
{
value: 'Brand',
label: 'Brand'
}
]
},
{
group: "Fabric",
values: [
{
value: 'Cotton',
label: 'Cotton'
},
{
value: 'Silk',
label: 'Silk'
},
{
value: 'Wool',
label: 'Wool'
},
{
value: 'Polyester',
label: 'Polyester'
},
{
value: 'Denim',
label: 'Denim'
},
{
value: 'Linen',
label: 'Linen'
}
]
},
{
group: "Season",
values: [
{
value: 'Spring',
label: 'Spring'
},
{
value: 'Summer',
label: 'Summer'
},
{
value: 'Winter',
label: 'Winter'
},
{
value: 'Autumn',
label: 'Autumn'
}
]
}
]
src/components/Layout/Layout.jsx
+21
View File
@@ -0,0 +1,21 @@
import * as React from 'react';
import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
import Profile from "../Profile/Profile";
import '../../styles/styles.scss';
function Layout({children, breafcrumbs = false}) {
return (
<main className="layout">
{breafcrumbs ?
<header className="header">
<Breadcrumbs location={breafcrumbs.pathname}/>
<Profile/>
</header>
: null}
{children}
</main>
);
}
export default Layout;
src/components/ProductCard/ProductCard.jsx
+1 -1
View File
@@ -23,7 +23,7 @@ const ProductCard = ({product, images}) => {
}; };
return ( return (
<div className="product-card m-t-48 m-b-48"> <div className="product-card m-b-48">
<div className="product-card__slider"> <div className="product-card__slider">
<Slider {...settings}> <Slider {...settings}>
{product.images.map((image, index) => ( {product.images.map((image, index) => (
src/components/Profile/Profile.jsx
+7
View File
@@ -0,0 +1,7 @@
import * as React from 'react';
function Profile() {
return <div className="profile">Profile</div>
}
export default Profile;
src/components/SocialMediaTooltips/SocialMediaTooltips.jsx
+4 -8
View File
@@ -41,9 +41,7 @@ const SocialMediaTooltips = ({product}) => {
return {...socialMedia[key], type: key} return {...socialMedia[key], type: key}
}) })
.sort((prev, current) => current.Social_Media_Influence - prev.Social_Media_Influence) .sort((prev, current) => current.Social_Media_Influence - prev.Social_Media_Influence)
.map(smi => { .map((smi, i) => smi.found ? (<div className="tooltip__wrapper" key={smi.Social_Media_Influence + name + i}>
if (smi.found) {
return (<div className="tooltip__wrapper" key={smi.Social_Media_Influence + name}>
<div <div
className={`tooltip__confidence tooltip__confidence--${smi.Social_Media_Influence > SOCIAL_MEDIA_BREAKPOINTS[smi.type] ? "high" : "average"}`} className={`tooltip__confidence tooltip__confidence--${smi.Social_Media_Influence > SOCIAL_MEDIA_BREAKPOINTS[smi.type] ? "high" : "average"}`}
> >
@@ -67,10 +65,10 @@ const SocialMediaTooltips = ({product}) => {
place="right-end"> place="right-end">
<h3 className="tooltip__title">{smi.type}</h3> <h3 className="tooltip__title">{smi.type}</h3>
{SOCIAL_MEDIA_MATRIX[smi.type] {SOCIAL_MEDIA_MATRIX[smi.type]
.map(line => { .map((line, i) => {
return line ? (<div return line ? (<div
className={`tooltip__data tooltip__data--${line}`} className={`tooltip__data tooltip__data--${line}`}
key={line + name}> key={line + name + i}>
<div>{line?.replaceAll("_", " ")} </div> <div>{line?.replaceAll("_", " ")} </div>
<div> <div>
<b>{smi[line].toLocaleString()}{line?.includes("Relative") ? "%" : ""}</b> <b>{smi[line].toLocaleString()}{line?.includes("Relative") ? "%" : ""}</b>
@@ -78,9 +76,7 @@ const SocialMediaTooltips = ({product}) => {
</div>) : <hr/> </div>) : <hr/>
})} })}
</Tooltip> </Tooltip>
</div>); </div>) : null);
}
});
return ( return (
<> <>
{getTooltips()}</> {getTooltips()}</>
src/components/Tabs/Tabs.jsx
+18
View File
@@ -0,0 +1,18 @@
import * as React from 'react';
function Tabs({tabs, activeTabIndex = 0, setActiveTabIndex = () => {}}) {
const [activeIndex, setActiveIndex] = React.useState(activeTabIndex);
const setActiveTab = (e) => {
setActiveIndex(e);
setActiveTabIndex(e);
}
return <nav className="tabs">
{tabs.map((tab, i) => <div
key={i+tab.title}
className={`tabs__item ${i === activeIndex ? "tabs__item--active" : null}`}
onClick={() => setActiveTab(i)}>{tab.title}</div>)}
</nav>;
}
export default Tabs;
src/data/data.json
+119 -119
View File
@@ -1,115 +1,4 @@
[ [
{
"name": "Casual Long Shirt",
"tags": "Casual, Long",
"description": "Effortlessly stylish and comfortable, these long shirts are perfect for everyday wear. They've seen a surge in popularity on social media, with a remarkable 180% increase in reposts on Twitter and a 160% jump in comments on Instagram, making them a popular choice for fashion enthusiasts.",
"images": [
"4dd5074d31e63021470994c9265ab7cb.jpg",
"88e4101d3e4d2e1ddd2a5487a8df3e27.jpg",
"9656de311138c38dfe25970279fe26eb.jpg",
"65f5dc395334fe598a30dad84eef64e0.jpg",
"5521de8fdbef26afc7d8bb560a137401.webp"
],
"sources": "aninebing, lindatol_, Fendi, PRADA, Fashionista.com, Vogue Magazine, Acne Studios",
"socialMedia": {
"Twitter": {
"found": true,
"Social Media Influence": 8.33,
"Tweet Views": 53316.0,
"Tweet Reposts": 232.0,
"Tweet Quotes": 11.0,
"Tweet Likes": 609.0,
"Tweet Bookmarks": 15.0,
"Tweet Views Relative to Average": -14,
"Tweet Reposts Relative to Average": 180,
"Tweet Quotes Relative to Average": -30,
"Tweet Likes Relative to Average": 88,
"Tweet Bookmarks Relative to Average": 1
},
"Instagram": {
"found": true,
"Social Media Influence": 12.77,
"Post Comments": 41.0,
"Post Likes": 6115.0,
"Post Comments Relative to Average": 160,
"Post Likes Relative to Average": 198
}
}
},
{
"name": "Striped Casual Shirt",
"tags": "Striped, Casual",
"description": "Effortlessly stylish and versatile, these striped casual shirts are a wardrobe staple. With a 44% increase in views on Twitter and a 75% surge in likes on Instagram, these shirts are clearly a hit with fashion enthusiasts.",
"images": [
"52aad40ac9ffb17f83de18216af367d1.jpg",
"f671add5d3613a579b4dd50bb0733872.jpg",
"Hikigawa.webp",
"d9fd6326f813a8fa4819028dfeb047b7.jpg",
"FSLE-Oversized-Blue-Striped-Casual-Blouse-Shirt-Women-Streetwear-Elegant-Button-Up-Shirt-Female-Long-Sleeve.webp"
],
"sources": "aninebing, carodaur, heir, lindatol_, rocky_barnes, Fendi, PRADA, Vogue Magazine, Fashionista.com, KENZO",
"socialMedia": {
"Twitter": {
"found": true,
"Social Media Influence": 0.64,
"Tweet Views": 188015.0,
"Tweet Reposts": 329.0,
"Tweet Quotes": 11.0,
"Tweet Likes": 1195.0,
"Tweet Bookmarks": 29.0,
"Tweet Views Relative to Average": 44,
"Tweet Reposts Relative to Average": 7,
"Tweet Quotes Relative to Average": -25,
"Tweet Likes Relative to Average": 18,
"Tweet Bookmarks Relative to Average": 0
},
"Instagram": {
"found": true,
"Social Media Influence": 11.86,
"Post Comments": 53.0,
"Post Likes": 2697.0,
"Post Comments Relative to Average": 57,
"Post Likes Relative to Average": 75
}
}
},
{
"name": "Casual Midi Skirt",
"tags": "Casual, Midi",
"description": "Effortlessly chic and versatile, this midi skirt is perfect for casual everyday looks. Its flattering silhouette and comfortable fit have resonated with fashion enthusiasts, resulting in a remarkable 284% increase in bookmarks on Twitter, showcasing its popularity among style-conscious individuals.",
"images": [
"78a0ceda555f73d404ba201355ab4bf3.jpg",
"fc8d50c21bd7489651b976bdee4c4ac8.jpg",
"bfdf38ece493e8496db53f8c48de9e75.jpg",
"fbafefe897b637a7d43d4248c4a5001b.jpg",
"81dPkumiz3L_AC_UY1000_.jpg"
],
"sources": "Fendi, Vogue Magazine, Burberry, Coach, PRADA, brittanyxavier, jaceyduprie, veronikaheilbrunner",
"socialMedia": {
"Twitter": {
"found": true,
"Social Media Influence": 9.74,
"Tweet Views": 194393.0,
"Tweet Reposts": 1514.0,
"Tweet Quotes": 68.0,
"Tweet Likes": 4686.0,
"Tweet Bookmarks": 168.0,
"Tweet Views Relative to Average": 38,
"Tweet Reposts Relative to Average": 239,
"Tweet Quotes Relative to Average": 131,
"Tweet Likes Relative to Average": 217,
"Tweet Bookmarks Relative to Average": 284
},
"Instagram": {
"found": true,
"Social Media Influence": 0.18,
"Post Comments": 26.0,
"Post Likes": 707.0,
"Post Comments Relative to Average": 12,
"Post Likes Relative to Average": -9
}
}
},
{ {
"name": "Casual Dress", "name": "Casual Dress",
"tags": "Casual", "tags": "Casual",
@@ -141,10 +30,10 @@
"tags": "Casual, Relaxed", "tags": "Casual, Relaxed",
"description": "Super comfortable and stylish, these hoodies are perfect for everyday wear. They've been a huge hit on Twitter, with a massive 2957% increase in reposts and a 3023% increase in bookmarks compared to the average. Get ready to relax in style!", "description": "Super comfortable and stylish, these hoodies are perfect for everyday wear. They've been a huge hit on Twitter, with a massive 2957% increase in reposts and a 3023% increase in bookmarks compared to the average. Get ready to relax in style!",
"images": [ "images": [
"639a2f2e58e6ffdfff87f6bdb8f9f9c9.jpg",
"10342a0bd0dc9161466a67fc7b94a33d.jpg", "10342a0bd0dc9161466a67fc7b94a33d.jpg",
"a4896b773c816bce6a7c24da45ef658b.jpg", "a4896b773c816bce6a7c24da45ef658b.jpg",
"11ca8a3e353c6cc3444a008779b36174.jpg", "11ca8a3e353c6cc3444a008779b36174.jpg",
"714RvzJjoPL_AC_UY1000_.jpg",
"LTTVQM-Quarter-Zip-Hoodie-Womens-Oversized-Half-Zip-Pullover-Long-Sleeve-Sweatshirt-Casual-Solid-Color-Relaxed-Fit-Tops-with-Pocket-Camel-XL_72c61da0-5346-42db-aff1-62517df50eb0.08683914769cd5913e834050a6b8ee86.avif" "LTTVQM-Quarter-Zip-Hoodie-Womens-Oversized-Half-Zip-Pullover-Long-Sleeve-Sweatshirt-Casual-Solid-Color-Relaxed-Fit-Tops-with-Pocket-Camel-XL_72c61da0-5346-42db-aff1-62517df50eb0.08683914769cd5913e834050a6b8ee86.avif"
], ],
"sources": "Michael Kors, Vogue France", "sources": "Michael Kors, Vogue France",
@@ -295,10 +184,10 @@
"tags": "Oversized, Wool", "tags": "Oversized, Wool",
"description": "A classic and timeless piece, this oversized wool suit offers a sophisticated and comfortable look. The suit's popularity is evident in its impressive social media performance, with a staggering 4058% increase in reposts on Twitter, showcasing its appeal to fashion enthusiasts.", "description": "A classic and timeless piece, this oversized wool suit offers a sophisticated and comfortable look. The suit's popularity is evident in its impressive social media performance, with a staggering 4058% increase in reposts on Twitter, showcasing its appeal to fashion enthusiasts.",
"images": [ "images": [
"e7d6c705f7c1cb859afa8b7ae00757ea.jpg",
"02aa00c9208ffd8496e16b9e5f730945.jpg", "02aa00c9208ffd8496e16b9e5f730945.jpg",
"76f90b11d0dfe4a4fbf9b37677d07ae6.jpg", "76f90b11d0dfe4a4fbf9b37677d07ae6.jpg",
"f0f421a3d256185d7f145f59fb7cc4a9.jpg", "f0f421a3d256185d7f145f59fb7cc4a9.jpg",
"a0f80b35b36c0c0018fddd5c59e8c6a2.jpg",
"cf6b5fd2a1a2bd9561f03986d4fcdd3d.jpg" "cf6b5fd2a1a2bd9561f03986d4fcdd3d.jpg"
], ],
"sources": "HYPEBEAST, SAINT LAURENT", "sources": "HYPEBEAST, SAINT LAURENT",
@@ -412,6 +301,43 @@
} }
} }
}, },
{
"name": "Casual Long Shirt",
"tags": "Casual, Long",
"description": "Effortlessly stylish and comfortable, these long shirts are perfect for everyday wear. They've seen a surge in popularity on social media, with a remarkable 180% increase in reposts on Twitter and a 160% jump in comments on Instagram, making them a popular choice for fashion enthusiasts.",
"images": [
"4dd5074d31e63021470994c9265ab7cb.jpg",
"88e4101d3e4d2e1ddd2a5487a8df3e27.jpg",
"9656de311138c38dfe25970279fe26eb.jpg",
"65f5dc395334fe598a30dad84eef64e0.jpg",
"5521de8fdbef26afc7d8bb560a137401.webp"
],
"sources": "aninebing, lindatol_, Fendi, PRADA, Fashionista.com, Vogue Magazine, Acne Studios",
"socialMedia": {
"Twitter": {
"found": true,
"Social Media Influence": 8.33,
"Tweet Views": 53316.0,
"Tweet Reposts": 232.0,
"Tweet Quotes": 11.0,
"Tweet Likes": 609.0,
"Tweet Bookmarks": 15.0,
"Tweet Views Relative to Average": -14,
"Tweet Reposts Relative to Average": 180,
"Tweet Quotes Relative to Average": -30,
"Tweet Likes Relative to Average": 88,
"Tweet Bookmarks Relative to Average": 1
},
"Instagram": {
"found": true,
"Social Media Influence": 12.77,
"Post Comments": 41.0,
"Post Likes": 6115.0,
"Post Comments Relative to Average": 160,
"Post Likes Relative to Average": 198
}
}
},
{ {
"name": "Relaxed Casual Long Set", "name": "Relaxed Casual Long Set",
"tags": "Relaxed, Casual, Long", "tags": "Relaxed, Casual, Long",
@@ -443,11 +369,11 @@
"tags": "Black, Fitted, Formal", "tags": "Black, Fitted, Formal",
"description": "Elegant and sophisticated, these black fitted formal dresses are perfect for special occasions. With a 192% increase in reposts and a 189% rise in bookmarks on Twitter, these dresses are clearly a popular choice for stylish events.", "description": "Elegant and sophisticated, these black fitted formal dresses are perfect for special occasions. With a 192% increase in reposts and a 189% rise in bookmarks on Twitter, these dresses are clearly a popular choice for stylish events.",
"images": [ "images": [
"d61eea65fa5505b7a641851a014e36bf.jpg", "e1338a6dcfb1908b9f4d3465d55a801c (1).jpg",
"53f4aa76693158a87d2fc5488ebf94b2.jpg", "c24f0c1565a3fd3c93bfd11ac2e83b40.jpg",
"36b000e685ca3dbf5bad2546944bb765.jpg", "a742f2d2988c45b8b462f36f450b31c8.jpg",
"il_570xN3804692666_3bgx.avif", "400b0754dbf52f7df89cddaf4351b17b.jpg",
"61456_BLACK_3_2048x.jpg" "99dad65e2324d9f0484d8739b05ed330.jpg"
], ],
"sources": "Michael Kors, SAINT LAURENT, Fashionista.com, Givenchy, Vogue Magazine", "sources": "Michael Kors, SAINT LAURENT, Fashionista.com, Givenchy, Vogue Magazine",
"socialMedia": { "socialMedia": {
@@ -496,6 +422,43 @@
} }
} }
}, },
{
"name": "Striped Casual Shirt",
"tags": "Striped, Casual",
"description": "Effortlessly stylish and versatile, these striped casual shirts are a wardrobe staple. With a 44% increase in views on Twitter and a 75% surge in likes on Instagram, these shirts are clearly a hit with fashion enthusiasts.",
"images": [
"52aad40ac9ffb17f83de18216af367d1.jpg",
"f671add5d3613a579b4dd50bb0733872.jpg",
"Hikigawa.webp",
"d9fd6326f813a8fa4819028dfeb047b7.jpg",
"FSLE-Oversized-Blue-Striped-Casual-Blouse-Shirt-Women-Streetwear-Elegant-Button-Up-Shirt-Female-Long-Sleeve.webp"
],
"sources": "aninebing, carodaur, heir, lindatol_, rocky_barnes, Fendi, PRADA, Vogue Magazine, Fashionista.com, KENZO",
"socialMedia": {
"Twitter": {
"found": true,
"Social Media Influence": 0.64,
"Tweet Views": 188015.0,
"Tweet Reposts": 329.0,
"Tweet Quotes": 11.0,
"Tweet Likes": 1195.0,
"Tweet Bookmarks": 29.0,
"Tweet Views Relative to Average": 44,
"Tweet Reposts Relative to Average": 7,
"Tweet Quotes Relative to Average": -25,
"Tweet Likes Relative to Average": 18,
"Tweet Bookmarks Relative to Average": 0
},
"Instagram": {
"found": true,
"Social Media Influence": 11.86,
"Post Comments": 53.0,
"Post Likes": 2697.0,
"Post Comments Relative to Average": 57,
"Post Likes Relative to Average": 75
}
}
},
{ {
"name": "Black Formal Silk Dress", "name": "Black Formal Silk Dress",
"tags": "Black, Formal, Silk", "tags": "Black, Formal, Silk",
@@ -504,7 +467,7 @@
"808491c55bb618ee10ce059d10d16664.jpg", "808491c55bb618ee10ce059d10d16664.jpg",
"c3415cd960426232cc678499875993dd.jpg", "c3415cd960426232cc678499875993dd.jpg",
"Ella-Black-Off-Shoulder-Formal-Dress-1_750x.jpg", "Ella-Black-Off-Shoulder-Formal-Dress-1_750x.jpg",
"08df26ce-6182-42f1-9188-81a8de0bd372c8640bbaf1a957b037364e6d5e02c560.webp", "c586e6853c40655d9597f2ff76d2ffe0.jpg",
"6f5a929f47bb99cd9feb944bcaec5333.jpg" "6f5a929f47bb99cd9feb944bcaec5333.jpg"
], ],
"sources": "SAINT LAURENT, Givenchy, Vogue Magazine", "sources": "SAINT LAURENT, Givenchy, Vogue Magazine",
@@ -656,6 +619,43 @@
} }
} }
}, },
{
"name": "Casual Midi Skirt",
"tags": "Casual, Midi",
"description": "Effortlessly chic and versatile, this midi skirt is perfect for casual everyday looks. Its flattering silhouette and comfortable fit have resonated with fashion enthusiasts, resulting in a remarkable 284% increase in bookmarks on Twitter, showcasing its popularity among style-conscious individuals.",
"images": [
"78a0ceda555f73d404ba201355ab4bf3.jpg",
"fc8d50c21bd7489651b976bdee4c4ac8.jpg",
"bfdf38ece493e8496db53f8c48de9e75.jpg",
"fbafefe897b637a7d43d4248c4a5001b.jpg",
"81dPkumiz3L_AC_UY1000_.jpg"
],
"sources": "Fendi, Vogue Magazine, Burberry, Coach, PRADA, brittanyxavier, jaceyduprie, veronikaheilbrunner",
"socialMedia": {
"Twitter": {
"found": true,
"Social Media Influence": 9.74,
"Tweet Views": 194393.0,
"Tweet Reposts": 1514.0,
"Tweet Quotes": 68.0,
"Tweet Likes": 4686.0,
"Tweet Bookmarks": 168.0,
"Tweet Views Relative to Average": 38,
"Tweet Reposts Relative to Average": 239,
"Tweet Quotes Relative to Average": 131,
"Tweet Likes Relative to Average": 217,
"Tweet Bookmarks Relative to Average": 284
},
"Instagram": {
"found": true,
"Social Media Influence": 0.18,
"Post Comments": 26.0,
"Post Likes": 707.0,
"Post Comments Relative to Average": 12,
"Post Likes Relative to Average": -9
}
}
},
{ {
"name": "Casual Lace Short White Top", "name": "Casual Lace Short White Top",
"tags": "Casual, Lace, Short, White", "tags": "Casual, Lace, Short, White",
src/helpers/getConfidence.js
+1 -1
View File
@@ -1,4 +1,4 @@
const getConfidence = (media, breakpoint) => { const getConfidence = (media) => {
const best = Object.values(media) const best = Object.values(media)
.filter((med) => med.found) .filter((med) => med.found)
.reduce((prev, current) => { .reduce((prev, current) => {
src/pages/HomePage/HomePage.jsx
+20 -5
View File
@@ -1,32 +1,47 @@
import * as React from 'react'; import * as React from 'react';
import { Link } from 'gatsby'; import {Link} from 'gatsby';
import Layout from "../../components/Layout/Layout";
import '../../styles/styles.scss'; import '../../styles/styles.scss';
function Home() { function Home() {
return ( return (
<main> <Layout>
<h1>Insights</h1> <h1>Insights</h1>
<p className="text-container p-b-56"> <p className="text-container p-b-56">
Upcoming fashion insights, enabling you to make informed procurement and Upcoming fashion insights, enabling you to make informed procurement and
manufacturing decisions that align with consumer preferences and market manufacturing decisions that align with consumer preferences and market
demands demands
</p> </p>
<div className="center p-b-56"> <div className="center p-b-56 flex flex--center flex--gap-32">
<Link <Link
to="/insights/" to="/insights/"
className="button button__primary" className="button button__primary"
style={{ pointerEvents: 'none' }} style={{pointerEvents: 'none'}}
>
Men’s Fashion
</Link>
<Link
to="/insights/"
className="button button__primary"
style={{pointerEvents: 'none'}}
> >
Women’s Fashion Women’s Fashion
</Link> </Link>
<Link
to="/insights/"
className="button button__primary"
style={{pointerEvents: 'none'}}
>
Kid’s Fashion
</Link>
</div> </div>
<div className="box center p-b-80"> <div className="box center p-b-80">
<Link to="/insights/" className="button button__secondary m-t-80"> <Link to="/insights/" className="button button__secondary m-t-80">
Generate Insights Generate Insights
</Link> </Link>
</div> </div>
</main> </Layout>
); );
} }
src/pages/List/List.jsx
+41 -6
View File
@@ -1,28 +1,63 @@
import * as React from "react"; import * as React from "react";
import {graphql, Link} from "gatsby"; import {graphql, Link} from "gatsby";
import Breadcrumbs from "../../components/Breadcrumbs/Breadcrumbs";
import Listing from "../../components/Listing/Listing"; import Listing from "../../components/Listing/Listing";
import Layout from "../../components/Layout/Layout";
import Tabs from "../../components/Tabs/Tabs";
import Filter from "../../components/Filter/Filter";
const TABS = [
{
title: "Clothing"
},
{
title: "Shoes"
},
{
title: "Accessories"
}
]
const List = ({data, location}) => { const List = ({data, location}) => {
const products = data.allDataJson.nodes; const products = data.allDataJson.nodes;
const images = data.allImageSharp.nodes; const images = data.allImageSharp.nodes;
return ( return (
<main> <Layout breafcrumbs={location}>
<Breadcrumbs location={location.pathname} label="Insights"/>
<h1>Insights</h1> <h1>Insights</h1>
<p className="text-container m-b-56"> <p className="text-container m-b-56">
Upcoming fashion insights, enabling you to make informed procurement and Upcoming fashion insights, enabling you to make informed procurement and
manufacturing decisions that align with consumer preferences and market manufacturing decisions that align with consumer preferences and market
demands demands
</p> </p>
<div className="center"> <div className="center flex flex--center flex--gap-32">
<Link to="/insights/" className="button button__primary active"> <Link
to="/insights/"
className="button button__primary active"
style={{pointerEvents: 'none'}}
>
Men’s Fashion
</Link>
<Link
to="/insights/"
className="button button__primary"
style={{pointerEvents: 'none'}}
>
Women’s Fashion Women’s Fashion
</Link> </Link>
<Link
to="/insights/"
className="button button__primary active"
style={{pointerEvents: 'none'}}
>
Kid’s Fashion
</Link>
</div> </div>
<div className="center flex flex--center flex--gap-32">
<Tabs tabs={TABS} activeTabIndex={0} />
</div>
<Filter />
<Listing products={products} images={images}/> <Listing products={products} images={images}/>
</main> </Layout>
); );
}; };
export const query = graphql` export const query = graphql`
src/styles/components/badge.scss
+24
View File
@@ -1,3 +1,6 @@
@use '../fonts/poppins';
@use '../fonts/volkhov';
.badge { .badge {
@extend .poppins-medium; @extend .poppins-medium;
height: 25px; height: 25px;
@@ -16,4 +19,25 @@
&--source { &--source {
background: #EEE7F7; background: #EEE7F7;
} }
&--filter {
background: #FFF;
height: 30px;
line-height: 30px;
border: none;
font-size: 14px;
font-weight: 300;
}
span {
cursor: pointer;
padding-left: 6px;
background-image: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.78735 1.67461C8.90453 1.79176 8.90452 1.98168 8.78735 2.09882L2.09664 8.78784C1.97947 8.90499 1.7895 8.90499 1.67232 8.78784L1.21213 8.32776C1.09495 8.21062 1.09495 8.02069 1.21213 7.90355L7.90284 1.21453C8.02001 1.09739 8.20998 1.09739 8.32716 1.21453L8.78735 1.67461Z" fill="%23484848"/><path d="M8.32788 8.78521C8.21071 8.90235 8.02074 8.90235 7.90356 8.78521L1.21285 2.09619C1.09568 1.97905 1.09568 1.78912 1.21285 1.67198L1.67305 1.2119C1.79022 1.09476 1.98019 1.09476 2.09737 1.2119L8.78808 7.90092C8.90525 8.01806 8.90525 8.20799 8.78808 8.32513L8.32788 8.78521Z" fill="%23484848"/></svg>');
background-position: center center;
background-repeat: no-repeat;
height: 30px;
width: 24px;
display: inline-block;
vertical-align: middle;
}
} }
src/styles/components/breadcrumb.scss
-2
View File
@@ -1,6 +1,4 @@
.breadcrumb { .breadcrumb {
position: absolute;
top: 0;
&__list { &__list {
src/styles/components/button.scss
+2 -1
View File
@@ -1,4 +1,4 @@
@import '../fonts/poppins'; @use '../fonts/poppins';
.button { .button {
@extend .poppins-regular; @extend .poppins-regular;
@@ -19,6 +19,7 @@
&:hover, &.active { &:hover, &.active {
border-color: transparent; border-color: transparent;
background: #fafafa; background: #fafafa;
color: #8A8A8A;
} }
&.active { &.active {
src/styles/components/checkbox.scss
+7 -4
View File
@@ -7,13 +7,16 @@
position: relative; position: relative;
padding-left: 28px; padding-left: 28px;
font-weight: 500; font-weight: 500;
color: #8A8A8A; //color: #8A8A8A;
color: #000;
cursor: pointer;
&:before { &:before {
content: ""; content: "";
//border: 1px solid #484848; border: 1px solid #D9D9D9;
border-radius: 4px; border-radius: 4px;
//box-shadow: 0 1px 3px 0 rgba(43, 33, 30, 0.08); //box-shadow: 0 1px 3px 0 rgba(43, 33, 30, 0.08);
background: #fff;
width: 16px; width: 16px;
height: 16px; height: 16px;
display: inline-block; display: inline-block;
@@ -40,8 +43,8 @@
height: 16px; height: 16px;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 2px; top: 3px;
left: 0; left: 1px;
} }
} }
} }
src/styles/components/common.scss
+6 -3
View File
@@ -1,3 +1,6 @@
@use "../mixins/media-queries.scss";
@use "../helpers/space.scss";
:root { :root {
--rt-opacity: 1 !important; --rt-opacity: 1 !important;
} }
@@ -9,11 +12,11 @@ body {
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
@include lg { @include media-queries.lg {
padding: 120px 20px; padding: 120px 20px;
} }
@include xl { @include media-queries.xl {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
} }
@@ -23,7 +26,7 @@ main {
position: relative; position: relative;
padding-top: 70px; padding-top: 70px;
@include lg { @include media-queries.lg {
padding-top: 30px; padding-top: 30px;
} }
} }
src/styles/components/filter.scss
+47
View File
@@ -0,0 +1,47 @@
@use "../mixins/media-queries";
.filter {
padding: 16px;
background: #FAFAFA;
margin: 0 0 38px 0;
display: none;
@include media-queries.xl {
display: block;
}
&__list {
display: flex;
gap: 12px;
}
&__input-wrapper {
flex: 1 0 auto;
text-align: right;
}
&__input {
min-width: 300px;
border: 1px solid #d9d9d9;
border-radius: 3px;
height: 25px;
padding-left: 28px;
line-height: 29px;
background-repeat: no-repeat;
background-position: 6px center;
background-image: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.5" cy="8" r="6" stroke="%23484848"/><path d="M15.1521 16.199C15.0349 16.3162 14.8874 16.3586 14.8225 16.2937L11.1181 12.5902C11.0532 12.5254 11.0956 12.3778 11.2128 12.2607L11.673 11.8006C11.7901 11.6835 11.9377 11.6411 12.0026 11.7059L15.707 15.4094C15.7719 15.4743 15.7295 15.6218 15.6123 15.7389L15.1521 16.199Z" fill="%23484848"/></svg>');
}
&__tags {
margin-top: 12px;
&-close {
background-image: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_590_526)"><path d="M16.0088 8.5C16.0088 12.9183 12.4271 16.5 8.00879 16.5C3.59051 16.5 0.00878906 12.9183 0.00878906 8.5C0.00878906 4.08172 3.59051 0.5 8.00879 0.5C12.4271 0.5 16.0088 4.08172 16.0088 8.5Z" fill="black"/><path d="M11.7874 5.17461C11.9045 5.29176 11.9045 5.48168 11.7874 5.59882L5.09664 12.2878C4.97947 12.405 4.7895 12.405 4.67232 12.2878L4.21213 11.8278C4.09495 11.7106 4.09495 11.5207 4.21213 11.4036L10.9028 4.71453C11.02 4.59739 11.21 4.59739 11.3272 4.71453L11.7874 5.17461Z" fill="white"/><path d="M11.3279 12.2852C11.2107 12.4024 11.0207 12.4024 10.9036 12.2852L4.21285 5.59619C4.09568 5.47905 4.09568 5.28912 4.21285 5.17198L4.67305 4.7119C4.79022 4.59476 4.98019 4.59476 5.09737 4.7119L11.7881 11.4009C11.9053 11.5181 11.9053 11.708 11.7881 11.8251L11.3279 12.2852Z" fill="white"/></g><defs><clipPath id="clip0_590_526"><rect width="16" height="16" fill="white" transform="translate(0 0.5)"/></clipPath></defs></svg>');
background-repeat: no-repeat;
background-position: left;
padding-left: 22px;
cursor: pointer;
font-size: 14px;
}
}
}
src/styles/components/layout.scss
+27
View File
@@ -0,0 +1,27 @@
.header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
.profile {
font-size: 12px;
color: #000;
padding-right: 12px;
position: relative;
&:after {
content: "";
top: 2px;
right: 0;
position: absolute;
transform: rotate(135deg);
width: 5px;
height: 5px;
display: inline-block;
vertical-align: middle;
border-top: 1px solid #000;
border-right: 1px solid #000;
color: transparent;
}
}
src/styles/components/product-card.scss
+5 -2
View File
@@ -1,10 +1,13 @@
@use "../mixins/media-queries";
@use '../fonts/poppins';
@use '../fonts/volkhov';
.product-card { .product-card {
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.06); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.06);
border-radius: 10px; border-radius: 10px;
//overflow: hidden;
position: relative; position: relative;
@include lg { @include media-queries.lg {
display: flex; display: flex;
height: 260px; height: 260px;
} }
src/styles/components/product.scss
+16 -12
View File
@@ -1,7 +1,11 @@
@use "../mixins/media-queries";
@use '../fonts/poppins';
@use '../fonts/volkhov';
.product { .product {
position: relative; position: relative;
@include lg { @include media-queries.lg {
display: flex; display: flex;
gap: 65px; gap: 65px;
height: 640px; height: 640px;
@@ -10,7 +14,7 @@
&__slider { &__slider {
@include lg { @include media-queries.lg {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 800px; max-width: 800px;
} }
@@ -29,7 +33,7 @@
} }
} }
@include lg { @include media-queries.lg {
border: 1px solid #D9D9D9; border: 1px solid #D9D9D9;
padding: 38px 32px; padding: 38px 32px;
@@ -44,7 +48,7 @@
&--mobile { &--mobile {
border: none; border: none;
@include lg { @include media-queries.lg {
display: none; display: none;
} }
} }
@@ -95,11 +99,11 @@
height: 550px; height: 550px;
width: auto; width: auto;
@include sm { @include media-queries.sm {
height: 580px; height: 580px;
} }
@include lg { @include media-queries.lg {
position: relative; position: relative;
height: 640px; height: 640px;
width: 640px; width: 640px;
@@ -110,11 +114,11 @@
border: 1px solid rgba(217, 217, 217, 1); border: 1px solid rgba(217, 217, 217, 1);
height: 480px; height: 480px;
@include lg { @include media-queries.lg {
width: 480px; width: 480px;
} }
@include md { @include media-queries.md {
margin-right: 98px; margin-right: 98px;
height: 640px; height: 640px;
} }
@@ -125,7 +129,7 @@
margin-top: 20px; margin-top: 20px;
bottom: 0; bottom: 0;
@include md { @include media-queries.md {
top: 0; top: 0;
right: 0; right: 0;
width: 94px; width: 94px;
@@ -140,17 +144,17 @@
width: 15%; width: 15%;
height: 50px; height: 50px;
@include sm { @include media-queries.sm {
height: 80px; height: 80px;
} }
@include md { @include media-queries.md {
width: 94px; width: 94px;
height: 114px; height: 114px;
margin: 0; margin: 0;
} }
@include lg { @include media-queries.lg {
margin-bottom: 15px; margin-bottom: 15px;
} }
src/styles/components/reset.scss
-2
View File
@@ -20,7 +20,6 @@ time, mark, audio, video {
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
font: inherit;
vertical-align: baseline; vertical-align: baseline;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -45,7 +44,6 @@ blockquote, q {
blockquote:before, blockquote:after, blockquote:before, blockquote:after,
q:before, q:after { q:before, q:after {
content: '';
content: none; content: none;
} }
src/styles/components/selectbox.scss
+64
View File
@@ -0,0 +1,64 @@
.selectbox {
border-radius: 3px !important;
min-height: 29px !important;
border-color: #D9D9D9;
&__input {
width: 100%;
border: 1px solid #d9d9d9;
border-radius: 3px;
height: 29px;
margin: 12px 0;
padding-left: 28px;
line-height: 29px;
background-repeat: no-repeat;
background-position: 6px center;
background-image: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.5" cy="8" r="6" stroke="%23484848"/><path d="M15.1521 16.199C15.0349 16.3162 14.8874 16.3586 14.8225 16.2937L11.1181 12.5902C11.0532 12.5254 11.0956 12.3778 11.2128 12.2607L11.673 11.8006C11.7901 11.6835 11.9377 11.6411 12.0026 11.7059L15.707 15.4094C15.7719 15.4743 15.7295 15.6218 15.6123 15.7389L15.1521 16.199Z" fill="%23484848"/></svg>');
}
&--active {
border-color: #000;
}
&__content {
font-size: 14px;
}
&__dropdown {
&-label {
font-weight: 400;
font-size: 12px;
line-height: 16px;
&:before {
top: 0 !important;
}
&:after {
top: 0 !important;
}
}
}
&__option {
height: 22px;
cursor: pointer;
margin: 12px 0;
}
&__options {
max-height: 250px;
overflow: auto;
}
}
.react-dropdown-select-dropdown {
width: 240px !important;
padding: 12px 22px !important;
top: 29px !important;
box-shadow: none !important;
border: none !important;
background: #f0f0f0 !important;
max-height: unset !important;
overflow: unset !important;
}
src/styles/components/slick.scss
+3 -1
View File
@@ -1,8 +1,10 @@
@use "../mixins/media-queries";
.slick-slider { .slick-slider {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@include lg { @include media-queries.lg {
height: 260px; height: 260px;
width: 620px; width: 620px;
} }
src/styles/components/tabs.scss
+27
View File
@@ -0,0 +1,27 @@
@use "../mixins/media-queries";
.tabs {
display: flex;
margin-top: 18px;
margin-bottom: 38px;
&__item {
height: 40px;
line-height: 40px;
padding: 0 26px;
color: #8A8A8A;
border-bottom: 1px solid #8A8A8A;
cursor: pointer;
font-size: 14px;
@include media-queries.md {
font-size: unset;
}
&--active {
color: #000;
border-bottom: 2px solid #000;
}
}
}
src/styles/components/tooltip.scss
+3
View File
@@ -1,3 +1,6 @@
@use '../fonts/poppins';
@use '../fonts/volkhov';
.tooltip { .tooltip {
&__data { &__data {
display: flex; display: flex;
src/styles/components/typography.scss
+3 -3
View File
@@ -1,6 +1,6 @@
@import '../fonts/poppins'; @use '../fonts/poppins';
@import '../fonts/volkhov'; @use '../fonts/volkhov';
@import '../helpers/space'; @use '../helpers/space';
body { body {
@extend .poppins-regular; @extend .poppins-regular;
src/styles/helpers/space.scss
+18 -2
View File
@@ -1,13 +1,14 @@
@use "sass:string";
$spaceamounts: (12, 24, 36, 48, 56, 60, 72, 16, 32, 64, 80, 96, 148); $spaceamounts: (12, 24, 36, 48, 56, 60, 72, 16, 32, 64, 80, 96, 148);
$sides: (top, bottom, left, right); $sides: (top, bottom, left, right);
@each $space in $spaceamounts { @each $space in $spaceamounts {
@each $side in $sides { @each $side in $sides {
.m-#{str-slice($side, 0, 1)}-#{$space} { .m-#{string.slice($side, 0, 1)}-#{$space} {
margin-#{$side}: #{$space}px !important; margin-#{$side}: #{$space}px !important;
} }
.p-#{str-slice($side, 0, 1)}-#{$space} { .p-#{string.slice($side, 0, 1)}-#{$space} {
padding-#{$side}: #{$space}px !important; padding-#{$side}: #{$space}px !important;
} }
} }
@@ -16,3 +17,18 @@ $sides: (top, bottom, left, right);
.center { .center {
text-align: center; text-align: center;
} }
.flex {
display: flex;
flex-wrap: wrap;
&--center {
justify-content: center;
}
@each $space in $spaceamounts {
&--gap-#{$space} {
gap: #{$space}px;
}
}
}
src/styles/mixins/media-queries.scss
+4 -1
View File
@@ -1,4 +1,7 @@
@import "../variables/breakpoints"; $screen-sm-min: 576px;
$screen-md-min: 768px;
$screen-lg-min: 992px;
$screen-xl-min: 1200px;
@mixin sm { @mixin sm {
@media (min-width: #{$screen-sm-min}) { @media (min-width: #{$screen-sm-min}) {
src/styles/styles.scss
+24 -14
View File
@@ -1,15 +1,25 @@
@import "./mixins/media-queries"; @use "mixins/media-queries";
@use "helpers/space.scss";
@use "fonts/poppins.scss";
@use "fonts/volkhov.scss";
@use "components/reset.scss";
@use "components/common.scss";
@use "components/checkbox.scss";
@use "components/badge.scss";
@use "components/tooltip.scss";
@use "components/button.scss";
@use "components/breadcrumb.scss";
@use "components/slick.scss";
@use "components/product.scss";
@use "components/product-card.scss";
@use "components/typography.scss";
@use "components/box.scss";
@use "components/selectbox.scss";
@use "components/tabs.scss";
@use "components/filter.scss";
@use "components/layout.scss";
@import "./components/reset.scss";
@import "./components/common.scss";
@import "./components/checkbox.scss";
@import "./components/badge.scss";
@import "./components/tooltip.scss";
@import "./components/button.scss";
@import "./components/breadcrumb.scss";
@import "./components/slick.scss";
@import "./components/product.scss";
@import "./components/product-card.scss";
@import "./components/typography.scss";
@import "./components/box.scss";
@import "./helpers/space.scss";
src/styles/variables/_breakpoints.scss → src/styles/variables/breakpoints.scss
View File
src/templates/ProductPage/ProductPage.jsx
+3 -4
View File
@@ -4,12 +4,12 @@ import {graphql} from 'gatsby';
import {GatsbyImage} from 'gatsby-plugin-image'; import {GatsbyImage} from 'gatsby-plugin-image';
import Badge from '../../components/Badge/Badge'; import Badge from '../../components/Badge/Badge';
import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
import SocialMediaTooltips from "../../components/SocialMediaTooltips/SocialMediaTooltips"; import SocialMediaTooltips from "../../components/SocialMediaTooltips/SocialMediaTooltips";
import getConfidence from '../../helpers/getConfidence'; import getConfidence from '../../helpers/getConfidence';
import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css'; import 'slick-carousel/slick/slick-theme.css';
import Layout from "../../components/Layout/Layout";
function ProductPage({location, pageContext, data}) { function ProductPage({location, pageContext, data}) {
const settings = { const settings = {
@@ -39,8 +39,7 @@ function ProductPage({location, pageContext, data}) {
const {name, tags, sources, description, socialMedia} = pageContext.data; const {name, tags, sources, description, socialMedia} = pageContext.data;
return ( return (
<main> <Layout breafcrumbs={location}>
<Breadcrumbs location={location.pathname} label={name}/>
<div className="product"> <div className="product">
<div className="product__data product__data--mobile"> <div className="product__data product__data--mobile">
<h1 className="product__title">{name}</h1> <h1 className="product__title">{name}</h1>
@@ -101,7 +100,7 @@ function ProductPage({location, pageContext, data}) {
</ul> </ul>
</div> </div>
</div> </div>
</main> </Layout>
); );
} }
yarn.lock
+151 -11
View File
@@ -160,7 +160,7 @@
"@babel/traverse" "^7.25.9" "@babel/traverse" "^7.25.9"
"@babel/types" "^7.25.9" "@babel/types" "^7.25.9"
"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.22.5", "@babel/helper-module-imports@^7.25.9": "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.5", "@babel/helper-module-imports@^7.25.9":
version "7.25.9" version "7.25.9"
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw== integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
@@ -997,7 +997,7 @@
"@babel/plugin-transform-modules-commonjs" "^7.25.9" "@babel/plugin-transform-modules-commonjs" "^7.25.9"
"@babel/plugin-transform-typescript" "^7.25.9" "@babel/plugin-transform-typescript" "^7.25.9"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": "@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.25.9" version "7.25.9"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.9.tgz#65884fd6dc255a775402cc1d9811082918f4bf00" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.9.tgz#65884fd6dc255a775402cc1d9811082918f4bf00"
integrity sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg== integrity sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==
@@ -1039,6 +1039,118 @@
resolved "https://registry.yarnpkg.com/@builder.io/partytown/-/partytown-0.7.6.tgz#697acea6b552167a4dd43ddd4827018aa42e0364" resolved "https://registry.yarnpkg.com/@builder.io/partytown/-/partytown-0.7.6.tgz#697acea6b552167a4dd43ddd4827018aa42e0364"
integrity sha512-snXIGNiZpqjno3XYQN2lbBB+05hsQR/LSttbtIW1c0gmZ7Kh/DIo0YrxlDxCDulAMFPFM8J+4voLwvYepSj3sw== integrity sha512-snXIGNiZpqjno3XYQN2lbBB+05hsQR/LSttbtIW1c0gmZ7Kh/DIo0YrxlDxCDulAMFPFM8J+4voLwvYepSj3sw==
"@emotion/babel-plugin@^11.11.0":
version "11.12.0"
resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
integrity sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==
dependencies:
"@babel/helper-module-imports" "^7.16.7"
"@babel/runtime" "^7.18.3"
"@emotion/hash" "^0.9.2"
"@emotion/memoize" "^0.9.0"
"@emotion/serialize" "^1.2.0"
babel-plugin-macros "^3.1.0"
convert-source-map "^1.5.0"
escape-string-regexp "^4.0.0"
find-root "^1.1.0"
source-map "^0.5.7"
stylis "4.2.0"
"@emotion/cache@^11.11.0":
version "11.13.1"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
dependencies:
"@emotion/memoize" "^0.9.0"
"@emotion/sheet" "^1.4.0"
"@emotion/utils" "^1.4.0"
"@emotion/weak-memoize" "^0.4.0"
stylis "4.2.0"
"@emotion/hash@^0.9.2":
version "0.9.2"
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
"@emotion/is-prop-valid@^1.2.1":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
dependencies:
"@emotion/memoize" "^0.9.0"
"@emotion/memoize@^0.9.0":
version "0.9.0"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
"@emotion/react@11.11.0":
version "11.11.0"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.0.tgz#408196b7ef8729d8ad08fc061b03b046d1460e02"
integrity sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==
dependencies:
"@babel/runtime" "^7.18.3"
"@emotion/babel-plugin" "^11.11.0"
"@emotion/cache" "^11.11.0"
"@emotion/serialize" "^1.1.2"
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
"@emotion/utils" "^1.2.1"
"@emotion/weak-memoize" "^0.3.1"
hoist-non-react-statics "^3.3.1"
"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.2.0":
version "1.3.2"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.2.tgz#e1c1a2e90708d5d85d81ccaee2dfeb3cc0cccf7a"
integrity sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==
dependencies:
"@emotion/hash" "^0.9.2"
"@emotion/memoize" "^0.9.0"
"@emotion/unitless" "^0.10.0"
"@emotion/utils" "^1.4.1"
csstype "^3.0.2"
"@emotion/sheet@^1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
"@emotion/styled@11.11.0":
version "11.11.0"
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
dependencies:
"@babel/runtime" "^7.18.3"
"@emotion/babel-plugin" "^11.11.0"
"@emotion/is-prop-valid" "^1.2.1"
"@emotion/serialize" "^1.1.2"
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
"@emotion/utils" "^1.2.1"
"@emotion/unitless@^0.10.0":
version "0.10.0"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz#1a818a0b2c481efba0cf34e5ab1e0cb2dcb9dfaf"
integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
"@emotion/utils@^1.2.1", "@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.1.tgz#b3adbb43de12ee2149541c4f1337d2eb7774f0ad"
integrity sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==
"@emotion/weak-memoize@^0.3.1":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
"@emotion/weak-memoize@^0.4.0":
version "0.4.0"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
"@eslint-community/eslint-utils@^4.2.0": "@eslint-community/eslint-utils@^4.2.0":
version "4.4.0" version "4.4.0"
resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59" resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -3696,6 +3808,11 @@ convert-source-map@^0.3.3:
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
integrity sha512-+4nRk0k3oEpwUB7/CalD7xE2z4VmtEnnq0GO2IPTkrooTrAhEsWvuLF5iWP1dXrwluki/azwXV1ve7gtYuPldg== integrity sha512-+4nRk0k3oEpwUB7/CalD7xE2z4VmtEnnq0GO2IPTkrooTrAhEsWvuLF5iWP1dXrwluki/azwXV1ve7gtYuPldg==
convert-source-map@^1.5.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
convert-source-map@^2.0.0: convert-source-map@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
@@ -5132,6 +5249,11 @@ find-cache-dir@^3.3.1, find-cache-dir@^3.3.2:
make-dir "^3.0.2" make-dir "^3.0.2"
pkg-dir "^4.1.0" pkg-dir "^4.1.0"
find-root@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
find-up@^3.0.0: find-up@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73" resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -5503,13 +5625,6 @@ gatsby-plugin-sharp@^5.13.1:
semver "^7.5.3" semver "^7.5.3"
sharp "^0.32.6" sharp "^0.32.6"
gatsby-plugin-styled-components@^6.13.1:
version "6.13.1"
resolved "https://registry.yarnpkg.com/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-6.13.1.tgz#589dadf8bfef8478e7089423b6224f92075bd985"
integrity sha512-5Y3rvqgOIXuYaMgrvMinPW1/1hht2M39gM6eZZOm08U1ybykHwIFYAj68eC2PauuwFj6Xg8T+X1zW5YHyaP21Q==
dependencies:
"@babel/runtime" "^7.20.13"
gatsby-plugin-typescript@^5.13.1: gatsby-plugin-typescript@^5.13.1:
version "5.13.1" version "5.13.1"
resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-5.13.1.tgz#4544000239e7801eb0ab7636d7de27c18a90672d" resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-5.13.1.tgz#4544000239e7801eb0ab7636d7de27c18a90672d"
@@ -6237,6 +6352,13 @@ header-case@^2.0.4:
capital-case "^1.0.4" capital-case "^1.0.4"
tslib "^2.0.3" tslib "^2.0.3"
hoist-non-react-statics@^3.3.1:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
dependencies:
react-is "^16.7.0"
hosted-git-info@^3.0.8: hosted-git-info@^3.0.8:
version "3.0.8" version "3.0.8"
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.8.tgz#6e35d4cc87af2c5f816e4cb9ce350ba87a3f370d" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.8.tgz#6e35d4cc87af2c5f816e4cb9ce350ba87a3f370d"
@@ -7210,7 +7332,7 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ== integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@~4.17.0: lodash@4.17.21, lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@~4.17.0:
version "4.17.21" version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8876,12 +8998,20 @@ react-dom@^18.2.0:
loose-envify "^1.1.0" loose-envify "^1.1.0"
scheduler "^0.23.2" scheduler "^0.23.2"
react-dropdown-select@4.11.3:
version "4.11.3"
resolved "https://registry.yarnpkg.com/react-dropdown-select/-/react-dropdown-select-4.11.3.tgz#b23b8906f3bedc9d6a1a2125af936b34d4057158"
integrity sha512-/mOGSqqhmKsxxrmotLM+qn1Ss3nxGN6QnYusyQ7f0wizsWrc7ZmbcZhGRtwkJwpL6JYDQVTn19EYxJU1XfXrDA==
dependencies:
"@emotion/react" "11.11.0"
"@emotion/styled" "11.11.0"
react-error-overlay@^6.0.11: react-error-overlay@^6.0.11:
version "6.0.11" version "6.0.11"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
react-is@^16.13.1: react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9773,6 +9903,11 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
source-map@^0.5.7:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
source-map@^0.7.3: source-map@^0.7.3:
version "0.7.4" version "0.7.4"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
@@ -10065,6 +10200,11 @@ stylehacks@^5.1.1:
browserslist "^4.21.4" browserslist "^4.21.4"
postcss-selector-parser "^6.0.4" postcss-selector-parser "^6.0.4"
stylis@4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
sudo-prompt@^8.2.0: sudo-prompt@^8.2.0:
version "8.2.5" version "8.2.5"
resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e" resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e"