diff --git a/src/pages/Products.tsx b/src/pages/Products.tsx new file mode 100644 index 0000000..8374acc --- /dev/null +++ b/src/pages/Products.tsx @@ -0,0 +1,303 @@ +import { useState } from "react"; +import { toast } from "sonner"; +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Input } from "@/components/ui/input"; +import { Separator } from "@/components/ui/separator"; +import { + Dialog, DialogContent, DialogTrigger, +} from "@/components/ui/dialog"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + Star, Heart, SlidersHorizontal, ChevronLeft, ChevronRight, Grid3X3, LayoutList, X, ShoppingBag +} from "lucide-react"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; + +const allProducts = [ + { id: 1, name: "Classic Leather Jacket", price: 189, originalPrice: 249, rating: 5, badge: "Sale", gradient: "from-rose-100 to-stone-200", brand: "StyleHaus", size: ["S","M","L","XL"], color: "black" }, + { id: 2, name: "Silk Evening Dress", price: 245, originalPrice: null, rating: 5, badge: "New", gradient: "from-amber-100 to-orange-200", brand: "Luxe", size: ["XS","S","M"], color: "rose" }, + { id: 3, name: "Cashmere Knit Sweater", price: 128, originalPrice: null, rating: 4, badge: null, gradient: "from-stone-100 to-stone-300", brand: "StyleHaus", size: ["S","M","L"], color: "stone" }, + { id: 4, name: "Linen Wide-Leg Trousers", price: 95, originalPrice: 135, rating: 4, badge: "Sale", gradient: "from-rose-50 to-amber-100", brand: "Atelier", size: ["S","M","L","XL"], color: "cream" }, + { id: 5, name: "Italian Leather Handbag", price: 320, originalPrice: null, rating: 5, badge: "New", gradient: "from-stone-200 to-rose-100", brand: "Luxe", size: ["One Size"], color: "brown" }, + { id: 6, name: "Merino Wool Blazer", price: 165, originalPrice: null, rating: 4, badge: null, gradient: "from-amber-50 to-stone-200", brand: "StyleHaus", size: ["S","M","L","XL","XXL"], color: "navy" }, + { id: 7, name: "Organic Cotton Tee", price: 45, originalPrice: null, rating: 4, badge: null, gradient: "from-rose-100 to-rose-200", brand: "Atelier", size: ["XS","S","M","L","XL"], color: "white" }, + { id: 8, name: "Velvet Midi Skirt", price: 115, originalPrice: 155, rating: 5, badge: "Sale", gradient: "from-stone-300 to-stone-100", brand: "Luxe", size: ["XS","S","M","L"], color: "rose" }, + { id: 9, name: "Suede Ankle Boots", price: 198, originalPrice: null, rating: 5, badge: "New", gradient: "from-amber-200 to-stone-200", brand: "StyleHaus", size: ["36","37","38","39","40","41"], color: "brown" }, + { id: 10, name: "Satin Blouse", price: 89, originalPrice: null, rating: 4, badge: null, gradient: "from-rose-50 to-rose-100", brand: "Atelier", size: ["XS","S","M","L"], color: "cream" }, + { id: 11, name: "Tailored Wool Coat", price: 385, originalPrice: null, rating: 5, badge: null, gradient: "from-stone-200 to-stone-400", brand: "Luxe", size: ["S","M","L","XL"], color: "stone" }, + { id: 12, name: "Pearl Drop Earrings", price: 68, originalPrice: null, rating: 4, badge: "New", gradient: "from-amber-100 to-rose-100", brand: "Luxe", size: ["One Size"], color: "gold" }, +]; + +const colorOptions = [ + { name: "Black", value: "black", class: "bg-stone-900" }, + { name: "Rose", value: "rose", class: "bg-rose-400" }, + { name: "Stone", value: "stone", class: "bg-stone-400" }, + { name: "Cream", value: "cream", class: "bg-amber-100 border border-stone-200" }, + { name: "Brown", value: "brown", class: "bg-amber-700" }, + { name: "Navy", value: "navy", class: "bg-blue-900" }, + { name: "White", value: "white", class: "bg-white border border-stone-200" }, + { name: "Gold", value: "gold", class: "bg-amber-400" }, +]; + +export default function ProductsPage() { + const [sort, setSort] = useState("featured"); + const [page, setPage] = useState(1); + const [selectedBrands, setSelectedBrands] = useState([]); + const [selectedColors, setSelectedColors] = useState([]); + const [priceRange, setPriceRange] = useState<[number, number]>([0, 500]); + const [showFilters, setShowFilters] = useState(false); + const [wishlist, setWishlist] = useState([]); + const [quickView, setQuickView] = useState(null); + const [selectedSize, setSelectedSize] = useState(""); + + const toggleBrand = (b: string) => + setSelectedBrands((prev) => prev.includes(b) ? prev.filter((x) => x !== b) : [...prev, b]); + + const toggleColor = (c: string) => + setSelectedColors((prev) => prev.includes(c) ? prev.filter((x) => x !== c) : [...prev, c]); + + const toggleWishlist = (id: number) => { + const isAdding = !wishlist.includes(id); + setWishlist((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]); + if (isAdding) toast.success("Added to wishlist!"); + }; + + const filtered = allProducts.filter((p) => { + if (selectedBrands.length && !selectedBrands.includes(p.brand)) return false; + if (selectedColors.length && !selectedColors.includes(p.color)) return false; + if (p.price < priceRange[0] || p.price > priceRange[1]) return false; + return true; + }); + + const renderStars = (count: number) => + Array.from({ length: 5 }, (_, i) => ( + + )); + + const Sidebar = () => ( +
+
+

Price Range

+
+ setPriceRange([+e.target.value, priceRange[1]])} className="w-20 h-8 text-xs" /> + to + setPriceRange([priceRange[0], +e.target.value])} className="w-20 h-8 text-xs" /> +
+
+ +
+

