[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import type { Metadata } from "next" import Hero from "@/components/organisms/Hero" import FeaturedProducts from "@/components/organisms/FeaturedProducts" import CategoryShowcase from "@/components/organisms/CategoryShowcase" import PromoSection from "@/components/organisms/PromoSection" import Newsletter from "@/components/molecules/Newsletter" export const metadata: Metadata = { title: "Home - Furniture Store", description: "Shop our collection of high-quality beds and furniture with free delivery across Belarus", } export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/products/page.tsx" isMerged="true" import type { Metadata } from "next" import ProductCatalog from "@/components/organisms/ProductCatalog" import { getProducts } from "@/lib/api" export const metadata: Metadata = { title: "Products - Furniture Store", description: "Browse our collection of high-quality beds and furniture", } export default async function ProductsPage() { const products = await getProducts() return (

Our Products

) } [V0_FILE]typescriptreact:file="app/cart/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type { Metadata } from "next" import CartPageClient from "./CartPageClient" export const metadata: Metadata = { title: "Shopping Cart - Furniture Store", description: "View and manage your shopping cart", } export default function CartPage() { return } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { useCart } from "@/context/CartContext" import CheckoutSteps from "@/components/organisms/CheckoutSteps" import CheckoutSummary from "@/components/molecules/CheckoutSummary" import EmptyState from "@/components/molecules/EmptyState" import Button from "@/components/atoms/Button" export default function CheckoutPage() { const { isEmpty } = useCart() const router = useRouter() const [currentStep, setCurrentStep] = useState(0) if (isEmpty) { return (

router.push("/products")}>Browse Products} />

) } return (

Checkout

) } [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { useAuth } from "@/context/AuthContext" import LoginForm from "@/components/organisms/LoginForm" export default function LoginPage() { const [error, setError] = useState("") const { login } = useAuth() const router = useRouter() const handleLogin = async (email: string, password: string) => { try { await login(email, password) router.push("/") } catch (err) { setError("Invalid email or password") } } return (

Login

{error &&

{error}

}

Don't have an account?{" "} Register

Forgot your password?

) } [V0_FILE]typescriptreact:file="app/auth/register/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { useAuth } from "@/context/AuthContext" import RegisterForm from "@/components/organisms/RegisterForm" export default function RegisterPage() { const [error, setError] = useState("") const { register } = useAuth() const router = useRouter() const handleRegister = async (name: string, email: string, password: string) => { try { await register(name, email, password) router.push("/") } catch (err) { setError("Registration failed. Please try again.") } } return (

Create an Account

{error &&

{error}

}

Already have an account?{" "} Login

) } [V0_FILE]typescriptreact:file="app/admin/products/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/context/AuthContext" import AdminProductList from "@/components/organisms/AdminProductList" import Button from "@/components/atoms/Button" import { getProducts } from "@/lib/api" import type { Product } from "@/types" export default function AdminProductsPage() { const [products, setProducts] = useState([]) const [loading, setLoading] = useState(true) const { user, isAdmin } = useAuth() const router = useRouter() useEffect(() => { if (!user || !isAdmin) { router.push("/auth/login") return } const loadProducts = async () => { try { const data = await getProducts() setProducts(data) } catch (error) { console.error("Failed to load products:", error) } finally { setLoading(false) } } loadProducts() }, [user, isAdmin, router]) if (loading) { return

} return (

Manage Products

{ // Handle product deletion setProducts(products.filter((p) => p.id !== id)) }} />

) } [V0_FILE]typescriptreact:file="components/atoms/Button/index.tsx" isMerged="true" import type React from "react" import type { ButtonHTMLAttributes } from "react" import styles from "./Button.module.css" type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger" type ButtonSize = "sm" | "md" | "lg" interface ButtonProps extends ButtonHTMLAttributes { variant?: ButtonVariant size?: ButtonSize fullWidth?: boolean isLoading?: boolean leftIcon?: React.ReactNode rightIcon?: React.ReactNode children: React.ReactNode } const Button: React.FC = ({ variant = "primary", size = "md", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, className = "", disabled, ...props }) => { const baseClass = styles.button const variantClass = styles[`button-${variant}`] const sizeClass = styles[`button-${size}`] const widthClass = fullWidth ? styles.fullWidth : "" const loadingClass = isLoading ? styles.loading : "" const disabledClass = disabled ? styles.disabled : "" const combinedClassName = `${baseClass} ${variantClass} ${sizeClass} ${widthClass} ${loadingClass} ${disabledClass} ${className}` return ( ) } export default Button [V0_FILE]css:file="components/atoms/Button/Button.module.css" isMerged="true" .button { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; font-weight: 500; transition: all 0.2s; cursor: pointer; position: relative; overflow: hidden; } .button-primary { background-color: #333; color: white; border: 1px solid #333; } .button-primary:hover:not(.disabled) { background-color: #555; } .button-secondary { background-color: #e5e5e5; color: #333; border: 1px solid #e5e5e5; } .button-secondary:hover:not(.disabled) { background-color: #d5d5d5; } .button-outline { background-color: transparent; color: #333; border: 1px solid #333; } .button-outline:hover:not(.disabled) { background-color: rgba(0, 0, 0, 0.05); } .button-ghost { background-color: transparent; color: #333; border: 1px solid transparent; } .button-ghost:hover:not(.disabled) { background-color: rgba(0, 0, 0, 0.05); } .button-danger { background-color: #e53e3e; color: white; border: 1px solid #e53e3e; } .button-danger:hover:not(.disabled) { background-color: #c53030; } .button-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.875rem; } .button-md { height: 2.5rem; padding: 0 1rem; font-size: 1rem; } .button-lg { height: 3rem; padding: 0 1.5rem; font-size: 1.125rem; } .fullWidth { width: 100%; } .disabled, .loading { opacity: 0.7; cursor: not-allowed; } .spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; margin-right: 0.5rem; } .leftIcon { margin-right: 0.5rem; display: flex; align-items: center; } .rightIcon { margin-left: 0.5rem; display: flex; align-items: center; } @keyframes spin { to { transform: rotate(360deg); } } [V0_FILE]typescriptreact:file="components/atoms/Select/index.tsx" isMerged="true" import { type SelectHTMLAttributes, forwardRef } from "react" import styles from "./Select.module.css" interface SelectProps extends SelectHTMLAttributes { error?: string label?: string fullWidth?: boolean } const Select = forwardRef( ({ error, label, fullWidth = false, className = "", children, ...props }, ref) => { const baseClass = styles.select const errorClass = error ? styles.error : "" const widthClass = fullWidth ? styles.fullWidth : "" const combinedClassName = `${baseClass} ${errorClass} ${widthClass} ${className}` return (

{label && {label}} {error &&

{error}

}

) }, ) Select.displayName = "Select" export default Select [V0_FILE]css:file="components/atoms/Select/Select.module.css" isMerged="true" .container { display: flex; flex-direction: column; margin-bottom: 1rem; } .label { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: #333; } .select { height: 2.5rem; padding: 0 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; background-color: white; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; } .select:focus { outline: none; border-color: #333; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); } .error { border-color: #e53e3e; } .error:focus { border-color: #e53e3e; box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1); } .errorMessage { color: #e53e3e; font-size: 0.75rem; margin-top: 0.25rem; } .fullWidth { width: 100%; } [V0_FILE]typescriptreact:file="components/atoms/Checkbox/index.tsx" isMerged="true" import { type InputHTMLAttributes, forwardRef } from "react" import styles from "./Checkbox.module.css" interface CheckboxProps extends Omit, "type"> { label?: string error?: string } const Checkbox = forwardRef(({ label, error, className = "", ...props }, ref) => { const baseClass = styles.checkbox const errorClass = error ? styles.error : "" const combinedClassName = `${baseClass} ${errorClass} ${className}` return (

{label && {label}} {error &&

{error}

}

) }) Checkbox.displayName = "Checkbox" export default Checkbox [V0_FILE]css:file="components/atoms/Checkbox/Checkbox.module.css" isMerged="true" .container { display: flex; flex-direction: column; margin-bottom: 1rem; } .label { display: flex; align-items: center; position: relative; cursor: pointer; user-select: none; } .checkbox { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: relative; height: 1.25rem; width: 1.25rem; background-color: white; border: 1px solid #d1d5db; border-radius: 0.25rem; transition: all 0.2s; } .checkbox:checked ~ .checkmark { background-color: #333; border-color: #333; } .checkbox:focus ~ .checkmark { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); } .checkmark:after { content: ""; position: absolute; display: none; left: 0.4rem; top: 0.2rem; width: 0.3rem; height: 0.6rem; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox:checked ~ .checkmark:after { display: block; } .labelText { margin-left: 0.5rem; font-size: 0.875rem; } .error ~ .checkmark { border-color: #e53e3e; } .errorMessage { color: #e53e3e; font-size: 0.75rem; margin-top: 0.25rem; } [V0_FILE]typescriptreact:file="components/atoms/Radio/index.tsx" isMerged="true" import { type InputHTMLAttributes, forwardRef } from "react" import styles from "./Radio.module.css" interface RadioProps extends Omit, "type"> { label?: string error?: string } const Radio = forwardRef(({ label, error, className = "", ...props }, ref) => { const baseClass = styles.radio const errorClass = error ? styles.error : "" const combinedClassName = `${baseClass} ${errorClass} ${className}` return (

{label && {label}} {error &&

{error}

}

) }) Radio.displayName = "Radio" export default Radio [V0_FILE]css:file="components/atoms/Radio/Radio.module.css" isMerged="true" .container { display: flex; flex-direction: column; margin-bottom: 1rem; } .label { display: flex; align-items: center; position: relative; cursor: pointer; user-select: none; } .radio { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .radiomark { position: relative; height: 1.25rem; width: 1.25rem; background-color: white; border: 1px solid #d1d5db; border-radius: 50%; transition: all 0.2s; } .radio:checked ~ .radiomark { background-color: white; border-color: #333; } .radio:focus ~ .radiomark { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); } .radiomark:after { content: ""; position: absolute; display: none; top: 0.25rem; left: 0.25rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #333; } .radio:checked ~ .radiomark:after { display: block; } .labelText { margin-left: 0.5rem; font-size: 0.875rem; } .error ~ .radiomark { border-color: #e53e3e; } .errorMessage { color: #e53e3e; font-size: 0.75rem; margin-top: 0.25rem; } [V0_FILE]typescriptreact:file="components/atoms/Input/index.tsx" isMerged="true" import type React from "react" import { type InputHTMLAttributes, forwardRef } from "react" import styles from "./Input.module.css" interface InputProps extends InputHTMLAttributes { error?: string label?: string fullWidth?: boolean leftIcon?: React.ReactNode rightIcon?: React.ReactNode } const Input = forwardRef( ({ error, label, fullWidth = false, leftIcon, rightIcon, className = "", ...props }, ref) => { const baseClass = styles.input const errorClass = error ? styles.error : "" const leftIconClass = leftIcon ? styles.withLeftIcon : "" const rightIconClass = rightIcon ? styles.withRightIcon : "" const widthClass = fullWidth ? styles.fullWidth : "" const combinedClassName = `${baseClass} ${errorClass} ${leftIconClass} ${rightIconClass} ${widthClass} ${className}` return (

{label && {label}}

{leftIcon && {leftIcon}} {rightIcon && {rightIcon}}

{error &&

{error}

}

) }, ) Input.displayName = "Input" export default Input [V0_FILE]css:file="components/atoms/Input/Input.module.css" isMerged="true" .container { display: flex; flex-direction: column; margin-bottom: 1rem; } .label { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: #333; } .inputWrapper { position: relative; display: flex; align-items: center; } .input { height: 2.5rem; padding: 0 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; background-color: white; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; } .input:focus { outline: none; border-color: #333; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); } .error { border-color: #e53e3e; } .error:focus { border-color: #e53e3e; box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1); } .errorMessage { color: #e53e3e; font-size: 0.75rem; margin-top: 0.25rem; } .leftIcon, .rightIcon { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; pointer-events: none; } .leftIcon { left: 0; } .rightIcon { right: 0; } .withLeftIcon { padding-left: 2.5rem; } .withRightIcon { padding-right: 2.5rem; } .fullWidth { width: 100%; } [V0_FILE]typescriptreact:file="components/atoms/Modal/index.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef } from "react" import { createPortal } from "react-dom" import styles from "./Modal.module.css" interface ModalProps { isOpen: boolean onClose: () => void title?: string children: React.ReactNode size?: "sm" | "md" | "lg" | "xl" } const Modal: React.FC = ({ isOpen, onClose, title, children, size = "md" }) => { const modalRef = useRef(null) useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape") { onClose() } } const handleClickOutside = (e: MouseEvent) => { if (modalRef.current && !modalRef.current.contains(e.target as Node)) { onClose() } } if (isOpen) { document.addEventListener("keydown", handleEscape) document.addEventListener("mousedown", handleClickOutside) document.body.style.overflow = "hidden" } return () => { document.removeEventListener("keydown", handleEscape) document.removeEventListener("mousedown", handleClickOutside) document.body.style.overflow = "" } }, [isOpen, onClose]) if (!isOpen) return null return createPortal(

, document.body, ) } export default Modal [V0_FILE]css:file="components/atoms/Modal/Modal.module.css" isMerged="true" .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .modal { background-color: white; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; max-width: 100%; } .modal-sm { width: 24rem; } .modal-md { width: 32rem; } .modal-lg { width: 48rem; } .modal-xl { width: 64rem; } .header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb; } .title { font-size: 1.25rem; font-weight: 600; margin: 0; } .closeButton { background: transparent; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.25rem; color: #6b7280; } .closeButton:hover { color: #111827; } .content { padding: 1.5rem; overflow-y: auto; } @media (max-width: 640px) { .modal-sm, .modal-md, .modal-lg, .modal-xl { width: 100%; } } [V0_FILE]typescriptreact:file="components/atoms/Drawer/index.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef } from "react" import { createPortal } from "react-dom" import styles from "./Drawer.module.css" interface DrawerProps { isOpen: boolean onClose: () => void title?: string children: React.ReactNode position?: "left" | "right" size?: "sm" | "md" | "lg" | "xl" } const Drawer: React.FC = ({ isOpen, onClose, title, children, position = "right", size = "md" }) => { const drawerRef = useRef(null) useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape") { onClose() } } if (isOpen) { document.addEventListener("keydown", handleEscape) document.body.style.overflow = "hidden" } return () => { document.removeEventListener("keydown", handleEscape) document.body.style.overflow = "" } }, [isOpen, onClose]) if (!isOpen) return null return createPortal(

, document.body, ) } export default Drawer [V0_FILE]css:file="components/atoms/Drawer/Drawer.module.css" isMerged="true" .container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; } .backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .drawer { position: absolute; top: 0; bottom: 0; background-color: white; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; max-width: 100%; transition: transform 0.3s ease-in-out; } .drawer-left { left: 0; transform: translateX(0); } .drawer-right { right: 0; transform: translateX(0); } .drawer-sm { width: 24rem; } .drawer-md { width: 32rem; } .drawer-lg { width: 48rem; } .drawer-xl { width: 64rem; } .header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb; } .title { font-size: 1.25rem; font-weight: 600; margin: 0; } .closeButton { background: transparent; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.25rem; color: #6b7280; } .closeButton:hover { color: #111827; } .content { padding: 1.5rem; overflow-y: auto; flex: 1; } @media (max-width: 640px) { .drawer-sm, .drawer-md, .drawer-lg, .drawer-xl { width: 100%; } } [V0_FILE]typescriptreact:file="components/atoms/Notification/index.tsx" isMerged="true" "use client" import type React from "react" import { useEffect } from "react" import { createPortal } from "react-dom" import styles from "./Notification.module.css" type NotificationType = "success" | "error" | "warning" | "info" interface NotificationProps { type: NotificationType title?: string message: string isVisible: boolean onClose: () => void duration?: number } const Notification: React.FC = ({ type, title, message, isVisible, onClose, duration = 5000 }) => { useEffect(() => { if (isVisible && duration > 0) { const timer = setTimeout(() => { onClose() }, duration) return () => clearTimeout(timer) } }, [isVisible, duration, onClose]) if (!isVisible) return null return createPortal(

{title &&

{title}

}

{message}

, document.body, ) } export default Notification [V0_FILE]css:file="components/atoms/Notification/Notification.module.css" isMerged="true" .notification { position: fixed; top: 1rem; right: 1rem; max-width: 24rem; padding: 1rem; border-radius: 0.375rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); display: flex; align-items: flex-start; z-index: 1100; animation: slideIn 0.3s ease-out; } .notification-success { background-color: #f0fdf4; border-left: 4px solid #22c55e; } .notification-error { background-color: #fef2f2; border-left: 4px solid #ef4444; } .notification-warning { background-color: #fffbeb; border-left: 4px solid #f59e0b; } .notification-info { background-color: #f0f9ff; border-left: 4px solid #3b82f6; } .content { flex: 1; } .title { font-weight: 600; margin: 0 0 0.25rem 0; } .message { margin: 0; font-size: 0.875rem; color: #4b5563; } .closeButton { background: transparent; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0.25rem; margin-left: 0.5rem; color: #6b7280; } .closeButton:hover { color: #111827; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @media (max-width: 640px) { .notification { left: 1rem; right: 1rem; max-width: none; } } [V0_FILE]typescriptreact:file="components/molecules/ProductGallery/index.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Image from "next/image" import styles from "./ProductGallery.module.css" interface ProductGalleryProps { images: string[] alt: string } const ProductGallery: React.FC = ({ images, alt }) => { const [activeIndex, setActiveIndex] = useState(0) return (

{images.map((image, index) => ( ))}

) } export default ProductGallery [V0_FILE]css:file="components/molecules/ProductGallery/ProductGallery.module.css" isMerged="true" .gallery { display: flex; flex-direction: column; gap: 1rem; } .mainImage { border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; position: relative; width: 100%; padding-top: 100%; } .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .thumbnails { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; } .thumbnailButton { border: 1px solid #e5e7eb; border-radius: 0.25rem; overflow: hidden; cursor: pointer; padding: 0; width: 4rem; height: 4rem; flex-shrink: 0; transition: border-color 0.2s; } .thumbnailButton.active { border-color: #333; } .thumbnailImage { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 768px) { .gallery { flex-direction: row-reverse; gap: 1.5rem; } .mainImage { flex: 1; } .thumbnails { display: flex; flex-direction: column; width: 5rem; overflow-y: auto; overflow-x: hidden; padding-right: 0.5rem; padding-bottom: 0; } .thumbnailButton { width: 5rem; height: 5rem; } } [V0_FILE]css:file="components/molecules/ProductOptions/ProductOptions.module.css" isMerged="true" .options { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; } .option { display: flex; flex-direction: column; gap: 0.5rem; } .label { font-weight: 500; font-size: 0.875rem; } .radioGroup { display: flex; gap: 1.5rem; } .radioLabel { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } [V0_FILE]typescriptreact:file="context/AuthContext.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" import type { User } from "@/types" interface AuthContextType { user: User | null isLoading: boolean isAdmin: boolean login: (email: string, password: string) => Promise register: (name: string, email: string, password: string) => Promise logout: () => void } const AuthContext = createContext(undefined) export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Check if user is logged in on client-side const savedUser = localStorage.getItem("user") if (savedUser) { try { setUser(JSON.parse(savedUser)) } catch (error) { console.error("Failed to parse user from localStorage:", error) } } setIsLoading(false) }, []) const login = async (email: string, password: string) => { // In a real app, this would be an API call setIsLoading(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Mock user for demo purposes const mockUser: User = { id: "1", name: "Demo User", email, isAdmin: email.includes("admin"), } setUser(mockUser) localStorage.setItem("user", JSON.stringify(mockUser)) } finally { setIsLoading(false) } } const register = async (name: string, email: string, password: string) => { // In a real app, this would be an API call setIsLoading(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Mock user for demo purposes const mockUser: User = { id: "1", name, email, isAdmin: false, } setUser(mockUser) localStorage.setItem("user", JSON.stringify(mockUser)) } finally { setIsLoading(false) } } const logout = () => { setUser(null) localStorage.removeItem("user") } return ( {children} ) } export const useAuth = () => { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="components/organisms/ProductCatalog/index.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import type { Product } from "@/types" import ProductCard from "@/components/molecules/ProductCard" import ProductFilters from "@/components/organisms/ProductFilters" import styles from "./ProductCatalog.module.css" import { filterProducts } from "@/lib/api" interface ProductCatalogProps { initialProducts: Product[] } const ProductCatalog: React.FC = ({ initialProducts }) => { const [products, setProducts] = useState(initialProducts) const [filters, setFilters] = useState({ category: [], priceRange: [0, 5000], sortBy: "popularity", }) const [isLoading, setIsLoading] = useState(false) useEffect(() => { const applyFilters = async () => { setIsLoading(true) try { const filteredProducts = await filterProducts(filters) // Apply sorting const sortedProducts = [...filteredProducts].sort((a, b) => { switch (filters.sortBy) { case "price-low": return a.price.current - b.price.current case "price-high": return b.price.current - a.price.current case "newest": return new Date(b.manufacturing).getTime() - new Date(a.manufacturing).getTime() case "popularity": default: return b.popularity - a.popularity } }) setProducts(sortedProducts) } catch (error) { console.error("Failed to apply filters:", error) } finally { setIsLoading(false) } } applyFilters() }, [filters]) return (

{products.length} products

Sort by:

{isLoading ? (

) : (

{products.map((product) => ( ))}

)} {!isLoading && products.length === 0 && (

No products found matching your criteria.

)}

) } export default ProductCatalog [V0_FILE]css:file="components/organisms/ProductCatalog/ProductCatalog.module.css" isMerged="true" .catalog { display: flex; flex-direction: column; gap: 2rem; } .sidebar { width: 100%; } .content { flex: 1; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .count { font-size: 0.875rem; color: #6b7280; } .sort { display: flex; align-items: center; gap: 0.5rem; } .sortLabel { font-size: 0.875rem; color: #6b7280; } .sortSelect { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; } .grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } .loading { display: flex; justify-content: center; padding: 3rem 0; color: #6b7280; } .empty { text-align: center; padding: 3rem 0; color: #6b7280; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .catalog { flex-direction: row; } .sidebar { width: 16rem; flex-shrink: 0; } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .grid { grid-template-columns: repeat(4, 1fr); } } [V0_FILE]typescriptreact:file="components/organisms/ProductFilters/index.tsx" isMerged="true" "use client" import type React from "react" import styles from "./ProductFilters.module.css" import Checkbox from "@/components/atoms/Checkbox" interface ProductFiltersProps { filters: { category: string[] priceRange: [number, number] sortBy: string } onChange: (filters: any) => void } const ProductFilters: React.FC = ({ filters, onChange }) => { const handleCategoryChange = (category: string, checked: boolean) => { const updatedCategories = checked ? [...filters.category, category] : filters.category.filter((c) => c !== category) onChange({ ...filters, category: updatedCategories, }) } const handlePriceRangeChange = (min: number, max: number) => { onChange({ ...filters, priceRange: [min, max], }) } return (

Price Range

handlePriceRangeChange(Number(e.target.value), filters.priceRange[1])} className={styles.priceInput} min="0" max={filters.priceRange[1]} /> to handlePriceRangeChange(filters.priceRange[0], Number(e.target.value))} className={styles.priceInput} min={filters.priceRange[0]} />

