create

2026-08-19 17:54:11 +03:30
parent b065fac757
commit 149b77f734
80 changed files with 3015 additions and 92 deletions
@@ -0,0 +1,57 @@
+"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="py-10 md:py-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={4}
+            breakpoints={{
+              480: { slidesPerView: 5 },
+              640: { slidesPerView: 6 },
+              1024: { slidesPerView: 9, 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>
+  );
+}