Add src/app/shop/page.tsx

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 (
+    <ProductCatalog
+      layout="page"
+      products={filteredProducts}
+      searchValue={searchValue}
+      onSearchChange={setSearchValue}
+      searchPlaceholder="Search products..."
+      filters={filters}
+      emptyMessage="No products match your criteria."
+      className="py-12"
+    />
+  );
+}