diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx new file mode 100644 index 0000000..09bc98b --- /dev/null +++ b/src/app/shop/page.tsx @@ -0,0 +1,73 @@ +'use client'; + +import { useState } from 'react'; +import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog'; + +const categories = ["Living Room", "Bedroom", "Kitchen", "Workspace", "Decor"]; + +const productBases = { + "Living Room": ["Sofa", "Coffee Table", "Armchair", "TV Stand", "Rug", "Floor Lamp", "Bookshelf", "Console Table", "Ottoman", "Side Table", "Media Console", "Accent Chair"], + "Bedroom": ["Bed Frame", "Mattress", "Nightstand", "Dresser", "Wardrobe", "Vanity Table", "Bench", "Storage Ottoman", "Wall Mirror", "Headboard", "Chest of Drawers", "Bedside Lamp"], + "Kitchen": ["Dining Table", "Dining Chair", "Bar Stool", "Kitchen Island", "Pantry Cabinet", "Buffet Cabinet", "Baker's Rack", "Wine Cabinet", "Serving Cart", "Dishwasher", "Microwave Oven", "Cooktop"], + "Workspace": ["Office Desk", "Ergonomic Chair", "Monitor Stand", "File Cabinet", "Bookshelf", "Desk Lamp", "Whiteboard", "Printer", "Shredder", "Keyboard", "Mousepad", "Storage Bins"], + "Decor": ["Wall Art", "Vase", "Candle Holder", "Decorative Bowl", "Throw Blanket", "Accent Pillow", "Sculpture", "Planter", "Photo Frame", "Artificial Plant", "Area Rug", "Table Runner"] +}; + +let productIdCounter = 1; +const generatedProductsData = []; + +for (let i = 0; i < 12; i++) { // 12 products per category for 60 total + for (const category of categories) { + const nameBase = productBases[category][i % productBases[category].length]; + const name = `${nameBase} ${i + 1}`; + const price = (Math.random() * (1000 - 50) + 50).toFixed(2); + const rating = (Math.floor(Math.random() * (5 - 3.5 + 1) / 0.5) * 0.5 + 3.5).toFixed(1); + const reviewCount = `${Math.floor(Math.random() * 500) + 10} reviews`; + const imageSrc = `https://picsum.photos/seed/${productIdCounter * 123}/400/300`; + const imageAlt = `${name} in ${category}`; + + generatedProductsData.push({ + id: `prod-${productIdCounter++}`, + category: category, + name: name, + price: `$${price}`, + rating: parseFloat(rating), + reviewCount: reviewCount, + imageSrc: imageSrc, + imageAlt: imageAlt, + }); + } +} + +export default function ShopPage() { + const [searchValue, setSearchValue] = useState(''); + const [selectedCategory, setSelectedCategory] = useState('All'); + + const filteredProducts = generatedProductsData.filter(product => { + const matchesSearch = product.name.toLowerCase().includes(searchValue.toLowerCase()); + const matchesCategory = selectedCategory === 'All' || product.category === selectedCategory; + return matchesSearch && matchesCategory; + }); + + const filters = [ + { + label: 'Category', + options: ['All', ...categories], + selected: selectedCategory, + onChange: (value: string) => setSelectedCategory(value), + }, + ]; + + return ( + + ); +}