65 lines
2.9 KiB
TypeScript
65 lines
2.9 KiB
TypeScript
import { Children, type ReactNode } from "react";
|
|
import useEmblaCarousel from "embla-carousel-react";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { cls } from "@/lib/utils";
|
|
import { useCarouselControls } from "@/hooks/useCarouselControls";
|
|
|
|
interface GridOrCarouselProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
const GridOrCarousel = ({ children }: GridOrCarouselProps) => {
|
|
const [emblaRef, emblaApi] = useEmblaCarousel({ dragFree: true, containScroll: "trimSnaps" });
|
|
const { prevDisabled, nextDisabled, scrollPrev, scrollNext, scrollProgress } = useCarouselControls(emblaApi);
|
|
const items = Children.toArray(children);
|
|
const count = items.length;
|
|
|
|
if (count <= 3) {
|
|
return (
|
|
<div className={cls("grid grid-cols-1 gap-5 mx-auto w-content-width", count === 2 && "md:grid-cols-2", count === 3 && "md:grid-cols-3")}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const responsiveSwitch = count === 4;
|
|
|
|
return (
|
|
<>
|
|
{responsiveSwitch && (
|
|
<div className="hidden 2xl:grid grid-cols-4 gap-5 mx-auto w-content-width">{children}</div>
|
|
)}
|
|
<div className={cls("flex flex-col gap-5 w-full overflow-hidden", responsiveSwitch && "2xl:hidden")}>
|
|
<div ref={emblaRef} className="w-full cursor-grab">
|
|
<div className="flex gap-4 items-stretch">
|
|
<div className="shrink-0 w-carousel-padding" />
|
|
{items.map((child, i) => (
|
|
<div key={i} className="shrink-0 *:h-full w-carousel-item-3 2xl:w-carousel-item-4">{child}</div>
|
|
))}
|
|
<div className="shrink-0 w-carousel-padding" />
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full">
|
|
<div className="shrink-0 w-carousel-padding-controls" />
|
|
<div className="flex justify-between items-center w-full">
|
|
<div className="relative h-2 w-1/2 card rounded overflow-hidden">
|
|
<div className="absolute top-0 bottom-0 -left-full w-full primary-button rounded" style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }} />
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button onClick={scrollPrev} disabled={prevDisabled} type="button" aria-label="Previous" className="flex items-center justify-center h-8 aspect-square secondary-button rounded cursor-pointer disabled:opacity-50">
|
|
<ChevronLeft className="h-2/5 aspect-square text-secondary-cta-text" />
|
|
</button>
|
|
<button onClick={scrollNext} disabled={nextDisabled} type="button" aria-label="Next" className="flex items-center justify-center h-8 aspect-square secondary-button rounded cursor-pointer disabled:opacity-50">
|
|
<ChevronRight className="h-2/5 aspect-square text-secondary-cta-text" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="shrink-0 w-carousel-padding-controls" />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default GridOrCarousel;
|