handlePriceRangeChange(filters.priceRange[0], Number(e.target.value))} className={styles.priceSlider} />

) } export default ProductFilters [V0_FILE]css:file="components/organisms/ProductFilters/ProductFilters.module.css" isMerged="true" .filters { display: flex; flex-direction: column; gap: 2rem; } .section { border-bottom: 1px solid #e5e7eb; padding-bottom: 1.5rem; } .title { font-size: 1rem; font-weight: 600; margin: 0 0 1rem 0; } .options { display: flex; flex-direction: column; gap: 0.75rem; } .option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .optionLabel { font-size: 0.875rem; } .priceRange { display: flex; flex-direction: column; gap: 1rem; } .priceInputs { display: flex; align-items: center; gap: 0.5rem; } .priceInput { width: 5rem; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; } .priceSeparator { font-size: 0.875rem; color: #6b7280; } .priceSlider { width: 100%; } [V0_FILE]typescriptreact:file="components/organisms/Footer/index.tsx" isMerged="true" import type React from "react" import Link from "next/link" import styles from "./Footer.module.css" const Footer: React.FC = () => { return ( ) } export default Footer [V0_FILE]css:file="components/organisms/Footer/Footer.module.css" isMerged="true" .footer { background-color: #f9fafb; border-top: 1px solid #e5e7eb; padding: 3rem 0 1.5rem; } .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } .grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } .column { display: flex; flex-direction: column; } .title { font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem 0; color: #111827; } .description { font-size: 0.875rem; line-height: 1.5; color: #4b5563; margin: 0; } .links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .link { font-size: 0.875rem; color: #4b5563; text-decoration: none; } .link:hover { color: #111827; text-decoration: underline; } .address { font-style: normal; font-size: 0.875rem; line-height: 1.5; color: #4b5563; } .address p { margin: 0 0 0.5rem 0; } .bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; } .copyright { font-size: 0.875rem; color: #6b7280; text-align: center; margin: 0; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } } [V0_FILE]typescriptreact:file="components/organisms/Hero/index.tsx" isMerged="true" import type React from "react" import Link from "next/link" import Image from "next/image" import Button from "@/components/atoms/Button" import styles from "./Hero.module.css" const Hero: React.FC = () => { return (

Quality Furniture for Your Home

Discover our collection of stylish and comfortable beds, sofas, chairs, and tables.

) } export default Hero [V0_FILE]css:file="components/organisms/Hero/Hero.module.css" isMerged="true" .hero { background-color: #f9fafb; padding: 3rem 0; } .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; display: flex; flex-direction: column; gap: 2rem; } .content { display: flex; flex-direction: column; align-items: flex-start; max-width: 36rem; } .title { font-size: 2.25rem; font-weight: 700; line-height: 1.2; margin: 0 0 1rem 0; color: #111827; } .subtitle { font-size: 1.125rem; line-height: 1.5; color: #4b5563; margin: 0 0 2rem 0; } .actions { display: flex; gap: 1rem; } .imageContainer { width: 100%; height: auto; position: relative; } .image { width: 100%; height: auto; object-fit: cover; border-radius: 0.5rem; } @media (min-width: 768px) { .hero { padding: 5rem 0; } .container { flex-direction: row; align-items: center; } .content { flex: 1; } .imageContainer { flex: 1; } .title { font-size: 3rem; } } [V0_FILE]typescriptreact:file="components/organisms/FeaturedProducts/index.tsx" isMerged="true" import type React from "react" import Link from "next/link" import ProductCard from "@/components/molecules/ProductCard" import type { Product } from "@/types" import styles from "./FeaturedProducts.module.css" interface FeaturedProductsProps { products?: Product[] } const FeaturedProducts: React.FC = ({ products = [] }) => { // Mock data for preview const mockProducts: Product[] = [ { id: "201", category: "bed", subcategory: "bed", "subcategory-ru": "Кровать", "category-ru": "Кровать", name: "Bed 1", slug: "bed-1", description: "Stylish and comfortable bed. Perfect for everyday rest.", seo: { title: "Bed 1 - Buy Online", meta_description: "Buy Bed 1 at a great price. Excellent quality, delivery across Belarus.", keywords: ["bed", "furniture", "bedroom"], }, images: ["/placeholder.svg"], price: { current: 1390, old: null, discount: null, }, availability: "In Stock", manufacturing: "Up to 35 working days", popularity: 4, bed: [ { width: 90, length: 200, height: null, price: 1390, lifting_mechanism: [ { available: false, price: 0, }, { available: true, price: 120, }, ], }, ], materials: [ { name: "Fabric", localizedTitles: { ru: "Ткань", }, type: "All types", color: null, }, ], sleepingPlace: { width: null, length: null, }, features: ["Folding mechanism: Optional"], style: "Modern", color: null, max_load: null, country: "Belarus", promotion: { type: null, text: null, valid_until: null, }, warranty: "18 months", delivery: { available: true, cost: "Free across Belarus", time: "2-5 days", }, "commercial-offer": "We make beds to individual order", installment_plans: [ { bank: "Alfa-Bank", installment: { duration_months: 4, interest: "0%", additional_fees: "None", }, credit: { duration_months: 36, interest: "Bank rates", }, }, ], }, { id: "202", category: "bed", subcategory: "bed", "subcategory-ru": "Кровать", "category-ru": "Кровать", name: "Bed 2", slug: "bed-2", description: "Stylish and comfortable bed. Perfect for everyday rest.", seo: { title: "Bed 2 - Buy Online", meta_description: "Buy Bed 2 at a great price. Excellent quality, delivery across Belarus.", keywords: ["bed", "furniture", "bedroom"], }, images: ["/placeholder.svg"], price: { current: 1450, old: 1600, discount: 10, }, availability: "In Stock", manufacturing: "Up to 35 working days", popularity: 5, bed: [ { width: 90, length: 200, height: null, price: 1450, lifting_mechanism: [ { available: false, price: 0, }, { available: true, price: 120, }, ], }, ], materials: [ { name: "Fabric", localizedTitles: { ru: "Ткань", }, type: "All types", color: null, }, ], sleepingPlace: { width: null, length: null, }, features: ["Folding mechanism: Optional"], style: "Modern", color: null, max_load: null, country: "Belarus", promotion: { type: null, text: null, valid_until: null, }, warranty: "18 months", delivery: { available: true, cost: "Free across Belarus", time: "2-5 days", }, "commercial-offer": "We make beds to individual order", installment_plans: [ { bank: "Alfa-Bank", installment: { duration_months: 4, interest: "0%", additional_fees: "None", }, credit: { duration_months: 36, interest: "Bank rates", }, }, ], }, { id: "203", category: "bed", subcategory: "bed", "subcategory-ru": "Кровать", "category-ru": "Кровать", name: "Bed 3", slug: "bed-3", description: "Stylish and comfortable bed. Perfect for everyday rest.", seo: { title: "Bed 3 - Buy Online", meta_description: "Buy Bed 3 at a great price. Excellent quality, delivery across Belarus.", keywords: ["bed", "furniture", "bedroom"], }, images: ["/placeholder.svg"], price: { current: 1550, old: null, discount: null, }, availability: "In Stock", manufacturing: "Up to 35 working days", popularity: 3, bed: [ { width: 90, length: 200, height: null, price: 1550, lifting_mechanism: [ { available: false, price: 0, }, { available: true, price: 120, }, ], }, ], materials: [ { name: "Fabric", localizedTitles: { ru: "Ткань", }, type: "All types", color: null, }, ], sleepingPlace: { width: null, length: null, }, features: ["Folding mechanism: Optional"], style: "Modern", color: null, max_load: null, country: "Belarus", promotion: { type: null, text: null, valid_until: null, }, warranty: "18 months", delivery: { available: true, cost: "Free across Belarus", time: "2-5 days", }, "commercial-offer": "We make beds to individual order", installment_plans: [ { bank: "Alfa-Bank", installment: { duration_months: 4, interest: "0%", additional_fees: "None", }, credit: { duration_months: 36, interest: "Bank rates", }, }, ], }, { id: "204", category: "bed", subcategory: "bed", "subcategory-ru": "Кровать", "category-ru": "Кровать", name: "Bed 4", slug: "bed-4", description: "Stylish and comfortable bed. Perfect for everyday rest.", seo: { title: "Bed 4 - Buy Online", meta_description: "Buy Bed 4 at a great price. Excellent quality, delivery across Belarus.", keywords: ["bed", "furniture", "bedroom"], }, images: ["/placeholder.svg"], price: { current: 1650, old: 1800, discount: 8, }, availability: "In Stock", manufacturing: "Up to 35 working days", popularity: 4, bed: [ { width: 90, length: 200, height: null, price: 1650, lifting_mechanism: [ { available: false, price: 0, }, { available: true, price: 120, }, ], }, ], materials: [ { name: "Fabric", localizedTitles: { ru: "Ткань", }, type: "All types", color: null, }, ], sleepingPlace: { width: null, length: null, }, features: ["Folding mechanism: Optional"], style: "Modern", color: null, max_load: null, country: "Belarus", promotion: { type: null, text: null, valid_until: null, }, warranty: "18 months", delivery: { available: true, cost: "Free across Belarus", time: "2-5 days", }, "commercial-offer": "We make beds to individual order", installment_plans: [ { bank: "Alfa-Bank", installment: { duration_months: 4, interest: "0%", additional_fees: "None", }, credit: { duration_months: 36, interest: "Bank rates", }, }, ], }, ] const displayProducts = products.length > 0 ? products : mockProducts return (

Featured Products

View All

{displayProducts.map((product) => ( ))}

) } export default FeaturedProducts [V0_FILE]css:file="components/organisms/FeaturedProducts/FeaturedProducts.module.css" isMerged="true" .section { padding: 3rem 0; } .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .title { font-size: 1.875rem; font-weight: 700; margin: 0; color: #111827; } .viewAll { font-size: 0.875rem; font-weight: 500; color: #333; text-decoration: none; } .viewAll:hover { text-decoration: underline; } .grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } } [V0_FILE]typescriptreact:file="components/organisms/CategoryShowcase/index.tsx" isMerged="true" import type React from "react" import Link from "next/link" import Image from "next/image" import styles from "./CategoryShowcase.module.css" const categories = [ { id: "beds", name: "Beds", description: "Comfortable beds for a good night's sleep", image: "/placeholder.svg", link: "/products?category=bed", }, { id: "sofas", name: "Sofas", description: "Stylish sofas for your living room", image: "/placeholder.svg", link: "/products?category=sofa", }, { id: "chairs", name: "Chairs", description: "Ergonomic chairs for work and relaxation", image: "/placeholder.svg", link: "/products?category=chair", }, { id: "tables", name: "Tables", description: "Dining and coffee tables for every home", image: "/placeholder.svg", link: "/products?category=table", }, ] const CategoryShowcase: React.FC = () => { return (

Shop by Category

{categories.map((category) => (

{category.name}

{category.description}

))}

) } export default CategoryShowcase [V0_FILE]css:file="components/organisms/CategoryShowcase/CategoryShowcase.module.css" isMerged="true" .section { padding: 3rem 0; background-color: #f9fafb; } .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } .title { font-size: 1.875rem; font-weight: 700; margin: 0 0 2rem 0; text-align: center; color: #111827; } .grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } .card { display: block; text-decoration: none; color: inherit; background-color: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .imageContainer { position: relative; width: 100%; padding-top: 75%; } .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .content { padding: 1.5rem; } .categoryTitle { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.5rem 0; color: #111827; } .description { font-size: 0.875rem; color: #6b7280; margin: 0; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } } [V0_FILE]typescriptreact:file="components/organisms/PromoSection/index.tsx" isMerged="true" import type React from "react" import Link from "next/link" import Button from "@/components/atoms/Button" import styles from "./PromoSection.module.css" const PromoSection: React.FC = () => { return (

Special Offer

Get 10% off on all beds when you order this month. Use promo code BEDS10 at checkout.

) } export default PromoSection [V0_FILE]css:file="components/organisms/PromoSection/PromoSection.module.css" isMerged="true" .section { padding: 3rem 0; background-color: #333; color: white; } .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } .content { max-width: 36rem; text-align: center; margin: 0 auto; } .title { font-size: 2.25rem; font-weight: 700; margin: 0 0 1rem 0; } .description { font-size: 1.125rem; line-height: 1.5; margin: 0 0 2rem 0; opacity: 0.9; } @media (min-width: 768px) { .section { padding: 5rem 0; } .title { font-size: 3rem; } } [V0_FILE]typescriptreact:file="components/molecules/Newsletter/index.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Button from "@/components/atoms/Button" import Input from "@/components/atoms/Input" import styles from "./Newsletter.module.css" const Newsletter: React.FC = () => { const [email, setEmail] = useState("") const [isSubmitted, setIsSubmitted] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // In a real app, this would send the email to a backend service setIsSubmitted(true) } return (

Subscribe to Our Newsletter

Stay updated with our latest products, offers, and furniture tips.

{isSubmitted ? (

Thank you for subscribing!

) : ( )}

) } export default Newsletter [V0_FILE]css:file="components/molecules/Newsletter/Newsletter.module.css" isMerged="true" .section { padding: 3rem 0; background-color: #f9fafb; } .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } .content { max-width: 36rem; text-align: center; margin: 0 auto; } .title { font-size: 1.875rem; font-weight: 700; margin: 0 0 1rem 0; color: #111827; } .description { font-size: 1rem; line-height: 1.5; margin: 0 0 2rem 0; color: #4b5563; } .form { display: flex; flex-direction: column; gap: 1rem; } .inputWrapper { flex: 1; } .success { padding: 1rem; background-color: #d1fae5; border-radius: 0.5rem; color: #065f46; } @media (min-width: 640px) { .form { flex-direction: row; } } [V0_FILE]typescriptreact:file="components/molecules/CartSummary/index.tsx" isMerged="true" import type React from "react" import { useCart } from "@/context/CartContext" import styles from "./CartSummary.module.css" const CartSummary: React.FC = () => { const { subtotal, itemCount } = useCart() // Calculate shipping, tax, and total const shipping = subtotal > 0 ? 0 : 0 // Free shipping const tax = subtotal * 0.2 // 20% tax const total = subtotal + shipping + tax return (

Order Summary

Items ({itemCount}) ${subtotal.toFixed(2)}

Shipping {shipping === 0 ? "Free" : `$${shipping.toFixed(2)}`}

Tax ${tax.toFixed(2)}

Total ${total.toFixed(2)}

) } export default CartSummary [V0_FILE]css:file="components/molecules/CartSummary/CartSummary.module.css" isMerged="true" .summary { background-color: #f9fafb; border-radius: 0.5rem; padding: 1.5rem; } .title { font-size: 1.25rem; font-weight: 600; margin: 0 0 1.5rem 0; color: #111827; } .row { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 0.875rem; color: #4b5563; } .divider { height: 1px; background-color: #e5e7eb; margin: 1rem 0; } .total { font-weight: 600; font-size: 1rem; color: #111827; } [V0_FILE]typescriptreact:file="components/molecules/EmptyState/index.tsx" isMerged="true" import type React from "react" import styles from "./EmptyState.module.css" interface EmptyStateProps { title: string description: string action?: React.ReactNode icon?: React.ReactNode } const EmptyState: React.FC = ({ title, description, action, icon }) => { return (

{icon &&

{icon}

}

{title}

{description}

{action &&

{action}

}

) } export default EmptyState [V0_FILE]css:file="components/molecules/EmptyState/EmptyState.module.css" isMerged="true" .emptyState { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1rem; } .icon { font-size: 3rem; color: #9ca3af; margin-bottom: 1.5rem; } .title { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.5rem 0; color: #111827; } .description { font-size: 1rem; color: #6b7280; margin: 0 0 2rem 0; max-width: 24rem; } .action { margin-top: 1rem; } [V0_FILE]typescriptreact:file="components/organisms/CartItemList/index.tsx" isMerged="true" "use client" import type React from "react" import Image from "next/image" import type { CartItem } from "@/types" import { useCart } from "@/context/CartContext" import Button from "@/components/atoms/Button" import styles from "./CartItemList.module.css" interface CartItemListProps { items: CartItem[] } const CartItemList: React.FC = ({ items }) => { const { updateQuantity, removeItem } = useCart() const handleQuantityChange = (item: CartItem, newQuantity: number) => { if (newQuantity <= 0) { if (confirm('Are you sure you want to remove this item from your cart?')) { removeItem(item.id) } } else { updateQuantity(item.id, newQuantity) } } return (

Product

Price

Quantity

Total

{items.map((item) => (

{item.name}

Size: {item.options.width} x {item.options.length} cm

Lifting Mechanism: {item.options.liftingMechanism ? "Yes" : "No"}

${item.price.toFixed(2)}

{item.quantity}

${(item.price * item.quantity).toFixed(2)}

))}

) } export default CartItemList [V0_FILE]css:file="components/organisms/CartItemList/CartItemList.module.css" isMerged="true" .itemList { border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; } .header { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 1rem; padding: 1rem; background-color: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; font-size: 0.875rem; color: #4b5563; } .item { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 1rem; padding: 1rem; border-bottom: 1px solid #e5e7eb; align-items: center; } .item:last-child { border-bottom: none; } .product { display: flex; align-items: center; gap: 1rem; } .imageContainer { width: 5rem; height: 5rem; flex-shrink: 0; } .image { width: 100%; height: 100%; object-fit: cover; border-radius: 0.25rem; } .details { display: flex; flex-direction: column; gap: 0.25rem; } .name { font-size: 1rem; font-weight: 500; margin: 0; color: #111827; } .options { font-size: 0.75rem; color: #6b7280; } .options p { margin: 0; } .price, .total { font-weight: 500; color: #111827; } .quantitySelect { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; width: 4rem; } @media (max-width: 768px) { .header { display: none; } .item { grid-template-columns: 1fr; gap: 0.5rem; } .price, .quantity, .total, .actions { display: flex; justify-content: space-between; padding-left: 6rem; } .price::before { content: "Price:"; font-weight: 500; color: #6b7280; } .quantity::before { content: "Quantity:"; font-weight: 500; color: #6b7280; } .total::before { content: "Total:"; font-weight: 500; color: #6b7280; } } [V0_FILE]typescriptreact:file="components/organisms/RelatedProducts/index.tsx" isMerged="true" import type React from "react" import ProductCard from "@/components/molecules/ProductCard" import type { Product } from "@/types" import styles from "./RelatedProducts.module.css" interface RelatedProductsProps { products: Product[] } const RelatedProducts: React.FC = ({ products }) => { if (products.length === 0) { return null } return (

Related Products

{products.map((product) => ( ))}

) } export default RelatedProducts [V0_FILE]css:file="components/organisms/RelatedProducts/RelatedProducts.module.css" isMerged="true" .section { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #e5e7eb; } .title { font-size: 1.5rem; font-weight: 600; margin: 0 0 2rem 0; color: #111827; } .grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } } [V0_FILE]typescriptreact:file="components/organisms/CheckoutSteps/index.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Button from "@/components/atoms/Button" import Input from "@/components/atoms/Input" import Select from "@/components/atoms/Select" import Checkbox from "@/components/atoms/Checkbox" import Radio from "@/components/atoms/Radio" import styles from "./CheckoutSteps.module.css" interface CheckoutStepsProps { currentStep: number onStepChange: (step: number) => void } const CheckoutSteps: React.FC = ({ currentStep, onStepChange }) => { const [shippingInfo, setShippingInfo] = useState({ fullName: "", address: "", city: "", state: "", postalCode: "", country: "", phone: "", }) const [billingInfo, setBillingInfo] = useState({ sameAsShipping: true, fullName: "", address: "", city: "", state: "", postalCode: "", country: "", phone: "", }) const [paymentInfo, setPaymentInfo] = useState({ method: "credit-card", cardNumber: "", cardName: "", expiryDate: "", cvv: "", }) const handleShippingChange = (e: React.ChangeEvent) => { const { name, value } = e.target setShippingInfo((prev) => ({ ...prev, [name]: value })) } const handleBillingChange = (e: React.ChangeEvent) => { const { name, value, type, checked } = e.target if (name === "sameAsShipping") { setBillingInfo((prev) => ({ ...prev, sameAsShipping: checked })) } else { setBillingInfo((prev) => ({ ...prev, [name]: value })) } } const handlePaymentChange = (e: React.ChangeEvent) => { const { name, value } = e.target setPaymentInfo((prev) => ({ ...prev, [name]: value })) } const handleSubmitShipping = (e: React.FormEvent) => { e.preventDefault() onStepChange(1) } const handleSubmitBilling = (e: React.FormEvent) => { e.preventDefault() onStepChange(2) } const handleSubmitPayment = (e: React.FormEvent) => { e.preventDefault() onStepChange(3) } const handlePlaceOrder = () => { // In a real app, this would submit the order to a backend service alert("Order placed successfully!") } return (

= 0 ? styles.active : ""}`}> 1 Shipping

= 1 ? styles.active : ""}`}> 2 Billing