Brand

+
+ {["StyleHaus", "Luxe", "Atelier"].map((b) => ( + + ))} +
+
+ +
+

Color

+
+ {colorOptions.map((c) => ( +
+
+ + +
+ ); + + return ( +
+
+ +
+ {/* Top Bar */} +
+
+

All Products

+

{filtered.length} products found

+
+
+ + +
+
+ + {/* Active Filters */} + {(selectedBrands.length > 0 || selectedColors.length > 0) && ( +
+ {selectedBrands.map((b) => ( + toggleBrand(b)}> + {b} + + ))} + {selectedColors.map((c) => ( + toggleColor(c)}> + {c} + + ))} +
+ )} + +
+ {/* Sidebar */} + + + {/* Product Grid */} +
+
+ {filtered.map((product, i) => ( + { setQuickView(open ? product.id : null); if (!open) setSelectedSize(""); }}> + +
+
+ +

{product.name}

+
+
{renderStars(product.rating)}
+
+ \${product.price} + {product.originalPrice && ( + \${product.originalPrice} + )} +
+
{[...Array(5)].map((_, j) => )}
(128)
+ {i < 2 && Only 3 left} + + + + + +
+ {/* Product Image */} +
+
+
+
+
Product Image
+ {product.badge && ( + + {product.badge} + + )} +
+ {/* Product Details */} +
+

{product.brand}

+

{product.name}

+
{renderStars(product.rating)}
+
+ \${product.price} + {product.originalPrice && ( + \${product.originalPrice} + )} +
+

Premium quality crafted with the finest materials. Designed for comfort and style that lasts.

+ +
+

Size

+
+ {product.size.map((s) => ( + + ))} +
+
+
+ + +
+
+
+ + + ))} +
+ + {/* Pagination */} +
+ + {[1, 2, 3].map((p) => ( + + ))} + +
+
+
+
+ +
+ ); +}