create banner

src/components/home/FeaturedCategories.tsx

@@ -1,8 +1,15 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { FreeMode } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/free-mode";
 import { Placeholder } from "@/components/ui/Placeholder";
 import { SectionTitle } from "@/components/ui/SectionTitle";
-import { categories } from "@/data/sample";
+import { EmptyState } from "@/components/ui/EmptyState";
+import type { Category } from "@/lib/meshkee";
 
-export function FeaturedCategories() {
+export function FeaturedCategories({ categories }: { categories: Category[] }) {
   return (
     <section className="py-10 md:py-14">
       <div className="mx-auto max-w-7xl px-4">
@@ -11,29 +18,47 @@ export function FeaturedCategories() {
           enTitle="Featured Categories"
           action="همه دسته‌ها"
         />
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-8">
-          {categories.map((cat, i) => (
-            <a
-              key={cat.id}
-              href="#"
-              className="animate-slide-in group flex flex-col items-center rounded-xl border border-border bg-surface p-3 transition-all hover:border-red hover:shadow-md"
-              style={{ animationDelay: `${i * 60}ms` }}
-            >
-              <Placeholder
-                src={cat.image}
-                alt={cat.name}
-                width="72px"
-                height="72px"
-                label="72×72"
-                className="mb-3 rounded-full transition-colors group-hover:border-red"
-              />
-              <span className="text-center text-xs font-medium leading-relaxed md:text-sm">
-                {cat.name}
-              </span>
-              <span className="mt-1 text-[11px] text-muted">{cat.count} محصول</span>
-            </a>
-          ))}
-        </div>
+        {categories.length === 0 ? (
+          <EmptyState message="هنوز دسته‌بندی‌ای ثبت نشده است." />
+        ) : (
+          <Swiper
+            modules={[FreeMode]}
+            dir="rtl"
+            slidesPerView={2.3}
+            spaceBetween={12}
+            breakpoints={{
+              640: { slidesPerView: 4.3, spaceBetween: 12 },
+              1024: { slidesPerView: 8, spaceBetween: 12 },
+            }}
+            freeMode={{ enabled: true, momentum: true, sticky: true }}
+            grabCursor
+            className="!px-1 !py-2"
+          >
+            {categories.map((cat, i) => (
+              <SwiperSlide key={cat.id}>
+                <a
+                  href="#"
+                  className="animate-slide-in group flex h-full flex-col items-center rounded-xl border border-border bg-surface p-3 transition-all hover:border-red hover:shadow-md"
+                  style={{ animationDelay: `${i * 60}ms` }}
+                >
+                  <Placeholder
+                    src={cat.image ?? "/images/placeholder.svg"}
+                    alt={cat.name}
+                    width="72px"
+                    height="72px"
+                    className="mb-3 rounded-full transition-colors group-hover:border-red"
+                  />
+                  <span className="w-full truncate text-center text-xs font-medium leading-relaxed md:text-sm">
+                    {cat.name}
+                  </span>
+                  {cat.count != null && (
+                    <span className="mt-1 text-[11px] text-muted">{cat.count} محصول</span>
+                  )}
+                </a>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        )}
       </div>
     </section>
   );