= 2 ? styles.active : ""}`}> 3 Payment

= 3 ? styles.active : ""}`}> 4 Review

{currentStep === 0 && ( )} {currentStep === 1 && ( )} {currentStep === 2 && ( )} {currentStep === 3 && (

Review Your Order

Shipping Information

{shippingInfo.fullName}

{shippingInfo.address}

{shippingInfo.city}, {shippingInfo.state} {shippingInfo.postalCode}

{shippingInfo.country}

{shippingInfo.phone}

Billing Information

{billingInfo.sameAsShipping ? (

Same as shipping address

) : ( <>

{billingInfo.fullName}

{billingInfo.address}

{billingInfo.city}, {billingInfo.state} {billingInfo.postalCode}

{billingInfo.country}

{billingInfo.phone}

)}

Payment Method

{paymentInfo.method === "credit-card" && (

Credit Card ending in {paymentInfo.cardNumber.slice(-4)}

)} {paymentInfo.method === "paypal" &&

PayPal

} {paymentInfo.method === "bank-transfer" &&

Bank Transfer

}

)}

) } export default CheckoutSteps [V0_FILE]css:file="components/organisms/CheckoutSteps/CheckoutSteps.module.css" isMerged="true" .steps { display: flex; flex-direction: column; gap: 2rem; } .stepIndicators { display: flex; align-items: center; justify-content: space-between; } .stepIndicator { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .stepNumber { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background-color: #e5e7eb; color: #6b7280; font-weight: 600; font-size: 0.875rem; } .stepIndicator.active .stepNumber { background-color: #333; color: white; } .stepLabel { font-size: 0.75rem; color: #6b7280; display: none; } .stepIndicator.active .stepLabel { color: #333; font-weight: 500; } .stepDivider { flex: 1; height: 1px; background-color: #e5e7eb; } .stepContent { padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; } .stepTitle { font-size: 1.25rem; font-weight: 600; margin: 0 0 1.5rem 0; color: #111827; } .formGrid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .sameAsShipping { margin-bottom: 1.5rem; } .paymentMethods { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .paymentMethod { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .stepActions { display: flex; justify-content: space-between; margin-top: 2rem; } .reviewSection { margin-bottom: 2rem; } .reviewSectionTitle { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem 0; color: #111827; } .reviewDetails { padding: 1rem; background-color: #f9fafb; border-radius: 0.375rem; } .reviewDetails p { margin: 0 0 0.25rem 0; font-size: 0.875rem; } @media (min-width: 640px) { .stepLabel { display: block; } .formGrid { grid-template-columns: repeat(2, 1fr); } } [V0_FILE]typescriptreact:file="components/organisms/LoginForm/index.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Input from "@/components/atoms/Input" import Button from "@/components/atoms/Button" import styles from "./LoginForm.module.css" interface LoginFormProps { onSubmit: (email: string, password: string) => void } const LoginForm: React.FC = ({ onSubmit }) => { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!email || !password) { return } setIsLoading(true) try { await onSubmit(email, password) } finally { setIsLoading(false) } } return ( ) } export default LoginForm [V0_FILE]css:file="components/organisms/LoginForm/LoginForm.module.css" isMerged="true" .form { display: flex; flex-direction: column; gap: 1.5rem; } [V0_FILE]typescriptreact:file="components/organisms/RegisterForm/index.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Input from "@/components/atoms/Input" import Button from "@/components/atoms/Button" import styles from "./RegisterForm.module.css" interface RegisterFormProps { onSubmit: (name: string, email: string, password: string) => void } const RegisterForm: React.FC = ({ onSubmit }) => { const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [passwordError, setPasswordError] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!name || !email || !password || !confirmPassword) { return } if (password !== confirmPassword) { setPasswordError("Passwords do not match") return } setPasswordError("") setIsLoading(true) try { await onSubmit(name, email, password) } finally { setIsLoading(false) } } return ( ) } export default RegisterForm [V0_FILE]css:file="components/organisms/RegisterForm/RegisterForm.module.css" isMerged="true" .form { display: flex; flex-direction: column; gap: 1.5rem; } [V0_FILE]typescriptreact:file="components/organisms/AdminProductList/index.tsx" isMerged="true" "use client" import type React from "react" import Link from "next/link" import Image from "next/image" import type { Product } from "@/types" import Button from "@/components/atoms/Button" import styles from "./AdminProductList.module.css" interface AdminProductListProps { products: Product[] onDelete: (id: string) => void } const AdminProductList: React.FC = ({ products, onDelete }) => { return (

Image

Name

Price

Order Summary

Items ({itemCount}) ${subtotal.toFixed(2)}

Shipping {shipping === 0 ? "Free" : `$${shipping.toFixed(2)}`}

Tax ${tax.toFixed(2)}

Total ${total.toFixed(2)}

) } export default CheckoutSummary [V0_FILE]css:file="components/molecules/Breadcrumbs/Breadcrumbs.module.css" isMerged="true" .breadcrumbs { margin-bottom: 1.5rem; } .list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .item { display: flex; align-items: center; font-size: 0.875rem; } .link { color: #6b7280; text-decoration: none; } .link:hover { color: #111827; text-decoration: underline; } .current { color: #111827; font-weight: 500; } .separator { margin: 0 0.5rem; color: #d1d5db; } [V0_FILE]typescriptreact:file="context/FavoritesContext.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" import type { Product } from "@/types" interface FavoritesContextType { favorites: Product[] addToFavorites: (product: Product) => void removeFromFavorites: (productId: string) => void isFavorite: (productId: string) => boolean } const FavoritesContext = createContext(undefined) export const FavoritesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [favorites, setFavorites] = useState([]) useEffect(() => { // Load favorites from localStorage on client-side const savedFavorites = localStorage.getItem("favorites") if (savedFavorites) { try { setFavorites(JSON.parse(savedFavorites)) } catch (error) { console.error("Failed to parse favorites from localStorage:", error) } } }, []) useEffect(() => { // Save favorites to localStorage whenever it changes localStorage.setItem("favorites", JSON.stringify(favorites)) }, [favorites]) const addToFavorites = (product: Product) => { setFavorites((prev) => { if (prev.some((item) => item.id === product.id)) { return prev } return [...prev, product] }) } const removeFromFavorites = (productId: string) => { setFavorites((prev) => prev.filter((product) => product.id !== productId)) } const isFavorite = (productId: string) => { return favorites.some((product) => product.id === productId) } return ( {children} ) } export const useFavorites = () => { const context = useContext(FavoritesContext) if (context === undefined) { throw new Error("useFavorites must be used within a FavoritesProvider") } return context } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next/types" import { Inter } from "next/font/google" import Header from "@/components/organisms/Header" import Footer from "@/components/organisms/Footer" import { AuthProvider } from "@/context/AuthContext" import { CartProvider } from "@/context/CartContext" import { FavoritesProvider } from "@/context/FavoritesContext" import "@/styles/globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Furniture Store - Quality Beds and More", description: "Shop our collection of high-quality beds and furniture with free delivery across Belarus", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/products/[slug]/page.tsx" isEdit="true" isMerged="true" import type { Metadata } from "next" import { notFound } from "next/navigation" import ProductDetails from "@/components/organisms/ProductDetails" import RelatedProducts from "@/components/organisms/RelatedProducts" import Breadcrumbs from "@/components/molecules/Breadcrumbs" import { getProductBySlug, getRelatedProducts } from "@/lib/api" export async function generateMetadata({ params }: { params: { slug: string } }): Promise { const product = await getProductBySlug(params.slug) if (!product) { return { title: "Product Not Found", description: "The requested product could not be found", } } return { title: product.seo.title, description: product.seo.meta_description, keywords: product.seo.keywords.join(", "), } } export default async function ProductPage({ params }: { params: { slug: string } }) { const product = await getProductBySlug(params.slug) if (!product) { notFound() } const relatedProducts = await getRelatedProducts(product.id, product.category) // Add some mock reviews if none exist if (!product.reviews) { product.reviews = [ { id: "review1", productId: product.id, userId: "user1", userName: "John Doe", rating: 5, title: "Excellent quality", comment: "This is the best furniture I've ever bought. Very comfortable and stylish.", date: "2023-05-15T10:30:00Z", helpful: 12, notHelpful: 2 }, { id: "review2", productId: product.id, userId: "user2", userName: "Jane Smith", rating: 4, title: "Good value for money", comment: "Very satisfied with my purchase. The delivery was quick and the assembly was easy.", date: "2023-04-20T14:15:00Z", helpful: 8, notHelpful: 1 }, { id: "review3", productId: product.id, userId: "user3", userName: "Mike Johnson", rating: 3, title: "Decent but could be better", comment: "The quality is good but the color is slightly different from what was shown in the pictures.", date: "2023-03-10T09:45:00Z", helpful: 5, notHelpful: 3 } ] } const breadcrumbItems = [ { label: 'Products', href: '/products' }, { label: product.category.charAt(0).toUpperCase() + product.category.slice(1), href: `/products?category=${product.category}` }, { label: product.name, href: `/products/${product.slug}` } ] return (

) } [V0_FILE]typescriptreact:file="app/favorites/page.tsx" isMerged="true" import type { Metadata } from "next" import FavoritesClient from "./FavoritesClient" export const metadata: Metadata = { title: "Favorites - Furniture Store", description: "View and manage your favorite products", } export default function FavoritesPage() { return } [V0_FILE]typescriptreact:file="app/favorites/FavoritesClient.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import { useFavorites } from "@/context/FavoritesContext" import ProductCard from "@/components/molecules/ProductCard" import Button from "@/components/atoms/Button" import EmptyState from "@/components/molecules/EmptyState" import styles from "./Favorites.module.css" export default function FavoritesClient() { const { favorites, removeFromFavorites } = useFavorites() const router = useRouter() const handleClearAll = () => { if (confirm("Are you sure you want to remove all favorites?")) { favorites.forEach((product) => removeFromFavorites(product.id)) } } if (favorites.length === 0) { return (

