carousel components

app/home/components/CategorySection.tsx

@@ -1,8 +1,4 @@
-"use client";
-
-import { ArrowLeft, ArrowRight } from "iconsax-reactjs";
-import useEmblaCarousel from "embla-carousel-react";
-import { useEffect, useState } from "react";
+import { Carousel, CarouselControls, CarouselSlide, CarouselTrack } from "@/app/components/Carousel";
 import CategoryCard from "./CategoryCard";
 
 const categories = [
@@ -19,72 +15,22 @@ 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">
-          <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" />
-          </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" />
-          </button>
+      <Carousel slidesPerView={5} gap={40}>
+        <div className="flex justify-between items-center">
+          <div className="font-bold text-2xl">دسته بندی های محصولات</div>
+          <CarouselControls prevLabel="دسته‌بندی‌های قبلی" nextLabel="دسته‌بندی‌های بعدی" />
         </div>
-      </div>
 
-      <div className="mt-12 overflow-hidden" ref={emblaRef}>
-        <div className="flex touch-pan-y gap-10">
+        <CarouselTrack className="mt-12">
           {categories.map((title) => (
-            <div
-              key={title}
-              className="min-w-0 shrink-0 grow-0 basis-[calc((100%-10rem)/5)]"
-            >
+            <CarouselSlide key={title}>
               <CategoryCard title={title} />
-            </div>
+            </CarouselSlide>
           ))}
-        </div>
-      </div>
+        </CarouselTrack>
+      </Carousel>
     </div>
   );
 };