58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import Link from "next/link";
|
|
import type { CategoryNode } from "@/lib/types";
|
|
import SectionHeading from "./ui/SectionHeading";
|
|
|
|
const PLACEHOLDER_IMAGES = [
|
|
"/images/categories/girls.svg",
|
|
"/images/categories/boys.svg",
|
|
"/images/categories/baby.svg",
|
|
"/images/categories/party.svg",
|
|
"/images/categories/sets.svg",
|
|
"/images/categories/outerwear.svg",
|
|
];
|
|
|
|
export default function Categories({ categoryColumns }: { categoryColumns: CategoryNode[] }) {
|
|
const items = categoryColumns.flatMap((col) => col.children);
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<section className="pt-5 md:pt-7 pb-10 md:pb-14">
|
|
<div className="boxed">
|
|
<SectionHeading kicker="Categories" title="دستهبندی محصولات" />
|
|
|
|
<div className="bg-gold rounded-2xl md:rounded-3xl py-8 px-4 md:px-8">
|
|
<Swiper
|
|
spaceBetween={10}
|
|
slidesPerView={2}
|
|
breakpoints={{
|
|
768: { slidesPerView: 3 },
|
|
1024: { slidesPerView: 6, spaceBetween: 14 },
|
|
1280: { slidesPerView: 8, spaceBetween: 14 },
|
|
}}
|
|
>
|
|
{items.map((cat, i) => (
|
|
<SwiperSlide key={cat.id}>
|
|
<Link href={`/products?category=${cat.slug}`} className="group block text-center">
|
|
<div className="overflow-hidden rounded-lg bg-white">
|
|
<img
|
|
src={PLACEHOLDER_IMAGES[i % PLACEHOLDER_IMAGES.length]}
|
|
alt={cat.nameFa}
|
|
className="w-full aspect-square object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
<span className="mt-2 block text-xs md:text-sm font-bold text-ink">
|
|
{cat.nameFa}
|
|
</span>
|
|
</Link>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|