router.push("/products")}>Browse Products} />

) } return (

My Favorites

{favorites.map((product) => ( ))}

) } [V0_FILE]css:file="app/favorites/Favorites.module.css" isMerged="true" .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .title { font-size: 1.875rem; font-weight: 700; margin: 0; color: #111827; } .grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .grid { grid-template-columns: repeat(4, 1fr); } } [V0_FILE]typescriptreact:file="app/search/page.tsx" isMerged="true" import type { Metadata } from "next" import { searchProducts } from "@/lib/api" import SearchResults from "./SearchResults" interface SearchPageProps { searchParams: { q?: string } } export const metadata: Metadata = { title: "Search - Furniture Store", description: "Search for products in our furniture store", } export default async function SearchPage({ searchParams }: SearchPageProps) { const query = searchParams.q || "" const products = query ? await searchProducts(query) : [] return (

Search Results

) } [V0_FILE]typescriptreact:file="app/search/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]css:file="app/search/SearchResults.module.css" isMerged="true" .searchForm { display: flex; gap: 1rem; margin-bottom: 2rem; } .searchInput { flex: 1; } .resultsCount { margin-bottom: 1.5rem; font-size: 0.875rem; color: #6b7280; } .loading { display: flex; justify-content: center; padding: 3rem 0; color: #6b7280; } .grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .grid { grid-template-columns: repeat(4, 1fr); } } [V0_FILE]css:file="components/organisms/Header/Header.module.css" isEdit="true" isMerged="true" .header { border-bottom: 1px solid #e5e7eb; background-color: white; } .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } .topBar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } .logo { flex-shrink: 0; } .logoText { font-size: 1.5rem; font-weight: 700; color: #333; } .search { display: none; flex: 1; max-width: 32rem; margin: 0 2rem; } .actions { display: flex; align-items: center; gap: 1rem; } .iconLink { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #333; font-size: 0.75rem; } .icon { font-size: 1.25rem; margin-bottom: 0.25rem; } .iconLabel { display: none; } .cartBadge { position: absolute; top: -0.25rem; right: -0.25rem; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; background-color: #333; color: white; font-size: 0.75rem; font-weight: 600; border-radius: 9999px; } .menuButton { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: none; background: none; cursor: pointer; } .menuIcon { font-size: 1.5rem; } .nav { display: none; padding: 0.5rem 0; } .navOpen { display: block; } .navList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .navItem { margin: 0; } .navLink { display: block; padding: 0.75rem 0; text-decoration: none; color: #333; font-size: 0.875rem; font-weight: 500; border-bottom: 1px solid #e5e7eb; } .navLink:hover { color: #000; } @media (min-width: 768px) { .search { display: block; } .iconLabel { display: block; } .menuButton { display: none; } .nav { display: block; } .navList { flex-direction: row; gap: 1.5rem; } .navLink { padding: 0.5rem 0; border-bottom: none; } } [V0_FILE]css:file="components/molecules/CheckoutSummary.module.css" isQuickEdit="true" isMerged="true" .summary { background-color: #f9fafb; border-radius: 0.5rem; padding: 1.5rem; } .title { font-size: 1.25rem; font-weight: 600; margin: 0 0 1.5rem 0; color: #111827; } .row { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 0.875rem; color: #4b5563; } .divider { height: 1px; background-color: #e5e7eb; margin: 1rem 0; } .total { font-weight: 600; font-size: 1rem; color: #111827; } [V0_FILE]typescriptreact:file="components/molecules/ReviewForm/index.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Button from "@/components/atoms/Button" import Input from "@/components/atoms/Input" import styles from "./ReviewForm.module.css" interface ReviewFormProps { productId: string onSubmit: (review: { rating: number name: string email: string title: string comment: string }) => Promise } const ReviewForm: React.FC = ({ productId, onSubmit }) => { const [rating, setRating] = useState(0) const [hoverRating, setHoverRating] = useState(0) const [name, setName] = useState("") const [email, setEmail] = useState("") const [title, setTitle] = useState("") const [comment, setComment] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [error, setError] = useState("") const [success, setSuccess] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() // Validation if (rating === 0) { setError("Please select a rating") return } if (!name.trim() || !email.trim() || !comment.trim()) { setError("Please fill in all required fields") return } setError("") setIsSubmitting(true) try { await onSubmit({ rating, name, email, title, comment, }) // Reset form setRating(0) setName("") setEmail("") setTitle("") setComment("") setSuccess(true) } catch (err) { setError("Failed to submit review. Please try again.") } finally { setIsSubmitting(false) } } if (success) { return (

Thank you for your review!

Your review has been submitted and will be published soon.

) } return (

Write a Review

{error &&

{error}

}

Your Rating:

{[1, 2, 3, 4, 5].map((star) => ( ))}

setName(e.target.value)} required fullWidth /> setEmail(e.target.value)} required fullWidth />

setTitle(e.target.value)} fullWidth />

Your Review *

setComment(e.target.value)}
            rows={5}
            required
          />
        </div>

<div className={styles.actions}>
          <Button type="submit" isLoading={isSubmitting}>
            Submit Review
          </Button>
        </div>
      </form>
    </div>
  )
}

export default ReviewForm

[V0_FILE]css:file="components/molecules/ReviewForm/ReviewForm.module.css" isMerged="true"
.reviewForm {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

.title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: #111827;
}

.error {
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  background-color: #fee2e2;
  border-radius: 0.375rem;
  color: #b91c1c;
  font-size: 0.875rem;
}

.ratingContainer {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.ratingLabel {
  font-size: 0.875rem;
  font-weight: 500;
  margin-right: 1rem;
}

.stars {
  display: flex;
}

.starButton {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: 1.5rem;
  color: #f59e0b;
}

.star {
  display: inline-block;
  padding: 0 0.25rem;
}

.formGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.textareaContainer {
  margin-bottom: 1.5rem;
}

.textareaLabel {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #333;
}

.textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.textarea:focus {
  outline: none;
  border-color: #333;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.actions {
  display: flex;
  justify-content: flex-end;
}

.success {
  padding: 2rem;
  text-align: center;
  background-color: #f0fdf4;
  border-radius: 0.5rem;
}

.successTitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: #15803d;
}

