90 lines
3.5 KiB
TypeScript
90 lines
3.5 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Footer } from "@/components/footer";
|
|
import { ProductCard, Product } from "@/components/product-card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useState } from "react";
|
|
|
|
const allProducts: Product[] = [
|
|
{
|
|
id: "1",
|
|
name: "Classic Oxford Leather",
|
|
price: 189,
|
|
category: "Formal",
|
|
image: "https://images.unsplash.com/photo-1653868250450-b83e6263d427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwzfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080",
|
|
isNew: true
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Urban Runner Pro",
|
|
price: 129,
|
|
category: "Sneakers",
|
|
image: "https://images.unsplash.com/photo-1600202280810-e0b3f6f1933e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Elegance Stiletto",
|
|
price: 249,
|
|
category: "Women",
|
|
image: "https://images.unsplash.com/photo-1618274158630-bc47a614b3a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwyfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080",
|
|
isSale: true
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Heritage Brogue",
|
|
price: 210,
|
|
category: "Formal",
|
|
image: "https://images.unsplash.com/photo-1664505504065-31f8937d2261?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw0fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Casual Loafer",
|
|
price: 145,
|
|
category: "Casual",
|
|
image: "https://images.unsplash.com/photo-1646139498425-5bceb422ba6a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw1fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
|
|
}
|
|
];
|
|
|
|
const categories = ["All", "Formal", "Sneakers", "Women", "Casual"];
|
|
|
|
export default function ShopPage() {
|
|
const [activeCategory, setActiveCategory] = useState("All");
|
|
|
|
const filteredProducts = activeCategory === "All"
|
|
? allProducts
|
|
: allProducts.filter(p => p.category === activeCategory);
|
|
|
|
return (
|
|
<main className="min-h-screen pt-32">
|
|
<Container className="pb-24">
|
|
<div className="mb-12">
|
|
<Heading>Shop Collection</Heading>
|
|
<Subheading className="mt-2">Explore our full range of premium footwear.</Subheading>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-4 mb-12">
|
|
{categories.map((cat) => (
|
|
<Button
|
|
key={cat}
|
|
variant={activeCategory === cat ? "default" : "outline"}
|
|
onClick={() => setActiveCategory(cat)}
|
|
className="rounded-full"
|
|
>
|
|
{cat}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{filteredProducts.map((product) => (
|
|
<ProductCard key={product.id} product={product} />
|
|
))}
|
|
</div>
|
|
</Container>
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|