carousel components

2026-07-18 11:25:53 +03:30
parent f9f828097b
commit 7bb9240f21
2 changed files with 193 additions and 64 deletions
@@ -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;