.successMessage {
  margin-bottom: 1.5rem;
  color: #166534;
}

@media (min-width: 640px) {
  .formGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

[V0_FILE]typescriptreact:file="components/molecules/ReviewItem/index.tsx" isMerged="true"
import type React from "react"
import styles from "./ReviewItem.module.css"
import type { Review } from "@/types"

interface ReviewItemProps {
  review: Review
}

const ReviewItem: React.FC<ReviewItemProps> = ({ review }) => {
  const formattedDate = new Date(review.date).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  })

return (
    <div className={styles.reviewItem}>
      <div className={styles.header}>
        <div className={styles.rating}>
          {[1, 2, 3, 4, 5].map((star) => (
            <span key={star} className={styles.star}>
              {review.rating >= star ? "★" : "☆"}
            </span>
          ))}
        </div>
        <div className={styles.author}>
          <span className={styles.name}>{review.name}</span>
          <span className={styles.date}>{formattedDate}</span>
        </div>
      </div>

{review.title && <h4 className={styles.title}>{review.title}</h4>}

<p className={styles.comment}>{review.comment}</p>
    </div>
  )
}

export default ReviewItem

[V0_FILE]css:file="components/molecules/ReviewItem/ReviewItem.module.css" isMerged="true"
.reviewItem {
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.rating {
  font-size: 1.25rem;
  color: #f59e0b;
}

.star {
  margin-right: 0.125rem;
}

.author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.name {
  font-weight: 500;
  color: #111827;
}

.date {
  font-size: 0.75rem;
  color: #6b7280;
}

.title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #111827;
}

.comment {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4b5563;
  margin: 0;
}

@media (min-width: 640px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

.author {
    flex-direction: row;
    gap: 1rem;
  }
}

[V0_FILE]typescriptreact:file="components/organisms/ProductReviews/index.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import ReviewItem from "@/components/molecules/ReviewItem"
import ReviewForm from "@/components/molecules/ReviewForm"
import Button from "@/components/atoms/Button"
import Select from "@/components/atoms/Select"
import type { Review } from "@/types"
import { getProductReviews, submitProductReview } from "@/lib/api"
import styles from "./ProductReviews.module.css"

interface ProductReviewsProps {
  productId: string
}

type SortOption = "newest" | "oldest" | "highest" | "lowest"

const ProductReviews: React.FC<ProductReviewsProps> = ({ productId }) => {
  const [reviews, setReviews] = useState<Review[]>([])
  const [filteredReviews, setFilteredReviews] = useState<Review[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState("")
  const [showForm, setShowForm] = useState(false)
  const [sortBy, setSortBy] = useState<SortOption>("newest")
  const [filterRating, setFilterRating] = useState<number | null>(null)

useEffect(() => {
    const fetchReviews = async () => {
      setIsLoading(true)
      try {
        const data = await getProductReviews(productId)
        setReviews(data)
        setFilteredReviews(data)
      } catch (err) {
        setError("Failed to load reviews")
        console.error(err)
      } finally {
        setIsLoading(false)
      }
    }

fetchReviews()
  }, [productId])

useEffect(() => {
    // Apply filters and sorting
    let result = [...reviews]

// Apply rating filter
    if (filterRating !== null) {
      result = result.filter((review) => review.rating === filterRating)
    }

// Apply sorting
    switch (sortBy) {
      case "newest":
        result.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
        break
      case "oldest":
        result.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
        break
      case "highest":
        result.sort((a, b) => b.rating - a.rating)
        break
      case "lowest":
        result.sort((a, b) => a.rating - b.rating)
        break
    }

setFilteredReviews(result)
  }, [reviews, sortBy, filterRating])

const handleSubmitReview = async (reviewData: {
    rating: number
    name: string
    email: string
    title: string
    comment: string
  }) => {
    await submitProductReview(productId, reviewData)

// Add the new review to the list (in a real app, this would come from the API)
    const newReview: Review = {
      id: Date.now().toString(),
      productId,
      ...reviewData,
      date: new Date().toISOString(),
    }

setReviews((prev) => [newReview, ...prev])
    setShowForm(false)
  }

const handleFilterRating = (rating: number) => {
    setFilterRating(filterRating === rating ? null : rating)
  }

const calculateAverageRating = () => {
    if (reviews.length === 0) return 0
    const sum = reviews.reduce((total, review) => total + review.rating, 0)
    return sum / reviews.length
  }

const averageRating = calculateAverageRating()

const ratingCounts = [5, 4, 3, 2, 1].map((rating) => {
    const count = reviews.filter((review) => review.rating === rating).length
    const percentage = reviews.length > 0 ? (count / reviews.length) * 100 : 0
    return { rating, count, percentage }
  })

return (
    <div className={styles.reviews}>
      <h2 className={styles.title}>Customer Reviews</h2>

{isLoading ? (
        <div className={styles.loading}>Loading reviews...</div>
      ) : error ? (
        <div className={styles.error}>{error}</div>
      ) : (
        <>
          <div className={styles.summary}>
            <div className={styles.averageRating}>
              <div className={styles.ratingValue}>{averageRating.toFixed(1)}</div>
              <div className={styles.stars}>
                {[1, 2, 3, 4, 5].map((star) => (
                  <span key={star} className={styles.star}>
                    {averageRating >= star ? "★" : averageRating >= star - 0.5 ? "✩" : "☆"}
                  </span>
                ))}
              </div>
              <div className={styles.reviewCount}>Based on {reviews.length} reviews</div>
            </div>

<div className={styles.ratingBreakdown}>
              {ratingCounts.map(({ rating, count, percentage }) => (
                <button
                  key={rating}
                  className={`${styles.ratingBar} ${filterRating === rating ? styles.activeFilter : ""}`}
                  onClick={() => handleFilterRating(rating)}
                >
                  <div className={styles.ratingLabel}>{rating} stars</div>
                  <div className={styles.ratingBarContainer}>
                    <div className={styles.ratingBarFill} style={{ width: `${percentage}%` }}></div>
                  </div>
                  <div className={styles.ratingCount}>{count}</div>
                </button>
              ))}
            </div>
          </div>

<div className={styles.controls}>
            <div className={styles.sortContainer}>
              <label htmlFor="sort-reviews" className={styles.sortLabel}>
                Sort by:
              </label>
              <Select
                id="sort-reviews"
                value={sortBy}
                onChange={(e) => setSortBy(e.target.value as SortOption)}
                className={styles.sortSelect}
              >
                <option value="newest">Newest First</option>
                <option value="oldest">Oldest First</option>
                <option value="highest">Highest Rated</option>
                <option value="lowest">Lowest Rated</option>
              </Select>
            </div>

<div className={styles.filterInfo}>
              {filterRating !== null && (
                <div className={styles.activeFilterInfo}>
                  Showing only {filterRating}-star reviews
                  <button className={styles.clearFilterButton} onClick={() => setFilterRating(null)}>
                    Clear filter
                  </button>
                </div>
              )}
            </div>

<Button onClick={() => setShowForm(!showForm)} variant={showForm ? "outline" : "primary"}>
              {showForm ? "Cancel Review" : "Write a Review"}
            </Button>
          </div>

{showForm && <ReviewForm productId={productId} onSubmit={handleSubmitReview} />}

<div className={styles.reviewsList}>
            {filteredReviews.length > 0 ? (
              filteredReviews.map((review) => <ReviewItem key={review.id} review={review} />)
            ) : (
              <div className={styles.noReviews}>
                {filterRating !== null
                  ? `No ${filterRating}-star reviews yet. Try a different filter.`
                  : "No reviews yet. Be the first to write a review!"}
              </div>
            )}
          </div>
        </>
      )}
    </div>
  )
}

export default ProductReviews

[V0_FILE]css:file="components/organisms/ProductReviews/ProductReviews.module.css" isMerged="true"
.reviews {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}

.title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: #111827;
}

.loading {
  padding: 2rem;
  text-align: center;
  color: #6b7280;
}

.error {
  padding: 1rem;
  background-color: #fee2e2;
  border-radius: 0.5rem;
  color: #b91c1c;
}

.summary {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
}

