42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { categories } from "@/lib/data";
|
|
import { DrawFrame } from "./DrawFrame";
|
|
|
|
export function Categories() {
|
|
return (
|
|
<section className="container-site mt-12">
|
|
<div className="flex items-end justify-between mb-6">
|
|
<h2 className="section-title">دستهبندیها</h2>
|
|
<Link href="/products" className="text-sm text-brand">
|
|
همه محصولات
|
|
</Link>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4">
|
|
{categories.map((cat) => (
|
|
<Link
|
|
key={cat.slug}
|
|
href={`/products/${cat.slug}`}
|
|
className="draw-frame-host relative flex items-center gap-3 rounded-2xl border border-black/5 bg-zinc-50 px-3 py-2 text-brand"
|
|
>
|
|
<Image
|
|
src={cat.image}
|
|
alt={cat.name}
|
|
width={88}
|
|
height={88}
|
|
className="size-[72px] sm:size-20 shrink-0 object-contain"
|
|
/>
|
|
<span className="min-w-0">
|
|
<span className="block text-lg font-medium text-ink leading-none">{cat.name}</span>
|
|
<span dir="ltr" className="mt-1 block font-oswald text-[10px] font-normal tracking-[0.32em] text-zinc-400 uppercase">
|
|
{cat.english}
|
|
</span>
|
|
</span>
|
|
<DrawFrame />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|