diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx new file mode 100644 index 0000000..ac44a1f --- /dev/null +++ b/src/pages/Search.tsx @@ -0,0 +1,137 @@ +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 { Search as SearchIcon, Star, Heart, X, Sparkles } from "lucide-react"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; + +const allProducts = [ + { id: 1, name: "Classic Leather Jacket", price: 189, gradient: "from-rose-100 to-stone-200", rating: 5, category: "Outerwear" }, + { id: 2, name: "Silk Evening Dress", price: 245, gradient: "from-amber-100 to-orange-200", rating: 5, category: "Dresses" }, + { id: 3, name: "Cashmere Knit Sweater", price: 128, gradient: "from-stone-100 to-stone-300", rating: 4, category: "Knitwear" }, + { id: 4, name: "Linen Wide-Leg Trousers", price: 95, gradient: "from-rose-50 to-amber-100", rating: 4, category: "Bottoms" }, + { id: 5, name: "Italian Leather Handbag", price: 320, gradient: "from-stone-200 to-rose-100", rating: 5, category: "Accessories" }, + { id: 6, name: "Merino Wool Blazer", price: 165, gradient: "from-amber-50 to-stone-200", rating: 4, category: "Outerwear" }, + { id: 7, name: "Organic Cotton Tee", price: 45, gradient: "from-rose-100 to-rose-200", rating: 4, category: "Tops" }, + { id: 8, name: "Velvet Midi Skirt", price: 115, gradient: "from-stone-300 to-stone-100", rating: 5, category: "Bottoms" }, + { id: 9, name: "Suede Ankle Boots", price: 198, gradient: "from-amber-200 to-stone-200", rating: 5, category: "Footwear" }, + { id: 10, name: "Satin Blouse", price: 89, gradient: "from-rose-50 to-rose-100", rating: 4, category: "Tops" }, + { id: 11, name: "Tailored Wool Coat", price: 385, gradient: "from-stone-200 to-stone-400", rating: 5, category: "Outerwear" }, + { id: 12, name: "Pearl Drop Earrings", price: 68, gradient: "from-amber-100 to-rose-100", rating: 4, category: "Accessories" }, +]; + +const filterChips = ["All", "Outerwear", "Dresses", "Tops", "Bottoms", "Accessories", "Footwear", "Knitwear"]; + +export default function SearchPage() { + const [query, setQuery] = useState(""); + const [activeFilter, setActiveFilter] = useState("All"); + + const filtered = allProducts.filter((p) => { + const matchesQuery = query.length === 0 || p.name.toLowerCase().includes(query.toLowerCase()); + const matchesFilter = activeFilter === "All" || p.category === activeFilter; + return matchesQuery && matchesFilter; + }); + + const renderStars = (count: number) => + Array.from({ length: 5 }, (_, i) => ( + + )); + + return ( +
+
+ +
+ {/* Search Input */} +
+
+ + setQuery(e.target.value)} + autoFocus + className="pl-12 pr-10 h-14 text-lg rounded-full border-stone-200 focus-visible:ring-rose-500 focus-visible:ring-2 focus-visible:border-rose-400 transition-shadow" + /> + {query && ( + + )} +
+
+ + {/* Results heading */} + {query && ( +

+ {filtered.length} result{filtered.length !== 1 ? "s" : ""} for "{query}" +

+ )} + + {/* Filter Chips */} +
+ {filterChips.map((chip) => ( + + ))} +
+ + {/* Results */} + {filtered.length > 0 ? ( +
+ {filtered.map((product) => ( + + +
+
+
+
+
Image
+ +
+ +

{product.name}

+
{renderStars(product.rating)}
+

\${product.price}

+ + + + ))} +
+ ) : ( +
+
+ +
+

No results found

+

+ We couldn't find anything matching your search. Try different keywords or browse our categories. +

+
+ Summer Dresses + Leather Jackets + Cashmere + Accessories +
+
+ )} +
+ +
+ ); +}