carousel components

app/components/Carousel.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { cn } from "@/app/lib/cn";
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "iconsax-reactjs";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type FC,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+type CarouselApi = {
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  slidesPerView: number;
+  gap: number;
+};
+
+type ViewportRef = (node: HTMLElement | null) => void;
+
+const CarouselContext = createContext<CarouselApi | null>(null);
+const CarouselViewportContext = createContext<ViewportRef | null>(null);
+
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error("Carousel components must be used within <Carousel>");
+  }
+  return context;
+}
+
+type CarouselProps = {
+  children: ReactNode;
+  slidesPerView?: number;
+  slidesToScroll?: number;
+  gap?: number;
+  direction?: "rtl" | "ltr";
+  className?: string;
+};
+
+const Carousel: FC<CarouselProps> = ({
+  children,
+  slidesPerView = 5,
+  slidesToScroll,
+  gap = 40,
+  direction = "rtl",
+  className,
+}) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    align: "start",
+    direction,
+    slidesToScroll: slidesToScroll ?? slidesPerView,
+    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 (
+    <CarouselContext.Provider
+      value={{
+        scrollPrev: () => emblaApi?.scrollPrev(),
+        scrollNext: () => emblaApi?.scrollNext(),
+        canScrollPrev,
+        canScrollNext,
+        slidesPerView,
+        gap,
+      }}
+    >
+      <CarouselViewportContext.Provider value={emblaRef}>
+        <div className={className}>{children}</div>
+      </CarouselViewportContext.Provider>
+    </CarouselContext.Provider>
+  );
+};
+
+type CarouselControlsProps = {
+  className?: string;
+  prevLabel?: string;
+  nextLabel?: string;
+};
+
+const CarouselControls: FC<CarouselControlsProps> = ({
+  className,
+  prevLabel = "قبلی",
+  nextLabel = "بعدی",
+}) => {
+  const { scrollPrev, scrollNext, canScrollPrev, canScrollNext } = useCarousel();
+
+  return (
+    <div className={cn("flex gap-2", className)}>
+      <button
+        type="button"
+        aria-label={prevLabel}
+        disabled={!canScrollPrev}
+        onClick={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={nextLabel}
+        disabled={!canScrollNext}
+        onClick={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>
+    </div>
+  );
+};
+
+type CarouselTrackProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+const CarouselTrack: FC<CarouselTrackProps> = ({ children, className }) => {
+  const emblaRef = useContext(CarouselViewportContext);
+  const { gap } = useCarousel();
+
+  if (!emblaRef) {
+    throw new Error("CarouselTrack must be used within <Carousel>");
+  }
+
+  return (
+    <div className={cn("overflow-hidden", className)} ref={emblaRef}>
+      <div className="flex touch-pan-y" style={{ gap }}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type CarouselSlideProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+};
+
+const CarouselSlide: FC<CarouselSlideProps> = ({ children, className, style, ...rest }) => {
+  const { slidesPerView, gap } = useCarousel();
+  const totalGap = (slidesPerView - 1) * gap;
+
+  return (
+    <div
+      className={cn("min-w-0 shrink-0 grow-0", className)}
+      style={{
+        flexBasis: `calc((100% - ${totalGap}px) / ${slidesPerView})`,
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { Carousel, CarouselControls, CarouselSlide, CarouselTrack };
+export default Carousel;

app/home/components/CategorySection.tsx

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