carousel components
This commit is contained in:
hamid zarghami
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user