carousel category section

app/home/components/CategorySection.tsx

@@ -1,21 +1,90 @@
+"use client";
+
 import { ArrowLeft, ArrowRight } from "iconsax-reactjs";
+import useEmblaCarousel from "embla-carousel-react";
+import { useEffect, useState } from "react";
+import CategoryCard from "./CategoryCard";
+
+const categories = [
+  "هدایای تبلیغاتی",
+  "کارت ویزیت",
+  "بروشور و کاتالوگ",
+  "استیکر و لیبل",
+  "پاکت و جعبه",
+  "سربرگ و اوراق اداری",
+  "بنر و فلکس",
+  "تقویم و سررسید",
+  "چاپ روی پارچه",
+  "لوازم نمایشگاهی",
+];
 
 const CategorySection = () => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    align: "start",
+    direction: "rtl",
+    slidesToScroll: 5,
+    containScroll: "trimSnaps",
+  });
+
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    const updateButtons = () => {
+      setCanScrollPrev(emblaApi.canScrollPrev());
+      setCanScrollNext(emblaApi.canScrollNext());
+    };
+
+    updateButtons();
+    emblaApi.on("select", updateButtons);
+    emblaApi.on("reInit", updateButtons);
+
+    return () => {
+      emblaApi.off("select", updateButtons);
+      emblaApi.off("reInit", updateButtons);
+    };
+  }, [emblaApi]);
+
   return (
     <div className="mt-[120px] px-[120px]">
       <div className="flex justify-between items-center">
         <div className="font-bold text-2xl">دسته بندی های محصولات</div>
         <div className="flex gap-2">
-          <div className="size-8 bg-primary rounded-full flex justify-center items-center">
+          <button
+            type="button"
+            aria-label="دسته‌بندی‌های قبلی"
+            disabled={!canScrollPrev}
+            onClick={() => emblaApi?.scrollPrev()}
+            className="size-8 bg-primary rounded-full flex justify-center items-center disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
+          >
             <ArrowRight size={20} color="white" />
-          </div>
-          <div className="size-8 bg-primary rounded-full flex justify-center items-center">
+          </button>
+          <button
+            type="button"
+            aria-label="دسته‌بندی‌های بعدی"
+            disabled={!canScrollNext}
+            onClick={() => emblaApi?.scrollNext()}
+            className="size-8 bg-primary rounded-full flex justify-center items-center disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
+          >
             <ArrowLeft size={20} color="white" />
-          </div>
+          </button>
         </div>
       </div>
 
-      <div className="mt-12"></div>
+      <div className="mt-12 overflow-hidden" ref={emblaRef}>
+        <div className="flex touch-pan-y gap-10">
+          {categories.map((title) => (
+            <div
+              key={title}
+              className="min-w-0 shrink-0 grow-0 basis-[calc((100%-10rem)/5)]"
+            >
+              <CategoryCard title={title} />
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 };