.averageRating {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ratingValue {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: #111827;
}

.stars {
  margin: 0.5rem 0;
  font-size: 1.5rem;
  color: #f59e0b;
}

.star {
  margin-right: 0.125rem;
}

.reviewCount {
  font-size: 0.875rem;
  color: #6b7280;
}

.ratingBreakdown {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ratingBar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
}

.ratingBar:hover {
  background-color: #f3f4f6;
}

.activeFilter {
  background-color: #f3f4f6;
}

.ratingLabel {
  width: 4rem;
  text-align: right;
  font-size: 0.875rem;
  color: #6b7280;
}

.ratingBarContainer {
  flex: 1;
  height: 0.5rem;
  background-color: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

.ratingBarFill {
  height: 100%;
  background-color: #f59e0b;
}

.ratingCount {
  width: 2rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
}

.sortContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sortLabel {
  font-size: 0.875rem;
  color: #6b7280;
}

.sortSelect {
  min-width: 10rem;
}

.filterInfo {
  flex: 1;
}

.activeFilterInfo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: #f3f4f6;
  border-radius: 9999px;
  font-size: 0.75rem;
  color: #111827;
}

.clearFilterButton {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  color: #4b5563;
  cursor: pointer;
  text-decoration: underline;
}

.reviewsList {
  margin-top: 2rem;
}

.noReviews {
  padding: 2rem;
  text-align: center;
  color: #6b7280;
  background-color: #f9fafb;
  border-radius: 0.5rem;
}

@media (min-width: 768px) {
  .summary {
    flex-direction: row;
    align-items: flex-start;
  }

.averageRating {
    width: 12rem;
  }

.ratingBreakdown {
    flex: 1;
  }
}

[V0_FILE]css:file="components/organisms/ProductDetails/ProductDetails.module.css" isEdit="true" isMerged="true"
.productDetails {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}

.gallery {
  width: 100%;
}

.info {
  flex: 1;
}

.titleRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.title {
  font-size: 1.875rem;
  font-weight: 600;
  margin: 0;
  color: #111827;
}

.favoriteButton {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #d1d5db;
  transition: color 0.2s, transform 0.2s;
  padding: 0.5rem;
}

.favoriteButton:hover {
  transform: scale(1.1);
}

.favoriteActive {
  color: #ef4444;
}

.price {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.availability,
.manufacturing {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.label {
  font-weight: 500;
}

.description {
  margin: 1.5rem 0;
  line-height: 1.6;
}

.actions {
  margin-bottom: 2rem;
}

.actionButtons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quantityControls {
  display: flex;
  align-items: center;
  max-width: 16rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  overflow: hidden;
}

.quantityButton {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9fafb;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.quantityButton:hover {
  background-color: #e5e7eb;
}

.quantityDisplay {
  flex: 1;
  text-align: center;
  font-weight: 500;
  padding: 0 1rem;
}

.details {
  border-top: 1px solid #e5e7eb;
  padding-top: 1.5rem;
}

.detailsTitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

.detailsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.detailItem {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detailLabel {
  font-size: 0.75rem;
  color: #6b7280;
}

.materials {
  margin-top: 1.5rem;
}

.materialsTitle {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
}

.materialsList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.materialItem {
  display: flex;
  margin-bottom: 0.5rem;
}

.materialName {
  font-weight: 500;
  margin-right: 0.5rem;
}

.materialType {
  color: #6b7280;
}

.reviewsSection {
  width: 100%;
}

.quickBuyModal {
  padding: 1rem 0;
}

.quickBuyProduct {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.quickBuyImage {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
}

.quickBuyImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.25rem;
}

.quickBuyInfo {
  flex: 1;
}

.quickBuyTitle {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.25rem 0;
}

.quickBuyPrice {
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.quickBuyOptions {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.quickBuyForm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.formField {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.formLabel {
  font-size: 0.875rem;
  font-weight: 500;
}

.formInput,
.formTextarea {
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-family: inherit;
}

.formInput:focus,
.formTextarea:focus {
  outline: none;
  border-color: #333;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.formTextarea {
  resize: vertical;
}

.formActions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .productDetails {
    flex-direction: row;
    flex-wrap: wrap;
  }

.gallery {
    width: 50%;
  }

.info {
    width: 45%;
    padding-left: 2rem;
  }

.actionButtons {
    flex-direction: row;
    gap: 1rem;
  }
}

[V0_FILE]typescriptreact:file="components/molecules/CartItem/index.tsx" isMerged="true"
"use client"

import type React from "react"
import Image from "next/image"
import Link from "next/link"
import { useCart } from "@/context/CartContext"
import Button from "@/components/atoms/Button"
import type { CartItem as CartItemType } from "@/types"
import styles from "./CartItem.module.css"

interface CartItemProps {
  item: CartItemType
}

const CartItem: React.FC<CartItemProps> = ({ item }) => {
  const { updateQuantity, removeItem } = useCart()

const handleQuantityChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    updateQuantity(item.id, Number(e.target.value))
  }

const handleRemove = () => {
    removeItem(item.id)
  }

const totalPrice = item.price * item.quantity

return (
    <div className={styles.cartItem}>
      <div className={styles.imageContainer}>
        <Link href={`/products/${item.id}`}>
          <Image
            src={item.image || "/placeholder.svg"}
            alt={item.name}
            width={80}
            height={80}
            className={styles.image}
          />
        </Link>
      </div>

<div className={styles.options}>
            <p className={styles.option}>
              Size: {item.options.width} x {item.options.length} cm
            </p>
            {item.options.liftingMechanism && <p className={styles.option}>With lifting mechanism</p>}
          </div>

<div className={styles.price}>${item.price.toFixed(2)}</div>
        </div>

<div className={styles.total}>
            <span className={styles.totalLabel}>Total:</span>
            <span className={styles.totalValue}>${totalPrice.toFixed(2)}</span>
          </div>

<Button variant="ghost" size="sm" onClick={handleRemove} className={styles.removeButton}>
            Remove
          </Button>
        </div>
      </div>
    </div>
  )
}

export default CartItem

[V0_FILE]css:file="components/molecules/CartItem/CartItem.module.css" isMerged="true"
.cartItem {
  display: flex;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.imageContainer {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.25rem;
}

.content {
  flex: 1;
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info {
  margin-bottom: 1rem;
}

.name {
  display: block;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.name:hover {
  text-decoration: underline;
}

.options {
  margin-bottom: 0.5rem;
}

.option {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 0.25rem 0;
}

.price {
  font-weight: 500;
  color: #111827;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quantity {
  display: flex;
  align-items: center;
}

.quantityLabel {
  font-size: 0.875rem;
  color: #6b7280;
  margin-right: 0.5rem;
}

.quantitySelect {
  padding: 0.375rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  width: 4rem;
}

.total {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.totalLabel {
  font-size: 0.875rem;
  color: #6b7280;
}

.totalValue {
  font-weight: 600;
  color: #111827;
}

.removeButton {
  align-self: flex-start;
  padding: 0;
  color: #6b7280;
}

.removeButton:hover {
  color: #ef4444;
}

@media (min-width: 640px) {
  .content {
    flex-direction: row;
  }

.info {
    margin-bottom: 0;
    flex: 1;
  }

.actions {
    width: 12rem;
    align-items: flex-end;
  }
}

[V0_FILE]typescriptreact:file="app/cart/CartPageClient.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { useCart } from "@/context/CartContext"
import CartItem from "@/components/molecules/CartItem"
import Button from "@/components/atoms/Button"
import EmptyState from "@/components/molecules/EmptyState"
import styles from "./CartPage.module.css"

export default function CartPageClient() {
  const { items, isEmpty, subtotal, clearCart } = useCart()
  const router = useRouter()
  const [deliveryMethod, setDeliveryMethod] = useState("standard")
  const [customerInfo, setCustomerInfo] = useState({
    fullName: "",
    address: "",
    phone: "",
    email: "",
  })

const handleDeliveryMethodChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setDeliveryMethod(e.target.value)
  }

const handleCustomerInfoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setCustomerInfo((prev) => ({
      ...prev,
      [name]: value,
    }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // In a real app, you would submit the order to your backend
    alert("Thank you for your order! We will contact you shortly.")
    clearCart()
    router.push("/")
  }

if (isEmpty) {
    return (
      <div className="container mx-auto px-4 py-16">
        <EmptyState
          title="Your cart is empty"
          description="Looks like you haven't added any products to your cart yet."
          action={<Button onClick={() => router.push("/products")}>Continue Shopping</Button>}
        />
      </div>
    )
  }

// Calculate shipping cost based on delivery method
  const shippingCost = deliveryMethod === "express" ? 15 : 0
  const tax = subtotal * 0.2 // 20% tax
  const total = subtotal + shippingCost + tax

return (
    <div className={styles.cartPage}>
      <div className={styles.cartHeader}>
        <h1 className={styles.title}>Shopping Cart</h1>
        <Button variant="outline" size="sm" onClick={clearCart}>
          Clear Cart
        </Button>
      </div>

<div className={styles.cartContent}>
        <div className={styles.cartItems}>
          {items.map((item) => (
            <CartItem key={`${item.id}-${item.options.width}-${item.options.length}`} item={item} />
          ))}
        </div>

<div className={styles.cartSidebar}>
          <div className={styles.orderSummary}>
            <h2 className={styles.summaryTitle}>Order Summary</h2>

<div className={styles.summaryRow}>
              <span>Subtotal</span>
              <span>${subtotal.toFixed(2)}</span>
            </div>

<div className={styles.summaryRow}>
              <span>Shipping</span>
              <span>{shippingCost === 0 ? "Free" : `$${shippingCost.toFixed(2)}`}</span>
            </div>

<div className={styles.summaryRow}>
              <span>Tax (20%)</span>
              <span>${tax.toFixed(2)}</span>
            </div>

<div className={`${styles.summaryRow} ${styles.total}`}>
              <span>Total</span>
              <span>${total.toFixed(2)}</span>
            </div>
          </div>

<form onSubmit={handleSubmit} className={styles.checkoutForm}>
            <h2 className={styles.formTitle}>Delivery Method</h2>

<div className={styles.deliveryOptions}>
              <label className={styles.deliveryOption}>
                <input
                  type="radio"
                  name="deliveryMethod"
                  value="standard"
                  checked={deliveryMethod === "standard"}
                  onChange={handleDeliveryMethodChange}
                  className={styles.radioInput}
                />
                <div className={styles.optionContent}>
                  <div className={styles.optionTitle}>Standard Delivery</div>
                  <div className={styles.optionDescription}>Free, 3-5 business days</div>
                </div>
              </label>

<label className={styles.deliveryOption}>
                <input
                  type="radio"
                  name="deliveryMethod"
                  value="express"
                  checked={deliveryMethod === "express"}
                  onChange={handleDeliveryMethodChange}
                  className={styles.radioInput}
                />
                <div className={styles.optionContent}>
                  <div className={styles.optionTitle}>Express Delivery</div>
                  <div className={styles.optionDescription}>$15.00, 1-2 business days</div>
                </div>
              </label>
            </div>

<h2 className={styles.formTitle}>Customer Information</h2>

<div className={styles.formField}>
              <label htmlFor="address" className={styles.formLabel}>
                Address *
              </label>
              <input
                type="text"
                id="address"
                name="address"
                value={customerInfo.address}
                onChange={handleCustomerInfoChange}
                className={styles.formInput}
                required
              />
            </div>

<div className={styles.formField}>
              <label htmlFor="phone" className={styles.formLabel}>
                Phone Number *
              </label>
              <input
                type="tel"
                id="phone"
                name="phone"
                value={customerInfo.phone}
                onChange={handleCustomerInfoChange}
                className={styles.formInput}
                required
              />
            </div>

<div className={styles.formField}>
              <label htmlFor="email" className={styles.formLabel}>
                Email *
              </label>
              <input
                type="email"
                id="email"
                name="email"
                value={customerInfo.email}
                onChange={handleCustomerInfoChange}
                className={styles.formInput}
                required
              />
            </div>

<Button type="submit" fullWidth>
              Place Order
            </Button>
          </form>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/molecules/ProductOptions/index.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import styles from "./ProductOptions.module.css"
import Select from "@/components/atoms/Select"
import Checkbox from "@/components/atoms/Checkbox"
import type { Product } from "@/types"

interface ProductOptionsProps {
  product: Product
  onChange: (options: any) => void
}

const ProductOptions: React.FC<ProductOptionsProps> = ({ product, onChange }) => {
  const [selectedSize, setSelectedSize] = useState(`${product.bed[0].width}x${product.bed[0].length}`)
  const [liftingMechanism, setLiftingMechanism] = useState(false)

const handleSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedSize(e.target.value)

const [width, length] = e.target.value.split("x").map(Number)
    const selectedBed = product.bed.find((b) => b.width === width && b.length === length)

onChange({
      width,
      length,
      price: selectedBed?.price || product.price.current,
      liftingMechanism,
    })
  }

const handleLiftingMechanismChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.checked
    setLiftingMechanism(newValue)

const [width, length] = selectedSize.split("x").map(Number)
    const selectedBed = product.bed.find((b) => b.width === width && b.length === length)

onChange({
      width,
      length,
      price: selectedBed?.price || product.price.current,
      liftingMechanism: newValue,
    })
  }

return (
    <div className={styles.options}>
      <div className={styles.option}>
        <label className={styles.label}>Size</label>
        <Select value={selectedSize} onChange={handleSizeChange} fullWidth>
          {product.bed.map((bed) => (
            <option key={`${bed.width}x${bed.length}`} value={`${bed.width}x${bed.length}`}>
              {bed.width} x {bed.length} cm - ${bed.price}
            </option>
          ))}
        </Select>
      </div>

<div className={styles.option}>
        <Checkbox
          label="Add lifting mechanism (+$120)"
          checked={liftingMechanism}
          onChange={handleLiftingMechanismChange}
        />
      </div>
    </div>
  )
}

export default ProductOptions

[V0_FILE]typescriptreact:file="components/organisms/ProductDetails/index.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import type { Product } from "@/types"
import ProductGallery from "@/components/molecules/ProductGallery"
import ProductOptions from "@/components/molecules/ProductOptions"
import ProductReviews from "@/components/organisms/ProductReviews"
import Button from "@/components/atoms/Button"
import Modal from "@/components/atoms/Modal"
import { useCart } from "@/context/CartContext"
import { useFavorites } from "@/context/FavoritesContext"
import styles from "./ProductDetails.module.css"

interface ProductDetailsProps {
  product: Product
}

const ProductDetails: React.FC<ProductDetailsProps> = ({ product }) => {
  const { addItem, removeItem, items } = useCart()
  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()

const [selectedOptions, setSelectedOptions] = useState({
    width: product.bed[0].width,
    length: product.bed[0].length,
    price: product.bed[0].price,
    liftingMechanism: false,
  })

const [isQuickBuyModalOpen, setIsQuickBuyModalOpen] = useState(false)
  const [quickBuyForm, setQuickBuyForm] = useState({
    name: "",
    phone: "",
    email: "",
    address: "",
    comments: "",
  })

// Find if this product with the selected options is already in the cart
  const cartItem = items.find(
    (item) =>
      item.id === product.id &&
      item.options.width === selectedOptions.width &&
      item.options.length === selectedOptions.length &&
      item.options.liftingMechanism === selectedOptions.liftingMechanism,
  )

const [quantity, setQuantity] = useState(0)

useEffect(() => {
    // Update quantity when cart item changes or options change
    setQuantity(cartItem?.quantity || 0)
  }, [cartItem, selectedOptions])

const handleOptionsChange = (options: any) => {
    setSelectedOptions(options)
  }

const handleAddToCart = () => {
    addItem({
      id: product.id,
      name: product.name,
      price: selectedOptions.price + (selectedOptions.liftingMechanism ? 120 : 0),
      image: product.images[0],
      quantity: 1,
      options: {
        width: selectedOptions.width,
        length: selectedOptions.length,
        liftingMechanism: selectedOptions.liftingMechanism,
      },
    })
  }

const handleIncrement = () => {
    addItem({
      id: product.id,
      name: product.name,
      price: selectedOptions.price + (selectedOptions.liftingMechanism ? 120 : 0),
      image: product.images[0],
      quantity: 1,
      options: {
        width: selectedOptions.width,
        length: selectedOptions.length,
        liftingMechanism: selectedOptions.liftingMechanism,
      },
    })
  }

const handleDecrement = () => {
    if (quantity > 1) {
      // Decrease quantity
      addItem({
        id: product.id,
        name: product.name,
        price: selectedOptions.price + (selectedOptions.liftingMechanism ? 120 : 0),
        image: product.images[0],
        quantity: -1, // Negative to decrease
        options: {
          width: selectedOptions.width,
          length: selectedOptions.length,
          liftingMechanism: selectedOptions.liftingMechanism,
        },
      })
    } else if (quantity === 1) {
      // Remove item completely
      removeItem(product.id)
    }
  }

const toggleFavorite = () => {
    if (isFavorite(product.id)) {
      removeFromFavorites(product.id)
    } else {
      addToFavorites(product)
    }
  }

const handleQuickBuyOpen = () => {
    setIsQuickBuyModalOpen(true)
  }

const handleQuickBuyClose = () => {
    setIsQuickBuyModalOpen(false)
  }

const handleQuickBuyChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setQuickBuyForm((prev) => ({
      ...prev,
      [name]: value,
    }))
  }

const handleQuickBuySubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // In a real app, you would submit this to your backend
    console.log("Quick buy form submitted:", {
      product: product.name,
      options: selectedOptions,
      ...quickBuyForm,
    })

// Close modal and show success message
    setIsQuickBuyModalOpen(false)
    alert("Thank you! Your order has been placed. We will contact you shortly.")

// Reset form
    setQuickBuyForm({
      name: "",
      phone: "",
      email: "",
      address: "",
      comments: "",
    })
  }

return (
    <div className={styles.productDetails}>
      <div className={styles.gallery}>
        <ProductGallery images={product.images} alt={product.name} />
      </div>

<div className={styles.info}>
        <div className={styles.titleRow}>
          <h1 className={styles.title}>{product.name}</h1>
          <button
            className={`${styles.favoriteButton} ${isFavorite(product.id) ? styles.favoriteActive : ""}`}
            onClick={toggleFavorite}
            aria-label={isFavorite(product.id) ? "Remove from favorites" : "Add to favorites"}
          >
            {isFavorite(product.id) ? "♥" : "♡"}
          </button>
        </div>

<div className={styles.price}>${selectedOptions.price + (selectedOptions.liftingMechanism ? 120 : 0)}</div>

<div className={styles.availability}>
          <span className={styles.label}>Availability:</span> {product.availability}
        </div>

<div className={styles.manufacturing}>
          <span className={styles.label}>Manufacturing Time:</span> {product.manufacturing}
        </div>

<div className={styles.description}>{product.description}</div>

<div className={styles.actions}>
          {quantity === 0 ? (
            <div className={styles.actionButtons}>
              <Button onClick={handleAddToCart}>Add to Cart</Button>
              <Button variant="outline" onClick={handleQuickBuyOpen}>
                Buy in One Click
              </Button>
            </div>
          ) : (
            <div className={styles.actionButtons}>
              <div className={styles.quantityControls}>
                <button className={styles.quantityButton} onClick={handleDecrement} aria-label="Decrease quantity">
                  -
                </button>
                <span className={styles.quantityDisplay}>{quantity} in cart</span>
                <button className={styles.quantityButton} onClick={handleIncrement} aria-label="Increase quantity">
                  +
                </button>
              </div>
              <Button variant="outline" onClick={handleQuickBuyOpen}>
                Buy in One Click
              </Button>
            </div>
          )}
        </div>

<div className={styles.details}>
          <h3 className={styles.detailsTitle}>Product Details</h3>

<div className={styles.detailsGrid}>
            <div className={styles.detailItem}>
              <span className={styles.detailLabel}>Style:</span>
              <span>{product.style}</span>
            </div>

<div className={styles.detailItem}>
              <span className={styles.detailLabel}>Country:</span>
              <span>{product.country}</span>
            </div>

<div className={styles.detailItem}>
              <span className={styles.detailLabel}>Warranty:</span>
              <span>{product.warranty}</span>
            </div>

<div className={styles.detailItem}>
              <span className={styles.detailLabel}>Delivery:</span>
              <span>{product.delivery.time}</span>
            </div>
          </div>

<div className={styles.materials}>
            <h4 className={styles.materialsTitle}>Materials</h4>
            <ul className={styles.materialsList}>
              {product.materials.map((material, index) => (
                <li key={index} className={styles.materialItem}>
                  <span className={styles.materialName}>{material.name}:</span>
                  <span className={styles.materialType}>{material.type}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

<Modal isOpen={isQuickBuyModalOpen} onClose={handleQuickBuyClose} title="Buy in One Click" size="md">
        <div className={styles.quickBuyModal}>
          <div className={styles.quickBuyProduct}>
            <div className={styles.quickBuyImage}>
              <img src={product.images[0] || "/placeholder.svg"} alt={product.name} />
            </div>
            <div className={styles.quickBuyInfo}>
              <h3 className={styles.quickBuyTitle}>{product.name}</h3>
              <p className={styles.quickBuyPrice}>
                ${selectedOptions.price + (selectedOptions.liftingMechanism ? 120 : 0)}
              </p>
              <p className={styles.quickBuyOptions}>
                Size: {selectedOptions.width} x {selectedOptions.length} cm
                {selectedOptions.liftingMechanism && ", with lifting mechanism"}
              </p>
            </div>
          </div>

<div className={styles.formField}>
              <label className={styles.formLabel}>Phone Number *</label>
              <input
                type="tel"
                name="phone"
                value={quickBuyForm.phone}
                onChange={handleQuickBuyChange}
                className={styles.formInput}
                required
              />
            </div>

<div className={styles.formField}>
              <label className={styles.formLabel}>Email</label>
              <input
                type="email"
                name="email"
                value={quickBuyForm.email}
                onChange={handleQuickBuyChange}
                className={styles.formInput}
              />
            </div>

<div className={styles.formField}>
              <label className={styles.formLabel}>Delivery Address *</label>
              <input
                type="text"
                name="address"
                value={quickBuyForm.address}
                onChange={handleQuickBuyChange}
                className={styles.formInput}
                required
              />
            </div>

<div className={styles.formField}>
              <label className={styles.formLabel}>Comments</label>
              <textarea
                name="comments"
                value={quickBuyForm.comments}
                onChange={handleQuickBuyChange}
                className={styles.formTextarea}
                rows={3}
              />
            </div>

<div className={styles.formActions}>
              <Button type="submit">Place Order</Button>
              <Button variant="outline" type="button" onClick={handleQuickBuyClose}>
                Cancel
              </Button>
            </div>
          </form>
        </div>
      </Modal>
    </div>
  )
}

export default ProductDetails

[V0_FILE]typescriptreact:file="types/index.ts" isEdit="true" isMerged="true"
export interface Product {
  id: string
  category: string
  subcategory: string
  "subcategory-ru": string
  "category-ru": string
  name: string
  slug: string
  description: string
  seo: {
    title: string
    meta_description: string
    keywords: string[]
  }
  images: string[]

price: {
    current: number
    old: number | null
    discount: number | null
  }
  availability: string
  manufacturing: string
  popularity: number
  bed: {
    width: number
    length: number
    height: number | null
    price: number
    lifting_mechanism: {
      available: boolean
      price: number
    }[]
  }[]
  materials: {
    name: string
    localizedTitles: {
      ru: string
    }
    type: string
    color: string | null
  }[]
  sleepingPlace: {
    width: number | null
    length: number | null
  }
  features: string[]
  style: string
  color: string | null
  max_load: number | null
  country: string
  promotion: {
    type: string | null
    text: string | null
    valid_until: string | null
  }
  warranty: string
  delivery: {
    available: boolean
    cost: string
    time: string
  }
  "commercial-offer": string
  installment_plans: {
    bank: string
    installment: {
      duration_months: number
      interest: string
      additional_fees: string
    }
    credit: {
      duration_months: number
      interest: string
    }
  }[]
}

export interface CartItem {
  id: string
  name: string
  price: number
  image: string
  quantity: number
  options: {
    width: number
    length: number
    liftingMechanism: boolean
  }
}

export interface User {
  id: string
  name: string
  email: string
  isAdmin: boolean
}

export interface Order {
  id: string
  userId: string
  items: CartItem[]
  total: number
  status: "pending" | "processing" | "shipped" | "delivered" | "cancelled"
  shippingAddress: Address
  billingAddress: Address
  paymentMethod: string
  createdAt: string
}

export interface Address {
  fullName: string
  address: string
  city: string
  state: string
  postalCode: string
  country: string
  phone: string
}

export interface Review {
  id: string
  productId: string
  rating: number
  name: string
  email: string
  title: string
  comment: string
  date: string
}

[V0_FILE]css:file="app/cart/CartPage.module.css" isQuickEdit="true" isMerged="true"
.cartPage {
  padding: 2rem 0;
}

.cartHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.title {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0;
  color: #111827;
}

.cartContent {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cartItems {
  flex: 1;
}

.cartSidebar {
  width: 100%;
}

.orderSummary {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.summaryTitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: #111827;
}

.summaryRow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 1rem 0;
}

.total {
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
}

.checkoutForm {
  margin-top: 2rem;
}

.formTitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: #111827;
}

.deliveryOptions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.deliveryOption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.radioInput {
  margin-right: 0.5rem;
}

.optionContent {
  display: flex;
  flex-direction: column;
}

.optionTitle {
  font-weight: 500;
  color: #111827;
}

.optionDescription {
  font-size: 0.75rem;
  color: #6b7280;
}

.formField {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.formLabel {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #333;
}

.formInput {
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .cartContent {
    flex-direction: row;
  }

.cartSidebar {
    width: 24rem;
    flex-shrink: 0;
  }
}

[V0_FILE]typescriptreact:file="components/molecules/SearchBar/index.tsx" isEdit="true"
"use client"

import type React from "react"
import { useState, useEffect, useRef, useMemo } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import Input from "@/components/atoms/Input"
import Button from "@/components/atoms/Button"
import { searchProducts } from "@/lib/api"
import styles from "./SearchBar.module.css"

const POPULAR_CATEGORIES = [
  { name: "Кровати", slug: "bed" },
  { name: "Диваны", slug: "sofa" },
  { name: "Кресла", slug: "armchair" },
]

const SearchBar: React.FC = () => {
  const [query, setQuery] = useState("")
  const [suggestions, setSuggestions] = useState<Array<{ id: string; name: string; image: string }>>([])
  const [showSuggestions, setShowSuggestions] = useState(false)
  const [searchHistory, setSearchHistory] = useState<string[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()
  const suggestionsRef = useRef<HTMLDivElement>(null)
  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null)

useEffect(() => {
    // Load search history from localStorage
    const history = localStorage.getItem("searchHistory")
    if (history) {
      try {
        setSearchHistory(JSON.parse(history))
      } catch (error) {
        console.error("Failed to parse search history:", error)
      }
    }

// Add click outside listener to close suggestions
    const handleClickOutside = (event: MouseEvent) => {
      if (suggestionsRef.current && !suggestionsRef.current.contains(event.target as Node)) {
        setShowSuggestions(false)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
      if (searchTimeoutRef.current) {
        clearTimeout(searchTimeoutRef.current)
      }
    }
  }, [])

// Memoize the debounced search function
  const debouncedSearch = useMemo(() => {
    return (searchQuery: string) => {
      if (searchTimeoutRef.current) {
        clearTimeout(searchTimeoutRef.current)
      }

if (searchQuery.length < 2) {
        setSuggestions([])
        setIsLoading(false)
        return
      }

setIsLoading(true)
      searchTimeoutRef.current = setTimeout(async () => {
        try {
          const products = await searchProducts(searchQuery)
          // Limit to 5 products and extract needed info
          const productSuggestions = products.slice(0, 5).map((p) => ({
            id: p.id,
            name: p.name,
            image: p.images[0] || "/placeholder.svg",
          }))
          setSuggestions(productSuggestions)
        } catch (error) {
          console.error("Failed to fetch suggestions:", error)
          setSuggestions([])
        } finally {
          setIsLoading(false)
        }
      }, 300)
    }
  }, [])

useEffect(() => {
    debouncedSearch(query)
  }, [query, debouncedSearch])

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (query.trim()) {
      // Add to search history
      const newHistory = [query, ...searchHistory.filter((item) => item !== query)].slice(0, 5)
      setSearchHistory(newHistory)
      localStorage.setItem("searchHistory", JSON.stringify(newHistory))

// Navigate to search page
      router.push(`/search?q=${encodeURIComponent(query.trim())}`)
      setShowSuggestions(false)
    }
  }

const handleSuggestionClick = (suggestion: string) => {
    setQuery(suggestion)
    // Add to search history
    const newHistory = [suggestion, ...searchHistory.filter((item) => item !== suggestion)].slice(0, 5)
    setSearchHistory(newHistory)
    localStorage.setItem("searchHistory", JSON.stringify(newHistory))

// Navigate to search page
    router.push(`/search?q=${encodeURIComponent(suggestion.trim())}`)
    setShowSuggestions(false)
  }

const clearSearchHistory = () => {
    setSearchHistory([])
    localStorage.removeItem("searchHistory")
  }

return (
    <div className={styles.searchContainer} ref={suggestionsRef}>
      <form onSubmit={handleSearch} className={styles.searchForm}>
        <Input
          type="search"
          placeholder="Поиск товаров..."
          value={query}
          onChange={(e) => {
            setQuery(e.target.value)
            setShowSuggestions(true)
          }}
          onFocus={() => setShowSuggestions(true)}
          fullWidth
        />
        <Button type="submit">Поиск</Button>
      </form>

{showSuggestions && (query.length > 0 || searchHistory.length > 0) && (
        <div className={styles.suggestionsContainer}>
          {query.length > 0 && (
            <div className={styles.suggestions}>
              <h3 className={styles.suggestionsTitle}>Предложения</h3>
              {isLoading ? (
                <div className={styles.loading}>Загрузка...</div>
              ) : suggestions.length > 0 ? (
                <ul className={styles.suggestionsList}>
                  {suggestions.map((suggestion) => (
                    <li key={suggestion.id} className={styles.suggestionItem}>
                      <button
                        className={styles.suggestionButton}
                        onClick={() => handleSuggestionClick(suggestion.name)}
                      >
                        <div className={styles.suggestionImage}>
                          <Image
                            src={suggestion.image || "/placeholder.svg"}
                            alt={suggestion.name}
                            width={40}
                            height={40}
                            className={styles.productImage}
                          />
                        </div>
                        <span className={styles.suggestionText}>{suggestion.name}</span>
                      </button>
                    </li>
                  ))}
                </ul>
              ) : (
                <div className={styles.noResults}>Ничего не найдено</div>
              )}
            </div>
          )}

{searchHistory.length > 0 && (
            <div className={styles.searchHistory}>
              <div className={styles.historyHeader}>
                <h3 className={styles.historyTitle}>Недавние запросы</h3>
                <button className={styles.clearHistoryButton} onClick={clearSearchHistory}>
                  Очистить
                </button>
              </div>
              <ul className={styles.historyList}>
                {searchHistory.map((item, index) => (
                  <li key={index} className={styles.historyItem}>
                    <button className={styles.historyButton} onClick={() => handleSuggestionClick(item)}>
                      {item}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          )}

<div className={styles.popularCategories}>
            <h3 className={styles.categoriesTitle}>Популярные категории</h3>
            <div className={styles.categoriesList}>
              {POPULAR_CATEGORIES.map((category, index) => (
                <Link
                  key={index}
                  href={`/products?category=${category.slug}`}
                  className={styles.categoryLink}
                  onClick={() => setShowSuggestions(false)}
                >
                  {category.name}
                </Link>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default SearchBar

[V0_FILE]css:file="components/molecules/SearchBar/SearchBar.module.css" isEdit="true"
.searchContainer {
  position: relative;
  width: 100%;
}

.searchForm {
  display: flex;
  gap: 0.5rem;
}

.suggestionsContainer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin-top: 0.5rem;
  z-index: 50;
  max-height: 400px;
  overflow-y: auto;
}

.suggestions,
.searchHistory,
.popularCategories {
  padding: 1rem;
}

.suggestions:not(:last-child),
.searchHistory:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

.suggestionsTitle,
.historyTitle,
.categoriesTitle {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: #6b7280;
}

.suggestionsList,
.historyList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.suggestionItem,
.historyItem {
  margin-bottom: 0.5rem;
}

.suggestionButton,
.historyButton {
  background: none;
  border: none;
  padding: 0.5rem;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  color: #111827;
  cursor: pointer;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
}

.suggestionButton:hover,
.historyButton:hover {
  background-color: #f3f4f6;
}

.suggestionImage {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  flex-shrink: 0;
}

.productImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.suggestionText {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loading,
.noResults {
  padding: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.historyHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.clearHistoryButton {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #6b7280;
  cursor: pointer;
}

.clearHistoryButton:hover {
  color: #111827;
  text-decoration: underline;
}

.categoriesList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.categoryLink {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background-color: #f3f4f6;
  border-radius: 9999px;
  font-size: 0.75rem;
  color: #111827;
  text-decoration: none;
  transition: background-color 0.2s;
}

.categoryLink:hover {
  background-color: #e5e7eb;
}

[V0_FILE]typescriptreact:file="app/search/SearchResults.tsx" isEdit="true"
"use client"

import type React from "react"
import { useState, useEffect, useCallback, useRef } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import type { Product } from "@/types"
import ProductCard from "@/components/molecules/ProductCard"
import Input from "@/components/atoms/Input"
import Button from "@/components/atoms/Button"
import EmptyState from "@/components/molecules/EmptyState"
import { searchProducts } from "@/lib/api"
import styles from "./SearchResults.module.css"

interface SearchResultsProps {
  initialQuery: string
  initialProducts: Product[]
}

export default function SearchResults({ initialQuery, initialProducts }: SearchResultsProps) {
  const [query, setQuery] = useState(initialQuery)
  const [products, setProducts] = useState<Product[]>(initialProducts)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()
  const searchParams = useSearchParams()
  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null)
  const isInitialMount = useRef(true)

// Use useCallback to prevent infinite loop
  const performSearch = useCallback(async (searchQuery: string) => {
    if (searchTimeoutRef.current) {
      clearTimeout(searchTimeoutRef.current)
    }

setIsLoading(true)

// Use a timeout to prevent UI freezing for complex searches
    searchTimeoutRef.current = setTimeout(async () => {
      try {
        const results = await searchProducts(searchQuery)
        setProducts(results)
      } catch (error) {
        console.error("Search failed:", error)
      } finally {
        setIsLoading(false)
      }
    }, 100) // Small delay to allow UI to update
  }, [])

useEffect(() => {
    // Skip the first render to prevent double search
    if (isInitialMount.current) {
      isInitialMount.current = false
      return
    }

// Update query when URL changes
    const urlQuery = searchParams.get("q") || ""
    setQuery(urlQuery)

if (urlQuery) {
      performSearch(urlQuery)
    } else {
      setProducts([])
      setIsLoading(false)
    }

return () => {
      if (searchTimeoutRef.current) {
        clearTimeout(searchTimeoutRef.current)
      }
    }
  }, [searchParams, performSearch])

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (query.trim()) {
      router.push(`/search?q=${encodeURIComponent(query.trim())}`)
    }
  }

return (
    <div>
      <form onSubmit={handleSearch} className={styles.searchForm}>
        <div className={styles.searchInput}>
          <Input
            type="search"
            placeholder="Поиск товаров..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            fullWidth
          />
        </div>
        <Button type="submit">Поиск</Button>
      </form>

{isLoading ? (
        <div className={styles.loading}>Загрузка результатов...</div>
      ) : (
        <>
          {query && (
            <p className={styles.resultsCount}>
              {products.length} {products.length === 1 ? "результат" : "результатов"} для "{query}"
            </p>
          )}

{products.length > 0 ? (
            <div className={styles.grid}>
              {products.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          ) : (
            query && (
              <EmptyState
                title="Ничего не найдено"
                description={`Мы не смогли найти товары по запросу "${query}". Попробуйте другой поисковый запрос.`}
              />
            )
          )}
        </>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/molecules/ProductCard/index.tsx" isEdit="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import type { Product } from "@/types"
import styles from "./ProductCard.module.css"
import Button from "@/components/atoms/Button"
import { useCart } from "@/context/CartContext"
import { useFavorites } from "@/context/FavoritesContext"

interface ProductCardProps {
  product: Product
}

const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
  const { addItem, removeItem, items } = useCart()
  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()

// Find if this product is already in the cart
  const cartItem = items.find(
    (item) =>
      item.id === product.id &&
      item.options.width === product.bed[0].width &&
      item.options.length === product.bed[0].length,
  )

const [quantity, setQuantity] = useState(0)

// Update quantity when cart item changes
  useEffect(() => {
    setQuantity(cartItem?.quantity || 0)
  }, [cartItem])

const handleAddToCart = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()

addItem({
      id: product.id,
      name: product.name,
      price: product.price.current,
      image: product.images[0],
      quantity: 1,
      options: {
        width: product.bed[0].width,
        length: product.bed[0].length,
        liftingMechanism: false,
      },
    })
  }

const handleIncrement = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()

const handleDecrement = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()

if (quantity > 1) {
      // Decrease quantity
      addItem({
        id: product.id,
        name: product.name,
        price: product.price.current,
        image: product.images[0],
        quantity: -1, // Negative to decrease
        options: {
          width: product.bed[0].width,
          length: product.bed[0].length,
          liftingMechanism: false,
        },
      })
    } else if (quantity === 1) {
      // Remove item completely
      removeItem(product.id)
    }
  }

const toggleFavorite = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()

if (isFavorite(product.id)) {
      removeFromFavorites(product.id)
    } else {
      addToFavorites(product)
    }
  }

return (
    <div className={styles.card}>
      <Link href={`/products/${product.slug}`} className={styles.link}>
        <div className={styles.imageContainer}>
          <Image
            src={product.images[0] || "/placeholder.svg"}
            alt={product.name}
            width={300}
            height={300}
            className={styles.image}
          />
          <button
            className={`${styles.favoriteButton} ${isFavorite(product.id) ? styles.favoriteActive : ""}`}
            onClick={toggleFavorite}
            aria-label={isFavorite(product.id) ? "Remove from favorites" : "Add to favorites"}
          >
            ♥
          </button>
        </div>
        <div className={styles.content}>
          <h3 className={styles.title}>{product.name}</h3>
          <p className={styles.price}>
            {product.price.old && <span className={styles.oldPrice}>${product.price.old}</span>}
            <span className={styles.currentPrice}>${product.price.current}</span>
          </p>
          <div className={styles.availability}>{product.availability}</div>

<div className={styles.cartActions} onClick={(e) => e.preventDefault()}>
            {quantity === 0 ? (
              <Button variant="primary" size="sm" className={styles.addToCartButton} onClick={handleAddToCart}>
                В корзину
              </Button>
            ) : (
              <div className={styles.quantityControls}>
                <button className={styles.quantityButton} onClick={handleDecrement} aria-label="Decrease quantity">
                  -
                </button>
                <span className={styles.quantityDisplay}>{quantity}</span>
                <button className={styles.quantityButton} onClick={handleIncrement} aria-label="Increase quantity">
                  +
                </button>
              </div>
            )}
          </div>
        </div>
      </Link>
    </div>
  )
}

export default ProductCard

[V0_FILE]css:file="components/molecules/ProductCard/ProductCard.module.css" isEdit="true"
.card {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.imageContainer {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.card:hover .image {
  transform: scale(1.05);
}

.favoriteButton {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 1;
  transition: color 0.2s, transform 0.2s;
}

.favoriteButton:hover {
  transform: scale(1.1);
}

.favoriteActive {
  color: #ef4444;
}

.content {
  padding: 1rem;
}

.title {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: #111827;
  height: 2.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.currentPrice {
  font-weight: 600;
  font-size: 1.125rem;
  color: #111827;
}

.oldPrice {
  text-decoration: line-through;
  color: #6b7280;
  font-size: 0.875rem;
}

.availability {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.cartActions {
  z-index: 2;
  position: relative;
}

.addToCartButton {
  width: 100%;
}

.quantityControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  overflow: hidden;
}

.quantityButton {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9fafb;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.quantityButton:hover {
  background-color: #e5e7eb;
}

.quantityDisplay {
  flex: 1;
  text-align: center;
  font-weight: 500;
}

[V0_FILE]typescriptreact:file="components/organisms/Header/index.tsx" isEdit="true"
"use client"

import type React from "react"
import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useCart } from "@/context/CartContext"
import { useAuth } from "@/context/AuthContext"
import Button from "@/components/atoms/Button"
import SearchBar from "@/components/molecules/SearchBar"
import styles from "./Header.module.css"

const Header: React.FC = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const { itemCount } = useCart()
  const { user, logout } = useAuth()
  const router = useRouter()

const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen)
  }

return (
    <header className={styles.header}>
      <div className={styles.container}>
        <div className={styles.topBar}>
          <div className={styles.logo}>
            <Link href="/">
              <span className={styles.logoText}>Мебельный Магазин</span>
            </Link>
          </div>

<div className={styles.actions}>
            <Link href="/favorites" className={styles.iconLink}>
              <span className={styles.icon}>♥</span>
              <span className={styles.iconLabel}>Избранное</span>
            </Link>

<Link href="/cart" className={styles.iconLink}>
              <span className={styles.icon}>🛒</span>
              {itemCount > 0 && <span className={styles.cartBadge}>{itemCount}</span>}
              <span className={styles.iconLabel}>Корзина</span>
            </Link>

{user ? (
              <Button variant="outline" size="sm" onClick={logout}>
                Выйти
              </Button>
            ) : (
              <Link href="/auth/login">
                <Button variant="outline" size="sm">
                  Войти
                </Button>
              </Link>
            )}

<nav className={`${styles.nav} ${isMenuOpen ? styles.navOpen : ""}`}>
          <ul className={styles.navList}>
            <li className={styles.navItem}>
              <Link href="/" className={styles.navLink}>
                Главная
              </Link>
            </li>
            <li className={styles.navItem}>
              <Link href="/products?category=bed" className={styles.navLink}>
                Кровати
              </Link>
            </li>
            <li className={styles.navItem}>
              <Link href="/products?category=sofa" className={styles.navLink}>
                Диваны
              </Link>
            </li>
            <li className={styles.navItem}>
              <Link href="/products?category=armchair" className={styles.navLink}>
                Кресла
              </Link>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  )
}

export default Header

[V0_FILE]typescriptreact:file="lib/api.ts" isEdit="true"
import type { Product, Review } from "@/types"

// Cache for products data
const productsCache: Record<string, Product[]> = {
  bed: [],
  sofa: [],
  armchair: [],
}

let allProductsCache: Product[] = []

export async function getProducts(): Promise<Product[]> {
  // If we already have all products in cache, return them
  if (allProductsCache.length > 0) {
    return allProductsCache
  }

try {
    // Fetch products from all endpoints in parallel
    const endpoints = [
      { url: "https://eb5cd2a292a9c526.mokky.dev/bed", category: "bed" },
      { url: "https://eb5cd2a292a9c526.mokky.dev/sofa", category: "sofa" },
      { url: "https://eb5cd2a292a9c526.mokky.dev/armchair", category: "armchair" },
    ]

const fetchPromises = endpoints.map((endpoint) =>
      fetch(endpoint.url)
        .then((response) => {
          if (!response.ok) {
            throw new Error(`Failed to fetch ${endpoint.category}: ${response.status}`)
          }
          return response.json()
        })
        .then((data) => {
          productsCache[endpoint.category] = data
          return data
        })
        .catch((error) => {
          console.error(`Error fetching ${endpoint.category}:`, error)
          return []
        }),
    )

const results = await Promise.all(fetchPromises)

// Combine all products
    allProductsCache = results.flat()
    return allProductsCache
  } catch (error) {
    console.error("Failed to fetch products:", error)
    return []
  }
}

export async function getProductsByCategory(category: string): Promise<Product[]> {
  // If we have the category cached, return it
  if (productsCache[category]?.length > 0) {
    return productsCache[category]
  }

// Otherwise fetch all products and filter
  await getProducts()
  return productsCache[category] || []
}

export async function getProductBySlug(slug: string): Promise<Product | null> {
  // Try to find in cache first
  if (allProductsCache.length > 0) {
    const product = allProductsCache.find((p) => p.slug === slug)
    if (product) return product
  }

// If not found or cache is empty, fetch all products
  const products = await getProducts()
  return products.find((product) => product.slug === slug) || null
}

export async function getProductById(id: string): Promise<Product | null> {
  // Try to find in cache first
  if (allProductsCache.length > 0) {
    const product = allProductsCache.find((p) => p.id === id)
    if (product) return product
  }

// If not found or cache is empty, fetch all products
  const products = await getProducts()
  return products.find((product) => product.id === id) || null
}

export async function getRelatedProducts(id: string, category: string): Promise<Product[]> {
  // Try to use cache if available
  let products: Product[] = []

if (productsCache[category]?.length > 0) {
    products = productsCache[category]
  } else {
    products = await getProducts()
  }

return products.filter((product) => product.id !== id && product.category === category).slice(0, 4)
}

export async function searchProducts(query: string): Promise<Product[]> {
  // Ensure we have products to search through
  if (allProductsCache.length === 0) {
    await getProducts()
  }

const lowercaseQuery = query.toLowerCase()

// Perform search on cached products for better performance
  return allProductsCache.filter(
    (product) =>
      product.name.toLowerCase().includes(lowercaseQuery) ||
      product.description.toLowerCase().includes(lowercaseQuery) ||
      product.category.toLowerCase().includes(lowercaseQuery) ||
      product.subcategory.toLowerCase().includes(lowercaseQuery),
  )
}

export async function filterProducts(filters: any): Promise<Product[]> {
  // Ensure we have products to filter
  if (allProductsCache.length === 0) {
    await getProducts()
  }

return allProductsCache.filter((product) => {
    let match = true

if (filters.category && filters.category.length > 0) {
      match = match && filters.category.includes(product.category)
    }

if (filters.priceRange) {
      match = match && product.price.current >= filters.priceRange[0] && product.price.current <= filters.priceRange[1]
    }

return match
  })
}

// Mock reviews data
const mockReviews: { [key: string]: Review[] } = {}

export async function getProductReviews(productId: string): Promise<Review[]> {
  // In a real app, this would fetch from an API
  // For now, return mock data or empty array
  return mockReviews[productId] || []
}

export async function submitProductReview(
  productId: string,
  reviewData: {
    rating: number
    name: string
    email: string
    title: string
    comment: string
  },
): Promise<Review> {
  // In a real app, this would submit to an API
  const newReview: Review = {
    id: Date.now().toString(),
    productId,
    userId: "user-" + Date.now(),
    userName: reviewData.name,
    rating: reviewData.rating,
    title: reviewData.title,
    comment: reviewData.comment,
    date: new Date().toISOString(),
    helpful: 0,
    notHelpful: 0,
  }

// Store in our mock data
  if (!mockReviews[productId]) {
    mockReviews[productId] = []
  }
  mockReviews[productId].unshift(newReview)

return newReview
}

[V0_FILE]typescriptreact:file="components/molecules/Breadcrumbs/index.tsx" isEdit="true"
import type React from "react"
import Link from "next/link"
import styles from "./Breadcrumbs.module.css"

interface BreadcrumbItem {
  label: string
  href: string
}

interface BreadcrumbsProps {
  items: BreadcrumbItem[]
}

const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items }) => {
  // Map category names to Russian
  const getCategoryName = (category: string): string => {
    const categoryMap: Record<string, string> = {
      bed: "Кровати",
      sofa: "Диваны",
      armchair: "Кресла",
      products: "Товары",
    }
    return categoryMap[category] || category
  }

return (
    <nav aria-label="Breadcrumb" className={styles.breadcrumbs}>
      <ol className={styles.list}>
        <li className={styles.item}>
          <Link href="/" className={styles.link}>
            Главная
          </Link>
          <span className={styles.separator}>/</span>
        </li>

{items.map((item, index) => (
          <li key={item.href} className={styles.item}>
            {index === items.length - 1 ? (
              <span className={styles.current} aria-current="page">
                {getCategoryName(item.label)}
              </span>
            ) : (
              <>
                <Link href={item.href} className={styles.link}>
                  {getCategoryName(item.label)}
                </Link>
                <span className={styles.separator}>/</span>
              </>
            )}
          </li>
        ))}
      </ol>
    </nav>
  )
}

export default Breadcrumbs

[V0_FILE]typescriptreact:file="context/CartContext.tsx" isEdit="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
import type { CartItem } from "@/types"

interface CartContextType {
  items: CartItem[]
  addItem: (item: CartItem) => void
  removeItem: (id: string) => void
  updateQuantity: (id: string, quantity: number) => void
  clearCart: () => void
  itemCount: number
  subtotal: number
  isEmpty: boolean
}

const CartContext = createContext<CartContextType | undefined>(undefined)

export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [items, setItems] = useState<CartItem[]>([])

useEffect(() => {
    // Load cart from localStorage on client-side
    const savedCart = localStorage.getItem("cart")
    if (savedCart) {
      try {
        setItems(JSON.parse(savedCart))
      } catch (error) {
        console.error("Failed to parse cart from localStorage:", error)
      }
    }
  }, [])

useEffect(() => {
    // Save cart to localStorage whenever it changes
    localStorage.setItem("cart", JSON.stringify(items))
  }, [items])

const addItem = (item: CartItem) => {
    setItems((prevItems) => {
      const existingItemIndex = prevItems.findIndex(
        (i) =>
          i.id === item.id &&
          i.options.width === item.options.width &&
          i.options.length === item.options.length &&
          i.options.liftingMechanism === item.options.liftingMechanism,
      )

if (existingItemIndex >= 0) {
        // Update quantity if item already exists
        const updatedItems = [...prevItems]
        updatedItems[existingItemIndex].quantity += item.quantity

// Remove item if quantity becomes 0 or negative
        if (updatedItems[existingItemIndex].quantity <= 0) {
          return prevItems.filter((_, index) => index !== existingItemIndex)
        }

return updatedItems
      } else {
        // Only add new item if quantity is positive
        if (item.quantity > 0) {
          return [...prevItems, item]
        }
        return prevItems
      }
    })
  }

const removeItem = (id: string) => {
    setItems((prevItems) => prevItems.filter((item) => item.id !== id))
  }

const updateQuantity = (id: string, quantity: number) => {
    setItems((prevItems) => {
      if (quantity <= 0) {
        return prevItems.filter((item) => item.id !== id)
      }
      return prevItems.map((item) => (item.id === id ? { ...item, quantity } : item))
    })
  }

const clearCart = () => {
    setItems([])
  }

const itemCount = items.reduce((total, item) => total + item.quantity, 0)

const subtotal = items.reduce((total, item) => total + item.price * item.quantity, 0)

const isEmpty = items.length === 0

return (
    <CartContext.Provider
      value={{
        items,
        addItem,
        removeItem,
        updateQuantity,
        clearCart,
        itemCount,
        subtotal,
        isEmpty,
      }}
    >
      {children}
    </CartContext.Provider>
  )
}

export const useCart = () => {
  const context = useContext(CartContext)
  if (context === undefined) {
    throw new Error("useCart must be used within a CartProvider")
  }
  return context
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from rubz1e2021-4185

More Templates Like This

About

Tags

Share

About

Tags

Share

More from rubz1e2021-4185

More Templates Like This