first commit

2026-09-02 17:03:23 +03:30
commit 1bd131e9d8
91 changed files with 11211 additions and 0 deletions
@@ -0,0 +1,61 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { FreeMode } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import { categoryHref } from "@/lib/slug";
+import type { CategoryNode, StaticImageSlot } from "@/lib/types";
+
+// Circular category thumbnails. The "categories" static-image slot has no
+// per-category id, so its images (kind: list, duplicatable) are matched
+// positionally to the category list, in the same order the business fills
+// them in — each still links to its real category page, only the art swaps.
+// A category past the end of the slot, or the whole thing when the slot is
+// empty, keeps its placeholder at public/images/categories/{id}.svg.
+export default function CategoryCarousel({
+  categories,
+  slot,
+}: {
+  categories: CategoryNode[];
+  slot?: StaticImageSlot;
+}) {
+  if (categories.length === 0) return null;
+  const slotImages = slot?.images ?? [];
+
+  return (
+    <section className="boxed mt-8" aria-label="دسته‌بندی محصولات">
+      <Swiper
+        modules={[FreeMode]}
+        dir="rtl"
+        freeMode
+        slidesPerView={3.5}
+        spaceBetween={12}
+        breakpoints={{
+          480: { slidesPerView: 4.5 },
+          768: { slidesPerView: 6.5 },
+          1024: { slidesPerView: 9 },
+        }}
+      >
+        {categories.map((cat, i) => {
+          const label = cat.nameFa || cat.name;
+          const art = slotImages[i]?.url || `/images/categories/${cat.id}.svg`;
+          return (
+            <SwiperSlide key={cat.id}>
+              <Link href={categoryHref(cat.id, cat.nameFa, cat.name)} className="group flex flex-col items-center gap-2">
+                <span className="relative size-[90px] overflow-hidden rounded-full bg-surface transition group-hover:bg-brand-soft">
+                  <Image src={art} alt={label} fill sizes="90px" className="object-contain p-2" />
+                </span>
+                <span className="text-center text-[12.5px] text-ink transition group-hover:text-brand">
+                  {label}
+                </span>
+              </Link>
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
+    </section>
+  );
+}