"use client"; import { useEffect, useState } from "react"; import { Search, Grid3X3, List, Heart, Star, ShoppingCart, Filter } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Slider } from "@/components/ui/slider"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { Separator } from "@/components/ui/separator"; import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; import { ScrollArea } from "@/components/ui/scroll-area"; import { useProductStore } from "../store"; const categories = [ { id: "all", label: "All", icon: "🏪" }, { id: "phones", label: "Phones", icon: "📱" }, { id: "headsets", label: "Headsets", icon: "🎧" }, { id: "laptops", label: "Laptops", icon: "💻" }, { id: "tv", label: "TV sets", icon: "📺" }, { id: "sound", label: "Sound", icon: "🔊" }, { id: "watches", label: "Watches", icon: "⌚" }, { id: "others", label: "Others", icon: "💡" }, { id: "internet", label: "Internet", icon: "🌐" } ]; const brands = [ { id: "apple", label: "Apple" }, { id: "samsung", label: "Samsung" }, { id: "huawei", label: "Huawei" }, { id: "microsoft", label: "Microsoft" }, { id: "sony", label: "Sony" }, { id: "bose", label: "Bose" }, { id: "dell", label: "Dell" }, { id: "lg", label: "LG" }, { id: "jbl", label: "JBL" }, { id: "philips", label: "Philips" }, { id: "tp-link", label: "TP-Link" } ]; const colors = [ { id: "red", label: "Red", color: "bg-red-500" }, { id: "orange", label: "Orange", color: "bg-orange-500" }, { id: "blue", label: "Blue", color: "bg-blue-500" }, { id: "black", label: "Black", color: "bg-black" }, { id: "white", label: "White", color: "bg-white border" }, { id: "purple", label: "Purple", color: "bg-purple-500" }, { id: "gray", label: "Gray", color: "bg-gray-600" } ]; // Filter component for reuse in both desktop and mobile function FilterSection() { const { priceRange, selectedBrands, selectedColors, deliveryDate, selectedCategory, // Added selectedCategory setPriceRange, toggleBrand, toggleColor, setDeliveryDate, setSelectedCategory // Added setSelectedCategory } = useProductStore(); return (

Related categories

{categories.map((category) => (

{category.label}

))}

{/* Brands */}

Brands

{brands.map((brand) => (

toggleBrand(brand.id)} /> {brand.label}

))}

{/* Colors */}

Colors

{colors.map((color) => (

toggleColor(color.id)} />

{color.label}

))}

{/* Delivery Date */}

Delivery date

Any day

Today

Tomorrow

Within 7 days

{/* Price Range */}

Price

From setPriceRange([Number.parseInt(e.target.value) || 0, priceRange[1]]) } className="h-8" />

To setPriceRange([priceRange[0], Number.parseInt(e.target.value) || 3000]) } className="h-8" />

); } export default function ProductList() { const { filteredProducts, selectedCategory, searchQuery, viewMode, setSelectedCategory, setSearchQuery, setViewMode, applyFilters } = useProductStore(); const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false); // Apply initial filters on mount useEffect(() => { applyFilters(); }, [applyFilters]); return (

{/* Desktop Filters Sidebar */} {/* Main Content */}

{/* Controls Bar */}

{/* Top row - Mobile filter button and product count */}

{/* Mobile Filter Button */} Filters

{filteredProducts.length} products

{/* View Toggle - Desktop only */}

{/* Bottom row - Search */}

setSearchQuery(e.target.value)} className="w-full pl-10 sm:w-64" />

{/* View Toggle - Mobile */}

{/* Product Grid */} {filteredProducts.length === 0 ? (

No products found matching your filters.

Try adjusting your search criteria.

) : (

{filteredProducts.map((product: any) => (

{product.isNew && ( New )}

{product.title}

${product.price.toFixed(2)} {product.originalPrice && ( <> ${product.originalPrice.toFixed(2)} -{product.discount}% )}

{[...Array(5)].map((_, i) => ( ))}

{product.rating}

{product.orders} orders this week

Seller: {product.seller}

Delivery:{" "} {product.deliveryDays === 0 ? "Today" : product.deliveryDays === 1 ? "Tomorrow" : `${product.deliveryDays} days`}

))}

)}

); }