74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { BlurImage } from "@/components/blur-image";
|
|
import Link from "next/link";
|
|
|
|
const categories = [
|
|
{
|
|
name: "Living Room",
|
|
image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=600&q=80",
|
|
count: 120,
|
|
},
|
|
{
|
|
name: "Bedroom",
|
|
image: "https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?w=600&q=80",
|
|
count: 95,
|
|
},
|
|
{
|
|
name: "Dining Room",
|
|
image: "https://images.unsplash.com/photo-1617806118233-18e1de247200?w=600&q=80",
|
|
count: 78,
|
|
},
|
|
{
|
|
name: "Office",
|
|
image: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80",
|
|
count: 65,
|
|
},
|
|
{
|
|
name: "Outdoor",
|
|
image: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=600&q=80",
|
|
count: 42,
|
|
},
|
|
{
|
|
name: "Storage",
|
|
image: "https://images.unsplash.com/photo-1595428774223-ef52624120d2?w=600&q=80",
|
|
count: 58,
|
|
},
|
|
];
|
|
|
|
export function Categories() {
|
|
return (
|
|
<section className="py-20">
|
|
<Container>
|
|
<div className="text-center mb-12">
|
|
<Heading>Shop by Category</Heading>
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
{categories.map((category) => (
|
|
<Link key={category.name} href={`/categories/${category.name.toLowerCase().replace(" ", "-")}`}>
|
|
<Card className="group cursor-pointer hover:shadow-lg transition-all duration-300">
|
|
<CardContent className="p-0">
|
|
<div className="relative h-40 overflow-hidden rounded-t-lg">
|
|
<BlurImage
|
|
src={category.image}
|
|
alt={category.name}
|
|
fill
|
|
className="object-cover group-hover:scale-110 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="p-4 text-center">
|
|
<h3 className="font-semibold text-sm mb-1">{category.name}</h3>
|
|
<p className="text-xs text-neutral-500">{category.count} items</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|