\n \n
\n\n \n Join our newsletter\n
\n \n We’ll send you a nice letter once per week. No spam.\n
\n \n
\n\n \n
\n \n Craft stunning style journeys that weave more joy into every thread.\n
\n \n\n \n\n SHOP CATEGORIES
\n \n {CATEGORY_OPTIONS.items.map((category) => (\n \n {category.name}\n \n ))}\n
\n \n\n SHOP COLLECTIONS
\n \n {COLLECTIONS_OPTIONS.items.map((collection) => (\n \n {collection.name}\n \n ))}\n
\n \n \n\n \n © {new Date().getFullYear()} StyleNest, Inc. All rights reserved.\n
\n \n {footerSocials.map(({ icon: Icon, url, name }) => (\n \n
\n \n \n );\n};\n\nexport default Footer;\n"
+ },
+ "/src/components/Footer/index.js": {
+ "code": "import Footer from './Footer';\n\nexport default Footer;\n"
+ },
+ "/src/components/Footer/NewsletterForm.jsx": {
+ "code": "import { useState } from 'react';\n\nimport Button from 'src/components/ui/Button';\nimport TextInput from 'src/components/ui/TextInput';\n\nimport { useToast } from 'src/context/ToastContext';\n\nconst EMAIL_REGEX = /^[^@]+@[^@]+\\.[^@]+$/;\n\nconst NewsletterForm = () => {\n const toast = useToast();\n\n const [email, setEmail] = useState('');\n const [submitting, setSubmitting] = useState(false);\n const [errorMessage, setErrorMessage] = useState('');\n\n const onSubmit = async event => {\n event.preventDefault();\n\n if (!email.match(EMAIL_REGEX)) {\n setErrorMessage('Please enter a valid email address.');\n return;\n } else if (!email) {\n setErrorMessage('Email address is required.');\n return;\n } else {\n setErrorMessage('');\n }\n\n setSubmitting(true);\n\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n email,\n }), // Send the data in JSON format\n };\n\n // Make the request\n const res = await fetch(\n 'https://www.greatfrontend.com/api/projects/challenges/newsletter',\n requestOptions\n );\n const result = await res.json();\n\n if (result) {\n setEmail('');\n if (result.message) {\n toast.success(result.message);\n } else if (result.error) {\n toast.error(result.error);\n }\n }\n setSubmitting(false);\n };\n\n return (\n \n setOpenMenu(false)}\n aria-label=\"Close mobile menu\"\n type=\"button\"\n className={clsx(\n 'rounded text-neutral-600',\n 'focus:outline-none focus-visible:ring-4 focus-visible:ring-indigo-600/[.12]',\n )}>\n
\n \n {links.map((link) => (\n setOpenMenu(false)}\n className=\"px-3 py-2 text-sm\"\n variant=\"gray\"\n type=\"nav\">\n {link.name}\n \n ))}\n
\n ,\n document.body,\n )}\n \n );\n};\n\nexport default MobileNavMenu;\n"
+ },
+ "/src/components/Navbar/Navbar.jsx": {
+ "code": "import clsx from 'clsx';\n\nimport Link from 'src/components/ui/Link';\nimport CartButton from 'src/components/CartButton';\nimport MobileNavMenu from 'src/components/Navbar/MobileNavMenu';\n\nconst links = [\n {\n name: 'Shop all',\n href: '/products',\n },\n {\n name: 'Latest arrivals',\n href: '/latest',\n },\n];\n\nconst Navbar = ({ className }) => {\n return (\n \n
\n \n );\n};\n\nexport default Navbar;\n"
+ },
+ "/src/components/ProductCard/index.js": {
+ "code": "import ProductCard from './ProductCard';\n\nexport default ProductCard;\n"
+ },
+ "/src/components/ProductCard/ProductCard.jsx": {
+ "code": "import clsx from 'clsx';\nimport { useCallback, useMemo } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport Link from 'src/components/ui/Link';\nimport ColorSwatches from 'src/components/ui/ColorSwatches';\n\nimport { COLORS } from 'src/constants';\n\nimport { getUnavailableColors } from 'src/pages/ProductDetail/utils';\n\nconst ProductCard = ({ product }) => {\n const navigate = useNavigate();\n const { images, name, inventory, colors } = product;\n const { discount_percentage, sale_price, list_price, color } = inventory[0];\n\n const hasDiscount = !!discount_percentage;\n\n const unavailableColors = useMemo(\n () => getUnavailableColors(product),\n [product]\n );\n\n const redirectUrl = `/products/${product.product_id}`;\n\n const handleKeyDown = useCallback(\n event => {\n if (event.key === 'Enter') {\n navigate(redirectUrl);\n }\n },\n [navigate, redirectUrl]\n );\n\n return (\n \n \n {COLORS[color]?.label}\n \n \n \n {name}\n \n
\n \n );\n};\n\nexport default ProductCard;\n"
+ },
+ "/src/components/ProductGridSection/index.js": {
+ "code": "import ProductGridSection from './ProductGridSection';\n\nexport default ProductGridSection;\n"
+ },
+ "/src/components/ProductGridSection/ProductGridSection.jsx": {
+ "code": "import clsx from 'clsx';\nimport ProductCard from 'src/components/ProductCard';\n\nconst ProductGridSection = ({ products }) => {\n return (\n \n \n ${hasDiscount ? sale_price : list_price}\n \n {hasDiscount && (\n \n ${list_price}\n \n )}\n
\n \n {colors.map(color => (\n
\n \n {products.map(product => (\n \n
\n ))}\n \n );\n};\n\nexport default ProductGridSection;\n"
+ },
+ "/src/components/ProductSpecificationSection/index.js": {
+ "code": "import ProductSpecificationSection from './ProductSpecificationSection';\n\nexport default ProductSpecificationSection;\n"
+ },
+ "/src/components/ProductSpecificationSection/ProductSpecificationSection.jsx": {
+ "code": "import clsx from 'clsx';\nimport { useState } from 'react';\nimport {\n RiColorFilterLine,\n RiHandHeartLine,\n RiInfinityFill,\n RiPaintLine,\n RiPlantLine,\n RiPriceTag2Line,\n RiRainbowLine,\n RiRecycleLine,\n RiScales2Line,\n RiShapesLine,\n RiShieldStarLine,\n RiShirtLine,\n RiStackLine,\n RiTShirtLine,\n RiWaterFlashLine,\n RiWindyLine,\n} from 'react-icons/ri';\n\nimport Tabs from '../ui/Tabs';\n\nconst TABS = [\n { label: 'Sustainability', value: 'sustainability' },\n { label: 'Comfort', value: 'comfort' },\n { label: 'Durability', value: 'durability' },\n { label: 'Versatility', value: 'versatility' },\n];\n\nconst specifications = [\n {\n value: 'sustainability',\n title: 'Eco-Friendly Choice',\n description:\n 'With our sustainable approach, we curate clothing that makes a statement of care—care for the planet, and for the art of fashion.',\n img: {\n desktop:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/yellow-desktop.jpg',\n tablet:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/yellow-tablet.jpg',\n mobile:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/yellow-mobile.jpg',\n },\n items: [\n {\n label: 'Recycled Materials',\n icon: RiRecycleLine,\n },\n {\n label: 'Low Impact Dye',\n icon: RiPaintLine,\n },\n {\n label: 'Carbon Neutral',\n icon: RiPlantLine,\n },\n {\n label: 'Water Conservation',\n icon: RiWaterFlashLine,\n },\n ],\n },\n {\n value: 'comfort',\n title: 'Uncompromised Comfort',\n description:\n 'Our garments are a sanctuary of softness, tailored to drape gracefully and allow for freedom of movement.',\n img: {\n desktop:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/black-desktop.jpg',\n tablet:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/black-tablet.jpg',\n mobile:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/black-mobile.jpg',\n },\n items: [\n {\n label: 'Ergonomic Fits',\n icon: RiTShirtLine,\n },\n {\n label: 'Soft-to-the-Touch Fabrics',\n icon: RiHandHeartLine,\n },\n {\n label: 'Breathable Weaves',\n icon: RiWindyLine,\n },\n {\n label: 'Thoughtful Design',\n icon: RiColorFilterLine,\n },\n ],\n },\n {\n value: 'durability',\n title: 'Built to Last',\n description:\n 'Here’s to apparel that you can trust to look as good as new, wear after wear, year after year.',\n img: {\n desktop:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/chair-desktop.jpg',\n tablet:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/chair-tablet.jpg',\n mobile:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/chair-mobile.jpg',\n },\n items: [\n {\n label: 'Reinforced Construction',\n icon: RiStackLine,\n },\n {\n label: 'Quality Control',\n icon: RiScales2Line,\n },\n {\n label: 'Material Resilience',\n icon: RiShieldStarLine,\n },\n {\n label: 'Warranty and Repair',\n icon: RiPriceTag2Line,\n },\n ],\n },\n {\n value: 'versatility',\n title: 'Versatile by Design',\n description:\n 'Our pieces are a celebration of versatility, offering a range of styles that are as perfect for a business meeting as they are for a casual brunch. ',\n img: {\n desktop:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/clothes-desktop.jpg',\n tablet:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/clothes-tablet.jpg',\n mobile:\n 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/clothes-mobile.jpg',\n },\n items: [\n {\n label: 'Adaptive Styles',\n icon: RiRainbowLine,\n },\n {\n label: 'Functional Fashion',\n icon: RiShirtLine,\n },\n {\n label: 'Timeless Aesthetics',\n icon: RiInfinityFill,\n },\n {\n label: 'Mix-and-Match Potential',\n icon: RiShapesLine,\n },\n ],\n },\n];\n\nconst ProductSpecificationSection = () => {\n const [selectedSpecification, setSelectedSpecification] =\n useState('sustainability');\n\n const data = specifications.find(\n (specification) => specification.value === selectedSpecification,\n );\n\n return (\n \n
\n\n \n Discover timeless elegance\n
\n\n Step into a world where quality meets quintessential charm with our\n collection. Every thread weaves a promise of unparalleled quality,\n ensuring that each garment is not just a part of your wardrobe, but a\n piece of art. Here's the essence of what makes our apparel the\n hallmark for those with an eye for excellence and a heart for the\n environment.\n
\n\n
\n \n \n \n \n );\n};\n\nexport default ProductSpecificationSection;\n"
+ },
+ "/src/components/ScrollToTop/index.js": {
+ "code": "import ScrollToTop from './ScrollToTop';\n\nexport default ScrollToTop;\n"
+ },
+ "/src/components/ScrollToTop/ScrollToTop.jsx": {
+ "code": "import { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nexport default function ScrollToTop() {\n const { pathname } = useLocation();\n\n useEffect(() => {\n window.scrollTo(0, 0);\n }, [pathname]);\n\n return null;\n}\n"
+ },
+ "/src/components/ui/Accordion/Accordion.jsx": {
+ "code": "import clsx from 'clsx';\nimport { useState, useRef, createContext, useContext } from 'react';\nimport { RiAddCircleLine, RiIndeterminateCircleLine } from 'react-icons/ri';\n\nconst AccordionItemContext = createContext();\n\nconst AccordionItem = ({ children, id }) => {\n const [isOpen, setIsOpen] = useState(true);\n\n return (\n \n \n \n\n
\n ))}\n \n \n {data.items.map(({ label, icon: Icon }) => (\n \n \n
\n {label}\n \n
\n \n {data.title}\n
\n{data.description}
\n\n \n {children}\n \n
\n );\n};\n\nconst AccordionTrigger = ({ children }) => {\n const { id, isOpen, setIsOpen } = useContext(AccordionItemContext);\n const Icon = isOpen ? RiIndeterminateCircleLine : RiAddCircleLine;\n return (\n \n {children.map((item, index) => (\n
\n );\n};\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"
+ },
+ "/src/components/ui/Accordion/index.js": {
+ "code": "import * as Accordion from './Accordion';\n\nexport * from './Accordion';\nexport default Accordion;\n"
+ },
+ "/src/components/ui/Badge/Badge.jsx": {
+ "code": "import clsx from 'clsx';\n\nconst sizeClasses = {\n sm: clsx('h-5', 'py px-[5px]', 'text-xs'),\n md: clsx('h-6', 'py px-[7px]', 'text-sm'),\n lg: clsx('h-7', 'py-[3px] px-[9px]', 'text-sm'),\n};\n\nconst variantClasses = {\n neutral: clsx('bg-gray-50', 'border-neutral-200', 'text-neutral-600'),\n danger: clsx('bg-red-50', 'border-red-200', 'text-red-600'),\n warning: clsx('bg-amber-50', 'border-amber-200', 'text-amber-700'),\n success: clsx('bg-green-50', 'border-green-200', 'text-green-700'),\n brand: clsx('bg-indigo-50', 'border-indigo-200', 'text-indigo-700'),\n};\n\nconst Badge = ({ label, size = 'md', variant = 'neutral', className }) => {\n const commonClasses = clsx('rounded-full text-center border');\n return (\n \n {item}\n {index !== children.length - 1 && (\n \n )}\n
\n ))}\n \n \n {label}\n \n
\n );\n};\n\nexport default CheckboxInput;\n"
+ },
+ "/src/components/ui/CheckboxInput/index.js": {
+ "code": "import CheckboxInput from './CheckboxInput';\n\nexport default CheckboxInput;\n"
+ },
+ "/src/components/ui/ColorSwatches/ColorSwatches.jsx": {
+ "code": "import clsx from 'clsx';\n\nconst outerSizeClasses = {\n md: 'size-[56.67px]',\n sm: 'size-6',\n};\n\nconst innerSizeClasses = {\n md: 'size-[38px]',\n sm: 'size-4',\n};\n\nconst ringSizeClasses = {\n md: 'focus:ring-[9.33px]',\n sm: 'focus:ring-4',\n};\n\nconst strokeLineClasses = {\n md: 'h-0.5 w-11',\n sm: 'h-px w-5',\n};\n\nconst ColorSwatches = ({\n color,\n selected,\n onClick,\n outOfStock,\n size = 'md',\n type = 'radio',\n}) => {\n const readOnly = !onClick || outOfStock;\n\n return (\n \n {\n if (!onChange) {\n return;\n }\n\n onChange(event.target.checked, event);\n }}\n />\n
\n \n \n
\n \n );\n};\n\nexport { Dropdown, DropdownItem };\n"
+ },
+ "/src/components/ui/Dropdown/index.js": {
+ "code": "import * as Dropdown from './Dropdown';\n\nexport * from './Dropdown';\nexport default Dropdown;\n"
+ },
+ "/src/components/ui/Link/index.js": {
+ "code": "import Link from './Link';\n\nexport default Link;\n"
+ },
+ "/src/components/ui/Link/Link.jsx": {
+ "code": "import clsx from 'clsx';\nimport { NavLink, Link as RouterLink } from 'react-router-dom';\n\nconst linkVariantClasses = {\n primary: clsx(\n 'text-indigo-700',\n 'hover:text-indigo-800 focus:text-indigo-800',\n 'rounded focus:outline-none focus-visible:ring-4 focus-visible:ring-indigo-600/[.12]',\n 'px-0.5'\n ),\n gray: clsx(\n 'text-neutral-600',\n 'hover:text-neutral-900 focus:text-neutral-900',\n 'rounded focus:outline-none focus-visible:ring-4 focus-visible:ring-indigo-600/[.12]',\n 'px-0.5'\n ),\n unstyled: '',\n};\n\nconst activeLinkClasses = {\n primary: 'text-indigo-800',\n gray: 'text-neutral-900',\n unstyled: '',\n};\n\nconst Link = ({\n children,\n disabled,\n className,\n type = 'default',\n variant = 'primary',\n ...props\n}) => {\n const commonClassName = clsx(\n 'font-medium rounded',\n linkVariantClasses[variant],\n {\n 'pointer-events-none text-neutral-400': disabled,\n },\n className\n );\n\n if (type === 'nav') {\n return (\n \n setIsOpen(!isOpen)}\n id={id}\n aria-expanded=\"true\"\n aria-haspopup=\"true\"\n variant=\"secondary\"\n endIcon={RiArrowDownSLine}\n />\n
\n\n \n \n {children}\n \n
\n \n {Array.from({ length: max }).map((_, index) => (\n !readOnlyMode && setHoveredIndex(index)}\n onMouseLeave={() => !readOnlyMode && setHoveredIndex(null)}\n className={clsx(\n !readOnlyMode && 'cursor-pointer',\n selected ? 'text-yellow-500' : 'text-yellow-400'\n )}\n onClick={() => onChange?.(index + 1)}>\n = index + 1\n }\n halfFilled={value < index + 1 && value > index}\n className={clsx(showHover && 'group-hover:stroke-indigo-200')}\n />\n \n ))}\n
\n );\n};\n\nexport default Rating;\n"
+ },
+ "/src/components/ui/Rating/Star.jsx": {
+ "code": "import clsx from 'clsx';\n\nconst Star = ({ filled, halfFilled, className }) => {\n return filled ? (\n {children}
\n \n ,\n document.body\n )}\n \n );\n};\n\nexport default SlideOut;\n"
+ },
+ "/src/components/ui/Tabs/index.js": {
+ "code": "import Tabs from './Tabs';\n\nexport default Tabs;\n"
+ },
+ "/src/components/ui/Tabs/Tabs.jsx": {
+ "code": "import clsx from 'clsx';\n\nconst Tabs = ({ label, tabs, value, onSelect }) => {\n return (\n \n \n \n
\n \n );\n};\n\nexport default Tabs;\n"
+ },
+ "/src/components/ui/TextInput/index.js": {
+ "code": "import TextInput from './TextInput';\n\nexport default TextInput;\n"
+ },
+ "/src/components/ui/TextInput/TextInput.jsx": {
+ "code": "import clsx from 'clsx';\nimport { useId } from 'react';\n\nconst TextInput = ({\n label,\n placeholder,\n value,\n onChange,\n type,\n id: idParam,\n required,\n isDisabled,\n errorMessage,\n hintMessage,\n startIcon: StartIcon,\n endIcon: EndIcon,\n startIconClassName,\n endIconClassName,\n}) => {\n const generateId = useId();\n const id = idParam ?? generateId;\n const hasError = !!errorMessage;\n\n const messageId = useId();\n\n const hasBottomSection = !!errorMessage || !!hintMessage;\n\n return (\n \n {label && (\n \n {label}\n \n )}\n \n {errorMessage || hintMessage}\n
\n )}\n \n );\n};\n\nexport default TextInput;\n"
+ },
+ "/src/components/ui/Toast/index.js": {
+ "code": "import Toast from './Toast';\n\nexport default Toast;\n"
+ },
+ "/src/components/ui/Toast/Toast.jsx": {
+ "code": "import clsx from 'clsx';\nimport React from 'react';\n\nconst Toast = ({ type, message }) => {\n const badge = (\n \n {StartIcon && (\n onChange(event.target.value, event)}\n required={required}\n disabled={isDisabled}\n className={clsx(\n 'block w-full',\n 'py-[9px] px-[13px]',\n 'outline:none',\n 'border border-neutral-200 disabled:border-neutral-100',\n 'bg-neutral-50',\n 'rounded',\n 'text-sm text-neutral-900 placeholder:text-neutral-500 disabled:text-neutral-400 disabled:placeholder:text-neutral-400',\n 'focus:outline-none',\n 'focus:ring-4 focus:ring-offset-0 focus:ring-indigo-600/[.12] focus:border-indigo-600',\n hasError && 'focus:ring-red-600/[.12] focus:border-red-600',\n 'disabled:pointer-events-none',\n StartIcon && 'pl-[41px]',\n EndIcon && 'pr-[38px]'\n )}\n />\n\n {EndIcon && (\n
\n\n {hasBottomSection && (\n \n
\n )}\n\n \n
\n )}\n \n \n {badge}\n {message}\n
\n \n );\n};\n\nexport default Toast;\n"
+ },
+ "/src/components/ui/Tooltip/index.js": {
+ "code": "import Tooltip from './Tooltip';\n\nexport default Tooltip;\n"
+ },
+ "/src/components/ui/Tooltip/Tooltip.jsx": {
+ "code": "import clsx from 'clsx';\nimport { useState } from 'react';\n\nconst Tooltip = ({ children, content, position = 'top', show = true }) => {\n const [visible, setVisible] = useState(false);\n\n const positions = {\n top: 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',\n bottom: 'top-full left-1/2 transform -translate-x-1/2 mt-2',\n left: 'right-full top-1/2 transform -translate-y-1/2 mr-2',\n right: 'left-full top-1/2 transform -translate-y-1/2 ml-2',\n };\n\n const arrowPositions = {\n top: 'bottom-[-4px] left-1/2 transform -translate-x-1/2 border-t-neutral-950 border-t-8 border-x-8 border-x-transparent',\n bottom:\n 'top-[-4px] left-1/2 transform -translate-x-1/2 border-b-neutral-950 border-b-8 border-x-8 border-x-transparent',\n left: 'right-[-4px] top-1/2 transform -translate-y-1/2 border-l-neutral-950 border-l-8 border-y-8 border-y-transparent',\n right:\n 'left-[-4px] top-1/2 transform -translate-y-1/2 border-r-neutral-950 border-r-8 border-y-8 border-y-transparent',\n };\n\n return (\n \n
\n {isProductsLoading ? (\n \n Latest Arrivals\n
\n \n Loading...\n
\n ) : (\n - \n {item.description.map(descItem => (\n
- {descItem} \n ))}\n
Loading...
\n ) : (\n \n
\n \n
\n \n )}\n \n );\n};\n\nexport default ProductDetail;\n"
+ },
+ "/src/pages/ProductDetail/components/ProductImages.jsx": {
+ "code": "import { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useProductDetailsContext } from './ProductDetailsContext';\nimport { getSelectedColorImages } from '../utils';\n\nconst ProductImages = () => {\n const { product, selectedColor } = useProductDetailsContext();\n const [selectedPreview, setSelectedPreview] = useState(0);\n\n const images = getSelectedColorImages({ product, color: selectedColor });\n\n return (\n \n
\n );\n};\n\nexport default ProductImages;\n"
+ },
+ "/src/pages/ProductDetail/components/ProductMetadata.jsx": {
+ "code": "import { useMemo } from 'react';\nimport clsx from 'clsx';\nimport { useMediaQuery } from 'usehooks-ts';\n\nimport Badge from 'src/components/ui/Badge';\nimport Button from 'src/components/ui/Button';\nimport Rating from 'src/components/ui/Rating';\nimport AvailableColors from './AvailableColors';\nimport AvailableSizes from './AvailableSizes';\nimport ProductQuantity from './ProductQuantity';\nimport InfoSection from './InfoSection';\n\nimport { useProductDetailsContext } from './ProductDetailsContext';\nimport { useCartContext } from 'src/context/CartContext';\nimport { getInventoryData } from '../utils';\n\nconst ProductMetadata = () => {\n const isMobileAndBelow = useMediaQuery('(max-width: 767px)');\n const { product, selectedColor, selectedSize, itemQuantity } =\n useProductDetailsContext();\n const { addToCart } = useCartContext();\n\n const { name, description, reviews, rating } = product;\n\n const inventoryData = useMemo(\n () =>\n getInventoryData({ product, color: selectedColor, size: selectedSize }),\n [selectedColor, selectedSize, product]\n );\n const { discount_percentage, list_price, sale_price, stock } = inventoryData;\n\n const roundedRating = Math.round(rating * 10) / 10;\n const hasDiscount = !!discount_percentage;\n\n const onAddToCart = e => {\n e.preventDefault();\n\n const item = {\n id: product.product_id,\n quantity: itemQuantity,\n color: selectedColor,\n size: selectedSize,\n };\n addToCart(item);\n };\n\n return (\n \n {images.map((image, index) => (\n setSelectedPreview(index)}\n className={clsx(\n 'rounded-lg shrink-0 block',\n 'w-20 h-[120px] md:h-[190px] md:w-[188px] lg:w-40 object-cover',\n 'cursor-pointer',\n index === selectedPreview && 'border-[3px] border-indigo-600'\n )}\n />\n ))}\n
\n \n \n \n \n \n\n
\n );\n};\n\nexport default ProductMetadata;\n"
+ },
+ "/src/pages/ProductDetail/components/ProductQuantity.jsx": {
+ "code": "import CartControl from 'src/components/CartControl';\nimport { useProductDetailsContext } from './ProductDetailsContext';\n\nconst ProductQuantity = ({ availableStock }) => {\n const { itemQuantity, incrementQuantity, decrementQuantity } =\n useProductDetailsContext();\n\n return (\n \n );\n};\n\nexport default ProductQuantity;\n"
+ },
+ "/src/pages/ProductDetail/index.js": {
+ "code": "import ProductDetailPage from './ProductDetailPage';\n\nexport default ProductDetailPage;\n"
+ },
+ "/src/pages/ProductDetail/ProductDetailPage.jsx": {
+ "code": "import ProductSpecificationSection from 'src/components/ProductSpecificationSection';\n\nimport ProductCollectionSection from './components/ProductCollectionSection';\nimport ProductDetailSection from './components/ProductDetailSection';\nimport ProductDetailsContextProvider from './components/ProductDetailsContext';\n\nconst ProductDetailPage = () => {\n return (\n <>\n \n
\n\n {name}
\n\n
\n {hasDiscount && (\n \n \n ${hasDiscount ? sale_price : list_price}\n \n {hasDiscount && (\n \n ${list_price}\n \n )}\n
\n \n
\n )}\n\n \n
\n {roundedRating ?? 0}
\n \n \n No reviews yet.\n \n
\n )}\n {description}
\n \n\n\n \n {children}\n \n
\n );\n};\n\nconst AccordionTrigger = ({ children }) => {\n const { id, isOpen, setIsOpen } = useContext(AccordionItemContext);\n const Icon = isOpen ? RiSubtractLine : RiAddLine;\n return (\n {children}
\n \n );\n};\n\nconst Accordion = ({ children }) => {\n const hasMultipleItem = Array.isArray(children);\n return (\n \n {!hasMultipleItem\n ? children\n : children.map((item, index) => (\n
\n );\n};\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"
+ },
+ "/src/pages/ProductListing/components/Accordion/index.js": {
+ "code": "import * as Accordion from './Accordion';\n\nexport * from './Accordion';\nexport default Accordion;\n"
+ },
+ "/src/pages/ProductListing/components/Filter.jsx": {
+ "code": "import clsx from 'clsx';\nimport { RiFilterLine } from 'react-icons/ri';\nimport { useState } from 'react';\n\nimport CheckboxInput from 'src/components/ui/CheckboxInput';\nimport ColorSwatches from 'src/components/ui/ColorSwatches';\nimport SlideOut from 'src/components/ui/SlideOut';\nimport Button from 'src/components/ui/Button';\nimport Rating from 'src/components/ui/Rating/Rating';\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from 'src/pages/ProductListing/components/Accordion';\n\nimport { useProductListingContext } from './ProductListingContext';\nimport {\n CATEGORY_OPTIONS,\n COLLECTIONS_OPTIONS,\n COLORS_OPTIONS,\n RATING_OPTIONS,\n} from 'src/constants';\n\nconst Filter = () => {\n const {\n selectedCategory,\n selectedCollections,\n selectedColors,\n selectedRating,\n filterCount,\n onSelect,\n resetFilters,\n } = useProductListingContext();\n const [isFilterOpen, setIsFilterOpen] = useState(false);\n\n const filterItems = (\n \n {item}\n \n
\n ))}\n \n \n \n {COLLECTIONS_OPTIONS.title} \n \n \n \n\n \n {CATEGORY_OPTIONS.title} \n \n \n \n\n \n {COLORS_OPTIONS.title} \n \n \n \n\n \n {RATING_OPTIONS.title} \n \n \n \n \n {filterCount > 0 && (\n {\n resetFilters();\n setIsFilterOpen(false);\n }}\n label={`Clear All (${filterCount})`}\n variant=\"link\"\n size=\"lg\"\n />\n )}\n
\n );\n\n return (\n \n {COLLECTIONS_OPTIONS.items.map(({ name, value }) => (\n onSelect(COLLECTIONS_OPTIONS.key, value)}\n />\n ))}\n
\n \n {CATEGORY_OPTIONS.items.map(({ name, value }) => (\n onSelect(CATEGORY_OPTIONS.key, value)}\n />\n ))}\n
\n \n {COLORS_OPTIONS.items.map(({ color, value }) => (\n onSelect(COLORS_OPTIONS.key, value)}\n size=\"sm\"\n />\n ))}\n
\n \n {RATING_OPTIONS.items.map(({ value }) => (\n onSelect(RATING_OPTIONS.key, value)}>\n
\n \n
\n );\n};\n\nexport default Filter;\n"
+ },
+ "/src/pages/ProductListing/components/hooks/useProductFilters.js": {
+ "code": "import { useEffect, useRef, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport {\n CATEGORY_OPTIONS,\n COLLECTIONS_OPTIONS,\n COLORS_OPTIONS,\n RATING_OPTIONS,\n} from 'src/constants';\n\nexport default function useProductFilters() {\n const { search } = useLocation();\n const isMounted = useRef(false);\n\n const query = new URLSearchParams(search);\n const collectionId = query.get('collectionId');\n const categoryId = query.get('categoryId');\n\n const [selectedCollections, setSelectedCollections] = useState(\n collectionId ? new Set().add(collectionId) : new Set()\n );\n const [selectedCategory, setSelectedCategory] = useState(\n categoryId ? new Set().add(categoryId) : new Set()\n );\n const [selectedColors, setSelectedColors] = useState(new Set());\n const [selectedRating, setSelectedRating] = useState(new Set());\n const [selectedSort, setSelectedSort] = useState({\n value: 'created',\n direction: 'desc',\n });\n\n const onSelect = (type, value) => {\n let newSelectedItems;\n if (type === COLLECTIONS_OPTIONS.key) {\n newSelectedItems = new Set(selectedCollections);\n }\n if (type === CATEGORY_OPTIONS.key) {\n newSelectedItems = new Set(selectedCategory);\n }\n if (type === COLORS_OPTIONS.key) {\n newSelectedItems = new Set(selectedColors);\n }\n if (type === RATING_OPTIONS.key) {\n newSelectedItems = new Set(selectedRating);\n }\n\n newSelectedItems.has(value)\n ? newSelectedItems.delete(value)\n : newSelectedItems.add(value);\n\n if (type === COLLECTIONS_OPTIONS.key) {\n setSelectedCollections(newSelectedItems);\n }\n if (type === CATEGORY_OPTIONS.key) {\n setSelectedCategory(newSelectedItems);\n }\n if (type === COLORS_OPTIONS.key) {\n setSelectedColors(newSelectedItems);\n }\n if (type === RATING_OPTIONS.key) {\n setSelectedRating(newSelectedItems);\n }\n };\n\n const resetFilters = () => {\n setSelectedCollections(new Set());\n setSelectedCategory(new Set());\n setSelectedColors(new Set());\n setSelectedRating(new Set());\n };\n\n const filterCount =\n selectedCollections.size +\n selectedCategory.size +\n selectedColors.size +\n selectedRating.size;\n\n useEffect(() => {\n // only run after mounted when the collectionId or categoryId query param change\n if (isMounted.current) {\n if (collectionId) {\n // Reset every filters when we query params is changed\n resetFilters();\n setSelectedCollections(new Set().add(collectionId));\n }\n if (categoryId) {\n // Reset every filters when we query params is changed\n resetFilters();\n setSelectedCategory(new Set().add(categoryId));\n }\n }\n isMounted.current = true;\n }, [collectionId, categoryId]);\n\n return {\n selectedCollections,\n selectedCategory,\n selectedColors,\n selectedRating,\n selectedSort,\n filterCount,\n onSelect,\n resetFilters,\n onSortChange: setSelectedSort,\n };\n}\n"
+ },
+ "/src/pages/ProductListing/components/ProductListingContext.jsx": {
+ "code": "import {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport useProductFilters from './hooks/useProductFilters';\nimport {\n CATEGORY_OPTIONS,\n COLLECTIONS_OPTIONS,\n COLORS_OPTIONS,\n RATING_OPTIONS,\n} from 'src/constants';\n\nconst ProductListingContext = createContext();\n\nexport const useProductListingContext = () => useContext(ProductListingContext);\n\nconst ProductListingContextProvider = ({ children }) => {\n const [products, setProducts] = useState(null);\n const [isProductsLoading, setIsProductsLoading] = useState(true);\n const {\n selectedCollections,\n selectedCategory,\n selectedColors,\n selectedRating,\n selectedSort,\n filterCount,\n onSelect,\n resetFilters,\n onSortChange,\n } = useProductFilters();\n\n const getProducts = useCallback(\n async ({ colors, collections, ratings, categories, sort }) => {\n setIsProductsLoading(true);\n\n let queryString = '';\n if (\n colors.size > 0 ||\n collections.size > 0 ||\n ratings.size > 0 ||\n categories.size > 0\n ) {\n queryString = [\n ...Array.from(colors).map(\n color => `${COLORS_OPTIONS.key}=${encodeURIComponent(color)}`\n ),\n ...Array.from(collections).map(\n collection =>\n `${COLLECTIONS_OPTIONS.key}=${encodeURIComponent(collection)}`\n ),\n ...Array.from(ratings).map(\n rating => `${RATING_OPTIONS.key}=${encodeURIComponent(rating)}`\n ),\n ...Array.from(categories).map(\n category =>\n `${CATEGORY_OPTIONS.key}=${encodeURIComponent(category)}`\n ),\n ].join('&');\n }\n\n queryString = `${queryString ? `${queryString}&` : ''}sort=${\n sort.value\n }&direction=${sort.direction}`;\n\n const data = await fetch(\n `https://www.greatfrontend.com/api/projects/challenges/e-commerce/products${\n queryString ? `?${queryString}` : ''\n }`\n );\n const result = await data.json();\n\n if (!result.error) {\n setProducts(result.data);\n }\n setIsProductsLoading(false);\n },\n []\n );\n\n useEffect(() => {\n getProducts({\n colors: selectedColors,\n categories: selectedCategory,\n collections: selectedCollections,\n ratings: selectedRating,\n sort: selectedSort,\n });\n }, [\n getProducts,\n selectedColors,\n selectedCategory,\n selectedCollections,\n selectedRating,\n selectedSort,\n ]);\n\n const value = useMemo(() => {\n return {\n products,\n isProductsLoading,\n\n selectedCollections,\n selectedCategory,\n selectedColors,\n selectedRating,\n selectedSort,\n filterCount,\n onSelect,\n resetFilters,\n onSortChange,\n };\n }, [\n products,\n isProductsLoading,\n\n selectedCollections,\n selectedCategory,\n selectedColors,\n selectedRating,\n selectedSort,\n filterCount,\n onSelect,\n resetFilters,\n onSortChange,\n ]);\n\n return (\n {filterItems}
\n \n Filter}\n onClose={() => setIsFilterOpen(false)}\n trigger={\n setIsFilterOpen(!isFilterOpen)}\n />\n }>\n {filterItems}\n \n
\n \n
\n ));\n};\n\nexport default ProductListingSection;\n"
+ },
+ "/src/pages/ProductListing/components/SortByFilter.jsx": {
+ "code": "import { Dropdown, DropdownItem } from 'src/components/ui/Dropdown';\n\nimport { useProductListingContext } from './ProductListingContext';\nimport { SORT_OPTIONS } from 'src/constants';\n\nconst SortByFilter = () => {\n const { onSortChange, selectedSort } = useProductListingContext();\n return (\n \n
\n \n\n \n
\n\n Our Collections
\n {isFetching ? (\n Loading...
\n ) : (\n \n
\n )}\n \n );\n};\n\nexport default CollectionsGridSection;\n"
+ },
+ "/src/pages/Storefront/components/FeaturesGridSection.jsx": {
+ "code": "import clsx from 'clsx';\nimport { RiExchangeLine, RiShieldCheckLine, RiTruckLine } from 'react-icons/ri';\n\nconst FEATURES = [\n {\n title: 'Complimentary Shipping',\n description:\n 'Enjoy the convenience of free shipping for all orders. We believe in transparent pricing, and the price you see is the price you pay—no surprise fees',\n icon: RiTruckLine,\n },\n {\n title: '2-Year Quality Promise',\n description:\n \"Shop with confidence knowing that we stand behind our products. Should any issue arise within the first two years, rest assured we're here to help with a hassle-free replacement.\",\n icon: RiShieldCheckLine,\n },\n {\n title: 'Easy Exchanges',\n description:\n \"If your purchase isn't quite right, pass it on to a friend who might love it, and let us know. We're happy to facilitate an exchange to ensure you have the perfect item to complement your lifestyle.\",\n icon: RiExchangeLine,\n },\n];\n\nconst FeaturesGridSection = () => {\n return (\n \n
\n \n
\n \n
\n \n
\n \n \n Elevate Your Experience\n \n
\n \n Our Commitment to Exceptional Service\n
\n\n We pride ourselves on a foundation of exceptional customer service,\n where every interaction is a testament to our dedication to\n excellence.\n
\n\n \n {title}\n \n \n {description}\n \n
\n \n ))}\n \n \n );\n};\n\nexport default FeaturesGridSection;\n"
+ },
+ "/src/pages/Storefront/components/HeroSection.jsx": {
+ "code": "import clsx from 'clsx';\nimport Button from 'src/components/ui/Button';\nimport { useMediaQuery } from 'usehooks-ts';\n\nconst HeroSection = () => {\n const isMobileAndBelow = useMediaQuery('(max-width: 767px)');\n\n return (\n \n \n Summer styles are finally here\n \n \n This year, our new summer collection will be your haven from the\n world's harsh elements.\n \n
\n \n
\n \n \n
\n );\n};\n\nexport default StorefrontPage;\n"
+ }
+ },
+ "workspace": {
+ "visibleFiles": [
+ "/src/App.js",
+ "/src/index.css",
+ "/src/pages/Storefront/StorefrontPage.jsx"
+ ],
+ "activeFile": "/src/App.js",
+ "environment": "create-react-app",
+ "externalResources": [
+ "https://cdn.tailwindcss.com"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/apps/web/src/content/projects/challenges/storefront-page/metadata.json b/apps/web/src/content/projects/challenges/storefront-page/metadata.json
index c6ff23a4f..63cf26190 100644
--- a/apps/web/src/content/projects/challenges/storefront-page/metadata.json
+++ b/apps/web/src/content/projects/challenges/storefront-page/metadata.json
@@ -25,6 +25,8 @@
"performance": 5
},
"skills": [],
+ "solutionFrameworks": ["react"],
+ "solutionFrameworkDefault": "react",
"resources": [
"design-files",
"image-assets",
diff --git a/packages/projects/challenges/storefront-page/solutions/react/greatfrontend.json b/packages/projects/challenges/storefront-page/solutions/react/greatfrontend.json
new file mode 100644
index 000000000..df7abbdb3
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/greatfrontend.json
@@ -0,0 +1,10 @@
+{
+ "visibleFiles": [
+ "/src/App.js",
+ "/src/index.css",
+ "/src/pages/Storefront/StorefrontPage.jsx"
+ ],
+ "activeFile": "/src/App.js",
+ "environment": "create-react-app",
+ "externalResources": ["https://cdn.tailwindcss.com"]
+}
diff --git a/packages/projects/challenges/storefront-page/solutions/react/index.css b/packages/projects/challenges/storefront-page/solutions/react/index.css
new file mode 100644
index 000000000..8d151a080
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/index.css
@@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ font-family:
+ 'Noto Sans',
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ 'Segoe UI',
+ Roboto,
+ Oxygen,
+ Ubuntu,
+ Cantarell,
+ 'Open Sans',
+ 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ background: linear-gradient(147.52deg, #f9fafb 8.89%, #d2d6db 100.48%);
+}
+
+/* Custom z-index */
+.z-sticky {
+ z-index: 1020;
+}
+.z-fixed {
+ z-index: 1030;
+}
+.z-dropdown {
+ z-index: 1000;
+}
+.z-modal {
+ z-index: 1055;
+}
+.z-toast {
+ z-index: 1090;
+}
+
+/* Custom animations and keyframes */
+@keyframes slideout {
+ from {
+ transform: translateX(-100%);
+ }
+ to {
+ transform: translateX(0%);
+ }
+}
+
+.animate-slideout {
+ animation: slideout 0.4s ease-out;
+}
+
+/* Custom box shadow */
+.shadow-custom {
+ box-shadow:
+ 0px 1px 2px 0 rgb(0 0 0 / 0.06),
+ 0px 1px 3px 0 rgb(0 0 0 / 0.1);
+}
+.shadow-input {
+ box-shadow:
+ 0px 0px 0px 1px #444ce7,
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
+ 0px 0px 0px 4px rgba(68, 76, 231, 0.12);
+}
+
+/* Custom background */
+.bg-collection {
+ background: linear-gradient(
+ 60deg,
+ rgba(0, 0, 0, 0.4) -9.37%,
+ rgba(0, 0, 0, 0.132) 100%
+ );
+}
+.bg-collection-hover {
+ background: linear-gradient(
+ 360deg,
+ rgba(0, 0, 0, 0.6) -9.37%,
+ rgba(0, 0, 0, 0.198) 100%
+ );
+}
diff --git a/packages/projects/challenges/storefront-page/solutions/react/jsconfig.json b/packages/projects/challenges/storefront-page/solutions/react/jsconfig.json
new file mode 100644
index 000000000..30b25afe5
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/jsconfig.json
@@ -0,0 +1,6 @@
+{
+ "compilerOptions": {
+ "baseUrl": "."
+ },
+ "include": ["src"]
+}
diff --git a/packages/projects/challenges/storefront-page/solutions/react/package.json b/packages/projects/challenges/storefront-page/solutions/react/package.json
new file mode 100644
index 000000000..7b7fc9dd0
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/package.json
@@ -0,0 +1,19 @@
+{
+ "name": "@gfe-challenges/storefront-page-solution",
+ "version": "0.0.1",
+ "dependencies": {
+ "clsx": "^2.1.1",
+ "react-icons": "^5.2.1",
+ "react-router-dom": "^6.23.1",
+ "usehooks-ts": "^3.1.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "react-scripts": "5.0.1"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
+ }
+}
diff --git a/packages/projects/challenges/storefront-page/solutions/react/public/index.html b/packages/projects/challenges/storefront-page/solutions/react/public/index.html
new file mode 100644
index 000000000..209dd8f10
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/public/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+ {count}
+
+ )}
+
+
+
+ {quantity}
+
+
+
+
+
+ );
+};
+
+export default CartControl;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/CartControl/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/CartControl/index.js
new file mode 100644
index 000000000..d2a9d888f
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/CartControl/index.js
@@ -0,0 +1,3 @@
+import CartControl from './CartControl';
+
+export default CartControl;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/CollectionCard/CollectionCard.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/CollectionCard/CollectionCard.jsx
new file mode 100644
index 000000000..b8beeaf35
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/CollectionCard/CollectionCard.jsx
@@ -0,0 +1,67 @@
+import clsx from 'clsx';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Link from 'src/components/ui/Link';
+
+const variantClasses = {
+ primary: clsx('max-w-[594px] h-[580px]'),
+ secondary: clsx('max-w-[594px] h-[337px] md:h-[276px]'),
+};
+
+const CollectionCard = ({
+ imageUrl,
+ name,
+ description,
+ id,
+ variant = 'primary',
+}) => {
+ const navigate = useNavigate();
+
+ const redirectUrl = `/products?collectionId=${id}`;
+
+ const handleKeyDown = useCallback(
+ event => {
+ if (event.key === 'Enter') {
+ navigate(redirectUrl);
+ }
+ },
+ [navigate, redirectUrl]
+ );
+
+ return (
+
+ 
+
+
+ );
+};
+
+export default CollectionCard;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/CollectionCard/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/CollectionCard/index.js
new file mode 100644
index 000000000..4419d8bb4
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/CollectionCard/index.js
@@ -0,0 +1,3 @@
+import CollectionCard from './CollectionCard';
+
+export default CollectionCard;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/Footer/Footer.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/Footer/Footer.jsx
new file mode 100644
index 000000000..1dcb3bd5f
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/Footer/Footer.jsx
@@ -0,0 +1,143 @@
+import clsx from 'clsx';
+import {
+ RiFacebookBoxLine,
+ RiGithubLine,
+ RiInstagramLine,
+ RiTwitterXLine,
+ RiYoutubeLine,
+} from 'react-icons/ri';
+
+import Link from '../ui/Link';
+import NewsletterForm from './NewsletterForm';
+import { CATEGORY_OPTIONS, COLLECTIONS_OPTIONS } from 'src/constants';
+
+const footerSocials = [
+ {
+ icon: RiYoutubeLine,
+ url: 'https://youtube.com',
+ name: "Link to Stylenest's youtube profile",
+ },
+ {
+ icon: RiInstagramLine,
+ url: 'https://instagram.com',
+ name: "Link to Stylenest's instagram profile",
+ },
+ {
+ icon: RiFacebookBoxLine,
+ url: 'https://facebook.com',
+ name: "Link to Stylenest's facebook profile",
+ },
+ {
+ icon: RiGithubLine,
+ url: 'https://github.com',
+ name: "Link to Stylenest's github profile",
+ },
+ {
+ icon: RiTwitterXLine,
+ url: 'https://twitter.com',
+ name: "Link to Stylenest's twitter profile",
+ },
+];
+
+const Footer = () => {
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/Footer/NewsletterForm.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/Footer/NewsletterForm.jsx
new file mode 100644
index 000000000..7b215b440
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/Footer/NewsletterForm.jsx
@@ -0,0 +1,74 @@
+import { useState } from 'react';
+
+import Button from 'src/components/ui/Button';
+import TextInput from 'src/components/ui/TextInput';
+
+import { useToast } from 'src/context/ToastContext';
+
+const EMAIL_REGEX = /^[^@]+@[^@]+\.[^@]+$/;
+
+const NewsletterForm = () => {
+ const toast = useToast();
+
+ const [email, setEmail] = useState('');
+ const [submitting, setSubmitting] = useState(false);
+ const [errorMessage, setErrorMessage] = useState('');
+
+ const onSubmit = async event => {
+ event.preventDefault();
+
+ if (!email.match(EMAIL_REGEX)) {
+ setErrorMessage('Please enter a valid email address.');
+ return;
+ } else if (!email) {
+ setErrorMessage('Email address is required.');
+ return;
+ } else {
+ setErrorMessage('');
+ }
+
+ setSubmitting(true);
+
+ const requestOptions = {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ email,
+ }), // Send the data in JSON format
+ };
+
+ // Make the request
+ const res = await fetch(
+ 'https://www.greatfrontend.com/api/projects/challenges/newsletter',
+ requestOptions
+ );
+ const result = await res.json();
+
+ if (result) {
+ setEmail('');
+ if (result.message) {
+ toast.success(result.message);
+ } else if (result.error) {
+ toast.error(result.error);
+ }
+ }
+ setSubmitting(false);
+ };
+
+ return (
+
+ );
+};
+
+export default NewsletterForm;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/Footer/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/Footer/index.js
new file mode 100644
index 000000000..ced11e525
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/Footer/index.js
@@ -0,0 +1,3 @@
+import Footer from './Footer';
+
+export default Footer;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/Navbar/MobileNavMenu.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/Navbar/MobileNavMenu.jsx
new file mode 100644
index 000000000..200822770
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/Navbar/MobileNavMenu.jsx
@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import clsx from 'clsx';
+import { createPortal } from 'react-dom';
+import { RiCloseLine, RiMenuLine } from 'react-icons/ri';
+
+import Link from 'src/components/ui/Link';
+
+const MobileNavMenu = ({ links }) => {
+ const [openMenu, setOpenMenu] = useState(false);
+
+ return (
+ <>
+
+
+ {/* Mobile nav menu */}
+ {openMenu &&
+ createPortal(
+ ,
+ document.body,
+ )}
+
+ );
+};
+
+export default MobileNavMenu;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/Navbar/Navbar.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/Navbar/Navbar.jsx
new file mode 100644
index 000000000..ebba42ffb
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/Navbar/Navbar.jsx
@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+
+import Link from 'src/components/ui/Link';
+import CartButton from 'src/components/CartButton';
+import MobileNavMenu from 'src/components/Navbar/MobileNavMenu';
+
+const links = [
+ {
+ name: 'Shop all',
+ href: '/products',
+ },
+ {
+ name: 'Latest arrivals',
+ href: '/latest',
+ },
+];
+
+const Navbar = ({ className }) => {
+ return (
+
+ {name}
+ {description}
+
+
+
+
+ 
+
+
+
+ );
+};
+
+export default Navbar;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/Navbar/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/Navbar/index.js
new file mode 100644
index 000000000..4b0083cfc
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/Navbar/index.js
@@ -0,0 +1,3 @@
+import Navbar from './Navbar';
+
+export default Navbar;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductCard/ProductCard.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductCard/ProductCard.jsx
new file mode 100644
index 000000000..a8a639962
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductCard/ProductCard.jsx
@@ -0,0 +1,95 @@
+import clsx from 'clsx';
+import { useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Link from 'src/components/ui/Link';
+import ColorSwatches from 'src/components/ui/ColorSwatches';
+
+import { COLORS } from 'src/constants';
+
+import { getUnavailableColors } from 'src/pages/ProductDetail/utils';
+
+const ProductCard = ({ product }) => {
+ const navigate = useNavigate();
+ const { images, name, inventory, colors } = product;
+ const { discount_percentage, sale_price, list_price, color } = inventory[0];
+
+ const hasDiscount = !!discount_percentage;
+
+ const unavailableColors = useMemo(
+ () => getUnavailableColors(product),
+ [product]
+ );
+
+ const redirectUrl = `/products/${product.product_id}`;
+
+ const handleKeyDown = useCallback(
+ event => {
+ if (event.key === 'Enter') {
+ navigate(redirectUrl);
+ }
+ },
+ [navigate, redirectUrl]
+ );
+
+ return (
+
+
+
+
+
+
+ 
+
+ );
+};
+
+export default ProductCard;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductCard/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductCard/index.js
new file mode 100644
index 000000000..038f412b5
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductCard/index.js
@@ -0,0 +1,3 @@
+import ProductCard from './ProductCard';
+
+export default ProductCard;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductGridSection/ProductGridSection.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductGridSection/ProductGridSection.jsx
new file mode 100644
index 000000000..13498dde5
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductGridSection/ProductGridSection.jsx
@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+import ProductCard from 'src/components/ProductCard';
+
+const ProductGridSection = ({ products }) => {
+ return (
+
+
+ {COLORS[color]?.label}
+
+
+
+ {name}
+
+
+
+
+ ${hasDiscount ? sale_price : list_price}
+
+ {hasDiscount && (
+
+ ${list_price}
+
+ )}
+
+
+ {colors.map(color => (
+
+
+ {products.map(product => (
+
+ );
+};
+
+export default ProductGridSection;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductGridSection/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductGridSection/index.js
new file mode 100644
index 000000000..146f1be28
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductGridSection/index.js
@@ -0,0 +1,3 @@
+import ProductGridSection from './ProductGridSection';
+
+export default ProductGridSection;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductSpecificationSection/ProductSpecificationSection.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductSpecificationSection/ProductSpecificationSection.jsx
new file mode 100644
index 000000000..37f7eb480
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ProductSpecificationSection/ProductSpecificationSection.jsx
@@ -0,0 +1,248 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+import {
+ RiColorFilterLine,
+ RiHandHeartLine,
+ RiInfinityFill,
+ RiPaintLine,
+ RiPlantLine,
+ RiPriceTag2Line,
+ RiRainbowLine,
+ RiRecycleLine,
+ RiScales2Line,
+ RiShapesLine,
+ RiShieldStarLine,
+ RiShirtLine,
+ RiStackLine,
+ RiTShirtLine,
+ RiWaterFlashLine,
+ RiWindyLine,
+} from 'react-icons/ri';
+
+import Tabs from '../ui/Tabs';
+
+const TABS = [
+ { label: 'Sustainability', value: 'sustainability' },
+ { label: 'Comfort', value: 'comfort' },
+ { label: 'Durability', value: 'durability' },
+ { label: 'Versatility', value: 'versatility' },
+];
+
+const specifications = [
+ {
+ value: 'sustainability',
+ title: 'Eco-Friendly Choice',
+ description:
+ 'With our sustainable approach, we curate clothing that makes a statement of care—care for the planet, and for the art of fashion.',
+ img: {
+ desktop:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/yellow-desktop.jpg',
+ tablet:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/yellow-tablet.jpg',
+ mobile:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/yellow-mobile.jpg',
+ },
+ items: [
+ {
+ label: 'Recycled Materials',
+ icon: RiRecycleLine,
+ },
+ {
+ label: 'Low Impact Dye',
+ icon: RiPaintLine,
+ },
+ {
+ label: 'Carbon Neutral',
+ icon: RiPlantLine,
+ },
+ {
+ label: 'Water Conservation',
+ icon: RiWaterFlashLine,
+ },
+ ],
+ },
+ {
+ value: 'comfort',
+ title: 'Uncompromised Comfort',
+ description:
+ 'Our garments are a sanctuary of softness, tailored to drape gracefully and allow for freedom of movement.',
+ img: {
+ desktop:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/black-desktop.jpg',
+ tablet:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/black-tablet.jpg',
+ mobile:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/black-mobile.jpg',
+ },
+ items: [
+ {
+ label: 'Ergonomic Fits',
+ icon: RiTShirtLine,
+ },
+ {
+ label: 'Soft-to-the-Touch Fabrics',
+ icon: RiHandHeartLine,
+ },
+ {
+ label: 'Breathable Weaves',
+ icon: RiWindyLine,
+ },
+ {
+ label: 'Thoughtful Design',
+ icon: RiColorFilterLine,
+ },
+ ],
+ },
+ {
+ value: 'durability',
+ title: 'Built to Last',
+ description:
+ 'Here’s to apparel that you can trust to look as good as new, wear after wear, year after year.',
+ img: {
+ desktop:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/chair-desktop.jpg',
+ tablet:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/chair-tablet.jpg',
+ mobile:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/chair-mobile.jpg',
+ },
+ items: [
+ {
+ label: 'Reinforced Construction',
+ icon: RiStackLine,
+ },
+ {
+ label: 'Quality Control',
+ icon: RiScales2Line,
+ },
+ {
+ label: 'Material Resilience',
+ icon: RiShieldStarLine,
+ },
+ {
+ label: 'Warranty and Repair',
+ icon: RiPriceTag2Line,
+ },
+ ],
+ },
+ {
+ value: 'versatility',
+ title: 'Versatile by Design',
+ description:
+ 'Our pieces are a celebration of versatility, offering a range of styles that are as perfect for a business meeting as they are for a casual brunch. ',
+ img: {
+ desktop:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/clothes-desktop.jpg',
+ tablet:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/clothes-tablet.jpg',
+ mobile:
+ 'https://vaqybtnqyonvlwtskzmv.supabase.co/storage/v1/object/public/e-commerce-track-images/product-specifications-section/clothes-mobile.jpg',
+ },
+ items: [
+ {
+ label: 'Adaptive Styles',
+ icon: RiRainbowLine,
+ },
+ {
+ label: 'Functional Fashion',
+ icon: RiShirtLine,
+ },
+ {
+ label: 'Timeless Aesthetics',
+ icon: RiInfinityFill,
+ },
+ {
+ label: 'Mix-and-Match Potential',
+ icon: RiShapesLine,
+ },
+ ],
+ },
+];
+
+const ProductSpecificationSection = () => {
+ const [selectedSpecification, setSelectedSpecification] =
+ useState('sustainability');
+
+ const data = specifications.find(
+ (specification) => specification.value === selectedSpecification,
+ );
+
+ return (
+
+
+ ))}
+
+
+
+ + Discover timeless elegance +
++ Step into a world where quality meets quintessential charm with our + collection. Every thread weaves a promise of unparalleled quality, + ensuring that each garment is not just a part of your wardrobe, but a + piece of art. Here's the essence of what makes our apparel the + hallmark for those with an eye for excellence and a heart for the + environment. +
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+ + {data.title} +
+{data.description}
+
+ {data.items.map(({ label, icon: Icon }) => (
+
+
+
+ ))}
+
+
+ {label}
+
+
+ {children}
+
+
+ );
+};
+
+const AccordionTrigger = ({ children }) => {
+ const { id, isOpen, setIsOpen } = useContext(AccordionItemContext);
+ const Icon = isOpen ? RiIndeterminateCircleLine : RiAddCircleLine;
+ return (
+
+ );
+};
+
+const AccordionContent = ({ children }) => {
+ const contentRef = useRef(null);
+ const { id, isOpen } = useContext(AccordionItemContext);
+
+ return (
+
+ {children}
+
+ );
+};
+
+const Accordion = ({ children }) => {
+ return (
+
+ {children.map((item, index) => (
+
+ );
+};
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Accordion/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Accordion/index.js
new file mode 100644
index 000000000..11a94c76e
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Accordion/index.js
@@ -0,0 +1,4 @@
+import * as Accordion from './Accordion';
+
+export * from './Accordion';
+export default Accordion;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Badge/Badge.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Badge/Badge.jsx
new file mode 100644
index 000000000..97f6f47c9
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Badge/Badge.jsx
@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+
+const sizeClasses = {
+ sm: clsx('h-5', 'py px-[5px]', 'text-xs'),
+ md: clsx('h-6', 'py px-[7px]', 'text-sm'),
+ lg: clsx('h-7', 'py-[3px] px-[9px]', 'text-sm'),
+};
+
+const variantClasses = {
+ neutral: clsx('bg-gray-50', 'border-neutral-200', 'text-neutral-600'),
+ danger: clsx('bg-red-50', 'border-red-200', 'text-red-600'),
+ warning: clsx('bg-amber-50', 'border-amber-200', 'text-amber-700'),
+ success: clsx('bg-green-50', 'border-green-200', 'text-green-700'),
+ brand: clsx('bg-indigo-50', 'border-indigo-200', 'text-indigo-700'),
+};
+
+const Badge = ({ label, size = 'md', variant = 'neutral', className }) => {
+ const commonClasses = clsx('rounded-full text-center border');
+ return (
+
+ {item}
+ {index !== children.length - 1 && (
+
+ )}
+
+ ))}
+
+ {label}
+
+ );
+};
+
+export default Badge;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Badge/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Badge/index.js
new file mode 100644
index 000000000..0979058c5
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Badge/index.js
@@ -0,0 +1,3 @@
+import Badge from './Badge';
+
+export default Badge;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Button/Button.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Button/Button.jsx
new file mode 100644
index 000000000..3d45ef12b
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Button/Button.jsx
@@ -0,0 +1,200 @@
+import clsx from 'clsx';
+
+import Link from '../Link';
+
+const paddingClasses = {
+ md: 'px-3.5 py-2.5',
+ lg: 'px-4 py-2.5',
+ xl: 'px-5 py-3',
+ '2xl': 'px-6 py-4',
+};
+
+// We need this because secondary button has border
+const secondaryVariantPaddingClasses = {
+ md: 'px-[13px] py-[9px]',
+ lg: 'px-[15px] py-[9px]',
+ xl: 'px-[19px] py-[11px]',
+ '2xl': 'px-[23px] py-[15px]',
+};
+
+const fontSizeClasses = {
+ md: 'text-sm',
+ lg: 'text-base',
+ xl: 'text-base',
+ '2xl': 'text-lg',
+};
+
+const spacingClasses = {
+ md: 'gap-x-1.5',
+ lg: 'gap-x-2',
+ xl: 'gap-x-2',
+ '2xl': 'gap-x-3',
+};
+
+const heightClasses = {
+ md: 'h-10',
+ lg: 'h-11',
+ xl: 'h-12',
+ '2xl': 'h-15',
+};
+
+const iconOnlySizeClasses = {
+ md: 'size-10',
+ lg: 'size-11',
+ xl: 'size-12',
+ '2xl': 'size-14',
+};
+
+const iconSizeClasses = {
+ md: 'size-5',
+ lg: 'size-5',
+ xl: 'size-5',
+ '2xl': 'size-6',
+};
+
+const variantClasses = {
+ primary: clsx(
+ 'border-none',
+ 'bg-indigo-700',
+ 'shadow-custom',
+ 'text-white',
+ 'hover:bg-indigo-800 focus:bg-indigo-800'
+ ),
+ secondary: clsx(
+ 'border border-neutral-200',
+ 'bg-white',
+ 'shadow-custom',
+ 'text-neutral-900',
+ 'hover:bg-neutral-50 focus:bg-neutral-50'
+ ),
+ tertiary: clsx(
+ 'border-none',
+ 'text-indigo-700',
+ 'hover:bg-neutral-50 focus:bg-neutral-50'
+ ),
+ danger: clsx(
+ 'border-none',
+ 'bg-red-600',
+ 'text-white',
+ 'hover:bg-red-700 focus:bg-red-700 focus:outline-none focus-visible:ring-4 focus-visible:ring-red-600/[.12]'
+ ),
+ link: clsx(
+ 'text-indigo-700',
+ 'hover:text-indigo-800 focus:text-indigo-800',
+ 'rounded focus:outline-none focus-visible:ring-4 focus-visible:ring-indigo-600/[.12]'
+ ),
+};
+
+const variantDisabledClasses = {
+ primary: clsx(
+ 'disabled:bg-neutral-100',
+ 'disabled:text-neutral-400',
+ 'disabled:shadow-none'
+ ),
+ secondary: clsx(
+ 'disabled:bg-neutral-100',
+ 'disabled:text-neutral-400',
+ 'disabled:shadow-none'
+ ),
+ tertiary: clsx('disabled:bg-none', 'disabled:text-neutral-400'),
+ danger: clsx('disabled:bg-none', 'disabled:text-neutral-400'),
+ link: clsx('disabled:text-neutral-400'),
+};
+
+const Button = ({
+ label,
+ className,
+ isDisabled,
+ startIcon: StartIcon,
+ endIcon: EndIcon,
+ isLabelHidden,
+ size = 'md',
+ variant = 'primary',
+ iconClassName,
+ href,
+ ...props
+}) => {
+ const commonClasses = clsx(
+ 'inline-flex items-center justify-center rounded font-medium outline-none cursor-pointer',
+ 'focus:outline-none focus-visible:ring-4 focus-visible:ring-indigo-600/[.12]',
+ 'transition-colors',
+ 'text-nowrap',
+ variant !== 'link' && heightClasses[size],
+ variant !== 'link' &&
+ (variant === 'secondary'
+ ? secondaryVariantPaddingClasses[size]
+ : paddingClasses[size]),
+ fontSizeClasses[size],
+ spacingClasses[size],
+ isLabelHidden && iconOnlySizeClasses[size],
+ variantClasses[variant],
+ variantDisabledClasses[variant],
+ isDisabled && 'pointer-events-none'
+ );
+
+ if (href) {
+ return (
+
+ {StartIcon && (
+
+ )}
+ {label}
+ {EndIcon && (
+
+ )}
+
+ );
+ }
+
+ const children = isLabelHidden ? (
+ (
+
+ ) || (
+
+ )
+ ) : (
+ <>
+ {StartIcon && (
+
+ )}
+ {label}
+ {EndIcon && (
+
+ )}
+
+ );
+
+ return (
+
+ );
+};
+
+export default Button;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Button/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Button/index.js
new file mode 100644
index 000000000..803f51fbb
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Button/index.js
@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export default Button;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/CheckboxInput/CheckboxInput.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/CheckboxInput/CheckboxInput.jsx
new file mode 100644
index 000000000..f688dea9b
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/CheckboxInput/CheckboxInput.jsx
@@ -0,0 +1,46 @@
+import { useId } from 'react';
+import clsx from 'clsx';
+
+const CheckboxInput = ({ value, defaultValue, disabled, label, onChange }) => {
+ const id = useId();
+
+ return (
+
+
+ );
+};
+
+export default CheckboxInput;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/CheckboxInput/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/CheckboxInput/index.js
new file mode 100644
index 000000000..dd81cd89a
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/CheckboxInput/index.js
@@ -0,0 +1,3 @@
+import CheckboxInput from './CheckboxInput';
+
+export default CheckboxInput;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/ColorSwatches/ColorSwatches.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/ColorSwatches/ColorSwatches.jsx
new file mode 100644
index 000000000..f8a818a5b
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/ColorSwatches/ColorSwatches.jsx
@@ -0,0 +1,105 @@
+import clsx from 'clsx';
+
+const outerSizeClasses = {
+ md: 'size-[56.67px]',
+ sm: 'size-6',
+};
+
+const innerSizeClasses = {
+ md: 'size-[38px]',
+ sm: 'size-4',
+};
+
+const ringSizeClasses = {
+ md: 'focus:ring-[9.33px]',
+ sm: 'focus:ring-4',
+};
+
+const strokeLineClasses = {
+ md: 'h-0.5 w-11',
+ sm: 'h-px w-5',
+};
+
+const ColorSwatches = ({
+ color,
+ selected,
+ onClick,
+ outOfStock,
+ size = 'md',
+ type = 'radio',
+}) => {
+ const readOnly = !onClick || outOfStock;
+
+ return (
+
+ );
+};
+
+export default ColorSwatches;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/ColorSwatches/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/ColorSwatches/index.js
new file mode 100644
index 000000000..bec0d2005
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/ColorSwatches/index.js
@@ -0,0 +1,3 @@
+import ColorSwatches from './ColorSwatches';
+
+export default ColorSwatches;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Dropdown/Dropdown.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Dropdown/Dropdown.jsx
new file mode 100644
index 000000000..f0e76af3c
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Dropdown/Dropdown.jsx
@@ -0,0 +1,100 @@
+import clsx from 'clsx';
+import {
+ createContext,
+ useContext,
+ useEffect,
+ useId,
+ useRef,
+ useState,
+} from 'react';
+import { RiArrowDownSLine } from 'react-icons/ri';
+
+import Button from '../Button';
+
+const DropdownContext = createContext();
+
+const DropdownItem = ({ children, isSelected, onSelect }) => {
+ const { setIsOpen, isOpen } = useContext(DropdownContext);
+ const handleOptionClick = () => {
+ setIsOpen(false);
+ if (onSelect) {
+ onSelect();
+ }
+ };
+
+ return (
+
+ );
+};
+
+const Dropdown = ({ children }) => {
+ const id = useId();
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef(null);
+
+ useEffect(() => {
+ const handleClickOutside = event => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+ setIsOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, []);
+
+ return (
+
+ {
+ if (!onChange) {
+ return;
+ }
+
+ onChange(event.target.checked, event);
+ }}
+ />
+
+
+
+
+ );
+};
+
+export { Dropdown, DropdownItem };
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Dropdown/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Dropdown/index.js
new file mode 100644
index 000000000..01bb1915a
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Dropdown/index.js
@@ -0,0 +1,4 @@
+import * as Dropdown from './Dropdown';
+
+export * from './Dropdown';
+export default Dropdown;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Link/Link.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Link/Link.jsx
new file mode 100644
index 000000000..3b3e3ef81
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Link/Link.jsx
@@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import { NavLink, Link as RouterLink } from 'react-router-dom';
+
+const linkVariantClasses = {
+ primary: clsx(
+ 'text-indigo-700',
+ 'hover:text-indigo-800 focus:text-indigo-800',
+ 'rounded focus:outline-none focus-visible:ring-4 focus-visible:ring-indigo-600/[.12]',
+ 'px-0.5'
+ ),
+ gray: clsx(
+ 'text-neutral-600',
+ 'hover:text-neutral-900 focus:text-neutral-900',
+ 'rounded focus:outline-none focus-visible:ring-4 focus-visible:ring-indigo-600/[.12]',
+ 'px-0.5'
+ ),
+ unstyled: '',
+};
+
+const activeLinkClasses = {
+ primary: 'text-indigo-800',
+ gray: 'text-neutral-900',
+ unstyled: '',
+};
+
+const Link = ({
+ children,
+ disabled,
+ className,
+ type = 'default',
+ variant = 'primary',
+ ...props
+}) => {
+ const commonClassName = clsx(
+ 'font-medium rounded',
+ linkVariantClasses[variant],
+ {
+ 'pointer-events-none text-neutral-400': disabled,
+ },
+ className
+ );
+
+ if (type === 'nav') {
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+ {Array.from({ length: max }).map((_, index) => (
+ !readOnlyMode && setHoveredIndex(index)}
+ onMouseLeave={() => !readOnlyMode && setHoveredIndex(null)}
+ className={clsx(
+ !readOnlyMode && 'cursor-pointer',
+ selected ? 'text-yellow-500' : 'text-yellow-400'
+ )}
+ onClick={() => onChange?.(index + 1)}>
+ = index + 1
+ }
+ halfFilled={value < index + 1 && value > index}
+ className={clsx(showHover && 'group-hover:stroke-indigo-200')}
+ />
+
+ ))}
+
+ );
+};
+
+export default Rating;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Rating/Star.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Rating/Star.jsx
new file mode 100644
index 000000000..062180473
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Rating/Star.jsx
@@ -0,0 +1,58 @@
+import clsx from 'clsx';
+
+const Star = ({ filled, halfFilled, className }) => {
+ return filled ? (
+
+ ) : halfFilled ? (
+
+ ) : (
+
+ );
+};
+
+export default Star;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Rating/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Rating/index.js
new file mode 100644
index 000000000..bcff0ae38
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Rating/index.js
@@ -0,0 +1,3 @@
+import StarRating from './Rating';
+
+export default StarRating;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/SlideOut/SlideOut.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/SlideOut/SlideOut.jsx
new file mode 100644
index 000000000..a5910562f
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/SlideOut/SlideOut.jsx
@@ -0,0 +1,80 @@
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import { RiCloseLine } from 'react-icons/ri';
+import { useEffect } from 'react';
+
+const SlideOut = ({
+ children,
+ isShown,
+ trigger,
+ title,
+ onClose,
+ className,
+}) => {
+ useEffect(() => {
+ if (isShown) {
+ document.body.style.overflow = 'hidden';
+ } else {
+ document.body.style.overflow = 'auto';
+ }
+ return () => {
+ document.body.style.overflow = 'auto';
+ };
+ }, [isShown]);
+
+ return (
+ <>
+ {trigger}
+
+ {isShown &&
+ createPortal(
+
+
,
+ document.body
+ )}
+
+ );
+};
+
+export default SlideOut;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/SlideOut/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/SlideOut/index.js
new file mode 100644
index 000000000..d0ad0954d
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/SlideOut/index.js
@@ -0,0 +1,3 @@
+import SlideOut from './SlideOut';
+
+export default SlideOut;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tabs/Tabs.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tabs/Tabs.jsx
new file mode 100644
index 000000000..420c81c9f
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tabs/Tabs.jsx
@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+
+const Tabs = ({ label, tabs, value, onSelect }) => {
+ return (
+
+
+
+
+
+ {title}
+
+
+
+ {children}
+
+
+ );
+};
+
+export default Tabs;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tabs/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tabs/index.js
new file mode 100644
index 000000000..4b674c987
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tabs/index.js
@@ -0,0 +1,3 @@
+import Tabs from './Tabs';
+
+export default Tabs;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/TextInput/TextInput.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/TextInput/TextInput.jsx
new file mode 100644
index 000000000..200622e9c
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/TextInput/TextInput.jsx
@@ -0,0 +1,98 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+
+const TextInput = ({
+ label,
+ placeholder,
+ value,
+ onChange,
+ type,
+ id: idParam,
+ required,
+ isDisabled,
+ errorMessage,
+ hintMessage,
+ startIcon: StartIcon,
+ endIcon: EndIcon,
+ startIconClassName,
+ endIconClassName,
+}) => {
+ const generateId = useId();
+ const id = idParam ?? generateId;
+ const hasError = !!errorMessage;
+
+ const messageId = useId();
+
+ const hasBottomSection = !!errorMessage || !!hintMessage;
+
+ return (
+
+
+
+
+ {label && (
+
+ )}
+
+ );
+};
+
+export default TextInput;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/TextInput/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/TextInput/index.js
new file mode 100644
index 000000000..a93ada305
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/TextInput/index.js
@@ -0,0 +1,3 @@
+import TextInput from './TextInput';
+
+export default TextInput;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Toast/Toast.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Toast/Toast.jsx
new file mode 100644
index 000000000..dfc11c684
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Toast/Toast.jsx
@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+import React from 'react';
+
+const Toast = ({ type, message }) => {
+ const badge = (
+
+ {StartIcon && (
+
+
+ {hasBottomSection && (
+
+
+
+ )}
+
+ onChange(event.target.value, event)}
+ required={required}
+ disabled={isDisabled}
+ className={clsx(
+ 'block w-full',
+ 'py-[9px] px-[13px]',
+ 'outline:none',
+ 'border border-neutral-200 disabled:border-neutral-100',
+ 'bg-neutral-50',
+ 'rounded',
+ 'text-sm text-neutral-900 placeholder:text-neutral-500 disabled:text-neutral-400 disabled:placeholder:text-neutral-400',
+ 'focus:outline-none',
+ 'focus:ring-4 focus:ring-offset-0 focus:ring-indigo-600/[.12] focus:border-indigo-600',
+ hasError && 'focus:ring-red-600/[.12] focus:border-red-600',
+ 'disabled:pointer-events-none',
+ StartIcon && 'pl-[41px]',
+ EndIcon && 'pr-[38px]'
+ )}
+ />
+
+ {EndIcon && (
+
+
+
+ )}
+
+ {errorMessage || hintMessage}
+
+ )}
+
+ {type === 'error' ? 'Error' : 'Success'}
+
+ );
+
+ return (
+
+
+ );
+};
+
+export default Toast;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Toast/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Toast/index.js
new file mode 100644
index 000000000..258888627
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Toast/index.js
@@ -0,0 +1,3 @@
+import Toast from './Toast';
+
+export default Toast;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tooltip/Tooltip.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tooltip/Tooltip.jsx
new file mode 100644
index 000000000..7357f76ba
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tooltip/Tooltip.jsx
@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+
+const Tooltip = ({ children, content, position = 'top', show = true }) => {
+ const [visible, setVisible] = useState(false);
+
+ const positions = {
+ top: 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
+ bottom: 'top-full left-1/2 transform -translate-x-1/2 mt-2',
+ left: 'right-full top-1/2 transform -translate-y-1/2 mr-2',
+ right: 'left-full top-1/2 transform -translate-y-1/2 ml-2',
+ };
+
+ const arrowPositions = {
+ top: 'bottom-[-4px] left-1/2 transform -translate-x-1/2 border-t-neutral-950 border-t-8 border-x-8 border-x-transparent',
+ bottom:
+ 'top-[-4px] left-1/2 transform -translate-x-1/2 border-b-neutral-950 border-b-8 border-x-8 border-x-transparent',
+ left: 'right-[-4px] top-1/2 transform -translate-y-1/2 border-l-neutral-950 border-l-8 border-y-8 border-y-transparent',
+ right:
+ 'left-[-4px] top-1/2 transform -translate-y-1/2 border-r-neutral-950 border-r-8 border-y-8 border-y-transparent',
+ };
+
+ return (
+
+ {badge}
+ {message}
+
+ show && setVisible(true)}
+ onMouseLeave={() => show && setVisible(false)}>
+ {children}
+ {visible && (
+
+ );
+};
+
+export default Tooltip;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tooltip/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tooltip/index.js
new file mode 100644
index 000000000..d8851cb0a
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/components/ui/Tooltip/index.js
@@ -0,0 +1,3 @@
+import Tooltip from './Tooltip';
+
+export default Tooltip;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/constants.js b/packages/projects/challenges/storefront-page/solutions/react/src/constants.js
new file mode 100644
index 000000000..b155f468e
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/constants.js
@@ -0,0 +1,163 @@
+export const COLORS = {
+ white: { value: '#fff', label: 'White' },
+ black: { value: '#000', label: 'Black' },
+ red: { value: '#DC2626', label: 'Red' },
+ orange: { value: '#EA580C', label: 'Orange' },
+ yellow: { value: '#F59E0B', label: 'Yellow' },
+ green: { value: '#10B981', label: 'Green' },
+ blue: { value: '#4F46E5', label: 'Blue' },
+ brown: { value: '#CA8A04', label: 'Brown' },
+ beige: { value: '#d2b08a', label: 'Beige' },
+ pink: { value: '#EC4899', label: 'Pink' },
+};
+
+export const COLLECTIONS_OPTIONS = {
+ title: 'Collections',
+ key: 'collection',
+ items: [
+ {
+ name: 'Latest arrivals',
+ value: 'latest',
+ href: '/products?collectionId=latest',
+ },
+ {
+ name: 'Urban Oasis',
+ value: 'urban',
+ href: '/products?collectionId=urban',
+ },
+ {
+ name: 'Cozy Comfort',
+ value: 'cozy',
+ href: '/products?collectionId=cozy',
+ },
+ {
+ name: 'Fresh Fusion',
+ value: 'fresh',
+ href: '/products?collectionId=fresh',
+ },
+ ],
+};
+
+export const CATEGORY_OPTIONS = {
+ title: 'Category',
+ key: 'category',
+ items: [
+ {
+ name: 'Unisex',
+ value: 'unisex',
+ href: '/products?categoryId=unisex',
+ },
+ {
+ name: 'Women',
+ value: 'women',
+ href: '/products?categoryId=women',
+ },
+ {
+ name: 'Men',
+ value: 'men',
+ href: '/products?categoryId=men',
+ },
+ ],
+};
+
+export const COLORS_OPTIONS = {
+ title: 'Colors',
+ key: 'color',
+ items: [
+ {
+ color: COLORS.white.value,
+ value: 'white',
+ },
+ {
+ color: COLORS.black.value,
+ value: 'black',
+ },
+ {
+ color: COLORS.red.value,
+ value: 'red',
+ },
+ {
+ color: COLORS.orange.value,
+ value: 'orange',
+ },
+ {
+ color: COLORS.yellow.value,
+ value: 'yellow',
+ },
+ {
+ color: COLORS.green.value,
+ value: 'green',
+ },
+ {
+ color: COLORS.blue.value,
+ value: 'blue',
+ },
+ {
+ color: COLORS.brown.value,
+ value: 'brown',
+ },
+ {
+ color: COLORS.beige.value,
+ value: 'beige',
+ },
+ {
+ color: COLORS.pink.value,
+ value: 'pink',
+ },
+ ],
+};
+
+export const RATING_OPTIONS = {
+ title: 'Rating',
+ key: 'rating',
+ items: [
+ {
+ value: 5,
+ name: '5 star rating',
+ },
+ {
+ value: 4,
+ name: '4 star rating',
+ },
+ {
+ value: 3,
+ name: '3 star rating',
+ },
+ {
+ value: 2,
+ name: '2 star rating',
+ },
+ {
+ value: 1,
+ name: '1 star rating',
+ },
+ ],
+};
+
+export const SORT_OPTIONS = [
+ {
+ name: 'Newest',
+ value: 'created',
+ direction: 'desc',
+ },
+ {
+ name: 'Best rating',
+ value: 'rating',
+ direction: 'desc',
+ },
+ {
+ name: 'Most popular',
+ value: 'popularity',
+ direction: 'desc',
+ },
+ {
+ name: 'Price: Low to high',
+ value: 'price',
+ direction: 'asc',
+ },
+ {
+ name: 'Price: High to low',
+ value: 'price',
+ direction: 'desc',
+ },
+];
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/context/CartContext.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/context/CartContext.jsx
new file mode 100644
index 000000000..8fdd8f70f
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/context/CartContext.jsx
@@ -0,0 +1,71 @@
+import {
+ createContext,
+ useState,
+ useEffect,
+ useContext,
+ useMemo,
+ useCallback,
+} from 'react';
+
+const CartContext = createContext();
+
+export const useCartContext = () => useContext(CartContext);
+
+const CartContextProvider = ({ children }) => {
+ const [cartItems, setCartItems] = useState([]);
+
+ useEffect(() => {
+ // Retrieve cart from localStorage
+ const storedCart = JSON.parse(localStorage.getItem('cart')) || [];
+ setCartItems(storedCart);
+ }, []);
+
+ const addToCart = useCallback(
+ item => {
+ const existingItem = cartItems.find(
+ cartItem =>
+ cartItem.id === item.id &&
+ cartItem.color === item.color &&
+ cartItem.size === item.size
+ );
+
+ let updatedCart;
+ if (existingItem) {
+ updatedCart = cartItems.map(cartItem =>
+ cartItem.id === item.id &&
+ cartItem.color === item.color &&
+ cartItem.size === item.size
+ ? { ...cartItem, quantity: item.quantity }
+ : cartItem
+ );
+ } else {
+ updatedCart = [...cartItems, item];
+ }
+
+ setCartItems(updatedCart);
+ localStorage.setItem('cart', JSON.stringify(updatedCart));
+ },
+ [cartItems]
+ );
+
+ const removeFromCart = useCallback(
+ (itemId, color, size) => {
+ const updatedCart = cartItems.filter(
+ item =>
+ !(item.id === itemId && item.color === color && item.size === size)
+ );
+ setCartItems(updatedCart);
+ localStorage.setItem('cart', JSON.stringify(updatedCart));
+ },
+ [cartItems]
+ );
+
+ const value = useMemo(
+ () => ({ cartItems, addToCart, removeFromCart }),
+ [cartItems, addToCart, removeFromCart]
+ );
+
+ return
+ {content}
+
+
+ )}
+
+
+ {isProductsLoading ? (
+
+ Latest Arrivals
+
+
+
+ Loading...
+
+ ) : (
+ -
+ {item.description.map(descItem => (
+
- {descItem} + ))} +
Loading...
+ ) : (
+
+ Loading...
+
+ ) : (
+ <>
+
+
+
+
+
+ )}
+
+ 
+
+ );
+};
+
+export default ProductImages;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/components/ProductMetadata.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/components/ProductMetadata.jsx
new file mode 100644
index 000000000..8a856c846
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/components/ProductMetadata.jsx
@@ -0,0 +1,131 @@
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useMediaQuery } from 'usehooks-ts';
+
+import Badge from 'src/components/ui/Badge';
+import Button from 'src/components/ui/Button';
+import Rating from 'src/components/ui/Rating';
+import AvailableColors from './AvailableColors';
+import AvailableSizes from './AvailableSizes';
+import ProductQuantity from './ProductQuantity';
+import InfoSection from './InfoSection';
+
+import { useProductDetailsContext } from './ProductDetailsContext';
+import { useCartContext } from 'src/context/CartContext';
+import { getInventoryData } from '../utils';
+
+const ProductMetadata = () => {
+ const isMobileAndBelow = useMediaQuery('(max-width: 767px)');
+ const { product, selectedColor, selectedSize, itemQuantity } =
+ useProductDetailsContext();
+ const { addToCart } = useCartContext();
+
+ const { name, description, reviews, rating } = product;
+
+ const inventoryData = useMemo(
+ () =>
+ getInventoryData({ product, color: selectedColor, size: selectedSize }),
+ [selectedColor, selectedSize, product]
+ );
+ const { discount_percentage, list_price, sale_price, stock } = inventoryData;
+
+ const roundedRating = Math.round(rating * 10) / 10;
+ const hasDiscount = !!discount_percentage;
+
+ const onAddToCart = e => {
+ e.preventDefault();
+
+ const item = {
+ id: product.product_id,
+ quantity: itemQuantity,
+ color: selectedColor,
+ size: selectedSize,
+ };
+ addToCart(item);
+ };
+
+ return (
+
+ {images.map((image, index) => (
+ 
setSelectedPreview(index)}
+ className={clsx(
+ 'rounded-lg shrink-0 block',
+ 'w-20 h-[120px] md:h-[190px] md:w-[188px] lg:w-40 object-cover',
+ 'cursor-pointer',
+ index === selectedPreview && 'border-[3px] border-indigo-600'
+ )}
+ />
+ ))}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ProductMetadata;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/components/ProductQuantity.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/components/ProductQuantity.jsx
new file mode 100644
index 000000000..3ae613d7a
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/components/ProductQuantity.jsx
@@ -0,0 +1,23 @@
+import CartControl from 'src/components/CartControl';
+import { useProductDetailsContext } from './ProductDetailsContext';
+
+const ProductQuantity = ({ availableStock }) => {
+ const { itemQuantity, incrementQuantity, decrementQuantity } =
+ useProductDetailsContext();
+
+ return (
+
+ );
+};
+
+export default ProductQuantity;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/index.js
new file mode 100644
index 000000000..c229e84f2
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/index.js
@@ -0,0 +1,3 @@
+import ProductDetailPage from './ProductDetailPage';
+
+export default ProductDetailPage;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/utils.js b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/utils.js
new file mode 100644
index 000000000..d97f09086
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductDetail/utils.js
@@ -0,0 +1,49 @@
+export const getUnavailableColors = product => {
+ const colorsInStock = new Set();
+ const allColors = new Set(product.colors);
+
+ product.inventory.forEach(item => {
+ if (item.stock > 0) {
+ colorsInStock.add(item.color);
+ }
+ });
+
+ const unavailableColors = [...allColors].filter(
+ color => !colorsInStock.has(color)
+ );
+
+ return unavailableColors;
+};
+
+export const getUnavailableSizes = ({ product, color }) => {
+ const sizesInStock = new Set();
+ const allSizes = new Set(product.sizes);
+
+ product.inventory.forEach(item => {
+ if (item.stock > 0 && item.color === color) {
+ sizesInStock.add(item.size);
+ }
+ });
+
+ const unavailableSizes = [...allSizes].filter(
+ size => !sizesInStock.has(size)
+ );
+
+ return unavailableSizes;
+};
+
+export const getInventoryData = ({ product, color, size }) => {
+ let data = {};
+ product.inventory.forEach(item => {
+ if (item.size === size && item.color === color) {
+ data = item;
+ }
+ });
+
+ return data;
+};
+
+export const getSelectedColorImages = ({ product, color }) => {
+ const images = product.images?.filter(image => image.color === color);
+ return images;
+};
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/ProductListingPage.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/ProductListingPage.jsx
new file mode 100644
index 000000000..d3c226364
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/ProductListingPage.jsx
@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+
+import Filter from './components/Filter';
+import ProductListingContextProvider from './components/ProductListingContext';
+import ProductListingSection from './components/ProductListingSection';
+import SortByFilter from './components/SortByFilter';
+
+const ProductListingPage = () => {
+ return (
+
+
+
+ {name}
+
+
+ {hasDiscount && (
+
+
+ ${hasDiscount ? sale_price : list_price}
+
+ {hasDiscount && (
+
+ ${list_price}
+
+ )}
+
+
+
+ )}
+
+
+
+ {roundedRating ?? 0}
+
+
+ No reviews yet.
+
+
+
+ )}
+ {description}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+ );
+};
+
+const AccordionTrigger = ({ children }) => {
+ const { id, isOpen, setIsOpen } = useContext(AccordionItemContext);
+ const Icon = isOpen ? RiSubtractLine : RiAddLine;
+ return (
+
+ );
+};
+
+const AccordionContent = ({ children }) => {
+ const contentRef = useRef(null);
+ const { id, isOpen } = useContext(AccordionItemContext);
+
+ return (
+
+
+ );
+};
+
+const Accordion = ({ children }) => {
+ const hasMultipleItem = Array.isArray(children);
+ return (
+ {children}
+
+ {!hasMultipleItem
+ ? children
+ : children.map((item, index) => (
+
+ );
+};
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/Accordion/index.js b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/Accordion/index.js
new file mode 100644
index 000000000..11a94c76e
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/Accordion/index.js
@@ -0,0 +1,4 @@
+import * as Accordion from './Accordion';
+
+export * from './Accordion';
+export default Accordion;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/Filter.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/Filter.jsx
new file mode 100644
index 000000000..6060d419f
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/Filter.jsx
@@ -0,0 +1,151 @@
+import clsx from 'clsx';
+import { RiFilterLine } from 'react-icons/ri';
+import { useState } from 'react';
+
+import CheckboxInput from 'src/components/ui/CheckboxInput';
+import ColorSwatches from 'src/components/ui/ColorSwatches';
+import SlideOut from 'src/components/ui/SlideOut';
+import Button from 'src/components/ui/Button';
+import Rating from 'src/components/ui/Rating/Rating';
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from 'src/pages/ProductListing/components/Accordion';
+
+import { useProductListingContext } from './ProductListingContext';
+import {
+ CATEGORY_OPTIONS,
+ COLLECTIONS_OPTIONS,
+ COLORS_OPTIONS,
+ RATING_OPTIONS,
+} from 'src/constants';
+
+const Filter = () => {
+ const {
+ selectedCategory,
+ selectedCollections,
+ selectedColors,
+ selectedRating,
+ filterCount,
+ onSelect,
+ resetFilters,
+ } = useProductListingContext();
+ const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+ const filterItems = (
+
+ {item}
+
+
+ ))}
+
+
+
+ {COLLECTIONS_OPTIONS.title}
+
+
+
+
+
+ {CATEGORY_OPTIONS.title}
+
+
+
+
+
+ {COLORS_OPTIONS.title}
+
+
+
+
+
+ {RATING_OPTIONS.title}
+
+
+
+
+ {filterCount > 0 && (
+
+ );
+
+ return (
+
+ {COLLECTIONS_OPTIONS.items.map(({ name, value }) => (
+ onSelect(COLLECTIONS_OPTIONS.key, value)}
+ />
+ ))}
+
+
+ {CATEGORY_OPTIONS.items.map(({ name, value }) => (
+ onSelect(CATEGORY_OPTIONS.key, value)}
+ />
+ ))}
+
+
+ {COLORS_OPTIONS.items.map(({ color, value }) => (
+ onSelect(COLORS_OPTIONS.key, value)}
+ size="sm"
+ />
+ ))}
+
+
+ {RATING_OPTIONS.items.map(({ value }) => (
+
+ ))}
+
+
+
+ );
+};
+
+export default Filter;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/ProductListingContext.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/ProductListingContext.jsx
new file mode 100644
index 000000000..e529bc93d
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/ProductListingContext.jsx
@@ -0,0 +1,138 @@
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import useProductFilters from './hooks/useProductFilters';
+import {
+ CATEGORY_OPTIONS,
+ COLLECTIONS_OPTIONS,
+ COLORS_OPTIONS,
+ RATING_OPTIONS,
+} from 'src/constants';
+
+const ProductListingContext = createContext();
+
+export const useProductListingContext = () => useContext(ProductListingContext);
+
+const ProductListingContextProvider = ({ children }) => {
+ const [products, setProducts] = useState(null);
+ const [isProductsLoading, setIsProductsLoading] = useState(true);
+ const {
+ selectedCollections,
+ selectedCategory,
+ selectedColors,
+ selectedRating,
+ selectedSort,
+ filterCount,
+ onSelect,
+ resetFilters,
+ onSortChange,
+ } = useProductFilters();
+
+ const getProducts = useCallback(
+ async ({ colors, collections, ratings, categories, sort }) => {
+ setIsProductsLoading(true);
+
+ let queryString = '';
+ if (
+ colors.size > 0 ||
+ collections.size > 0 ||
+ ratings.size > 0 ||
+ categories.size > 0
+ ) {
+ queryString = [
+ ...Array.from(colors).map(
+ color => `${COLORS_OPTIONS.key}=${encodeURIComponent(color)}`
+ ),
+ ...Array.from(collections).map(
+ collection =>
+ `${COLLECTIONS_OPTIONS.key}=${encodeURIComponent(collection)}`
+ ),
+ ...Array.from(ratings).map(
+ rating => `${RATING_OPTIONS.key}=${encodeURIComponent(rating)}`
+ ),
+ ...Array.from(categories).map(
+ category =>
+ `${CATEGORY_OPTIONS.key}=${encodeURIComponent(category)}`
+ ),
+ ].join('&');
+ }
+
+ queryString = `${queryString ? `${queryString}&` : ''}sort=${
+ sort.value
+ }&direction=${sort.direction}`;
+
+ const data = await fetch(
+ `https://www.greatfrontend.com/api/projects/challenges/e-commerce/products${
+ queryString ? `?${queryString}` : ''
+ }`
+ );
+ const result = await data.json();
+
+ if (!result.error) {
+ setProducts(result.data);
+ }
+ setIsProductsLoading(false);
+ },
+ []
+ );
+
+ useEffect(() => {
+ getProducts({
+ colors: selectedColors,
+ categories: selectedCategory,
+ collections: selectedCollections,
+ ratings: selectedRating,
+ sort: selectedSort,
+ });
+ }, [
+ getProducts,
+ selectedColors,
+ selectedCategory,
+ selectedCollections,
+ selectedRating,
+ selectedSort,
+ ]);
+
+ const value = useMemo(() => {
+ return {
+ products,
+ isProductsLoading,
+
+ selectedCollections,
+ selectedCategory,
+ selectedColors,
+ selectedRating,
+ selectedSort,
+ filterCount,
+ onSelect,
+ resetFilters,
+ onSortChange,
+ };
+ }, [
+ products,
+ isProductsLoading,
+
+ selectedCollections,
+ selectedCategory,
+ selectedColors,
+ selectedRating,
+ selectedSort,
+ filterCount,
+ onSelect,
+ resetFilters,
+ onSortChange,
+ ]);
+
+ return (
+ {filterItems}
+
+ Filter}
+ onClose={() => setIsFilterOpen(false)}
+ trigger={
+
+
+
+ Loading...
+
+ );
+ }
+
+ if (filterCount > 0 && products.length === 0) {
+ return (
+
+
+ );
+ }
+
+ return products.map(product => (
+
+
+
+ Nothing found just yet
+
+ Adjust your filters a bit, and let's see what we can find!
+
+
+
+
+
+ ));
+};
+
+export default ProductListingSection;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/SortByFilter.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/SortByFilter.jsx
new file mode 100644
index 000000000..414d6fb19
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/pages/ProductListing/components/SortByFilter.jsx
@@ -0,0 +1,27 @@
+import { Dropdown, DropdownItem } from 'src/components/ui/Dropdown';
+
+import { useProductListingContext } from './ProductListingContext';
+import { SORT_OPTIONS } from 'src/constants';
+
+const SortByFilter = () => {
+ const { onSortChange, selectedSort } = useProductListingContext();
+ return (
+
+
+ );
+};
+
+export default StorefrontPage;
diff --git a/packages/projects/challenges/storefront-page/solutions/react/src/pages/Storefront/components/CollectionsGridSection.jsx b/packages/projects/challenges/storefront-page/solutions/react/src/pages/Storefront/components/CollectionsGridSection.jsx
new file mode 100644
index 000000000..bd867758b
--- /dev/null
+++ b/packages/projects/challenges/storefront-page/solutions/react/src/pages/Storefront/components/CollectionsGridSection.jsx
@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+
+import CollectionCard from 'src/components/CollectionCard';
+
+const CollectionsGridSection = () => {
+ const [collections, setCollections] = useState([]);
+ const [isFetching, setIsFetching] = useState(true);
+
+ const getLatestArrivalProducts = async () => {
+ setIsFetching(true);
+
+ const data = await fetch(
+ `https://www.greatfrontend.com/api/projects/challenges/e-commerce/collections`
+ );
+ const result = await data.json();
+
+ if (!result.error) {
+ setCollections(result.data);
+ }
+ setIsFetching(false);
+ };
+
+ useEffect(() => {
+ getLatestArrivalProducts();
+ }, []);
+
+ return (
+ Our Collections
+ {isFetching ? (
+ Loading...
+ ) : (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ Elevate Your Experience
+
+
+ + Our Commitment to Exceptional Service +
++ We pride ourselves on a foundation of exceptional customer service, + where every interaction is a testament to our dedication to + excellence. +
+-
+ {FEATURES.map(({ title, description, icon: Icon }) => (
+
-
+
+ + + {title} + + + {description} + ++
+ ))}
+
+
+
+
+ Summer styles are finally here
+
+
+ This year, our new summer collection will be your haven from the
+ world's harsh elements.
+
+
+
+
+
+ 
+