Template
82 lines
4.3 KiB
TypeScript
82 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
|
|
import { ArrowLeft, ArrowRight } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type CarouselApi = UseEmblaCarouselType[1];
|
|
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
type CarouselOptions = UseCarouselParameters[0];
|
|
type CarouselPlugin = UseCarouselParameters[1];
|
|
|
|
type CarouselContextValue = {
|
|
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
|
|
api: CarouselApi;
|
|
scrollPrev: () => void;
|
|
scrollNext: () => void;
|
|
canScrollPrev: boolean;
|
|
canScrollNext: boolean;
|
|
orientation: 'horizontal' | 'vertical';
|
|
};
|
|
|
|
const CarouselContext = React.createContext<CarouselContextValue | null>(null);
|
|
|
|
function useCarousel() {
|
|
const context = React.useContext(CarouselContext);
|
|
if (!context) throw new Error('useCarousel must be used within a Carousel');
|
|
return context;
|
|
}
|
|
|
|
function Carousel({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }: React.ComponentProps<'div'> & { orientation?: 'horizontal' | 'vertical'; opts?: CarouselOptions; setApi?: (api: CarouselApi) => void; plugins?: CarouselPlugin }) {
|
|
const [carouselRef, api] = useEmblaCarousel({ ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' }, plugins);
|
|
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
|
|
const [canScrollNext, setCanScrollNext] = React.useState(false);
|
|
|
|
const onSelect = React.useCallback((carouselApi: CarouselApi) => {
|
|
if (!carouselApi) return;
|
|
setCanScrollPrev(carouselApi.canScrollPrev());
|
|
setCanScrollNext(carouselApi.canScrollNext());
|
|
}, []);
|
|
const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);
|
|
const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);
|
|
|
|
React.useEffect(() => { if (api && setApi) setApi(api); }, [api, setApi]);
|
|
React.useEffect(() => {
|
|
if (!api) return;
|
|
onSelect(api);
|
|
api.on('reInit', onSelect);
|
|
api.on('select', onSelect);
|
|
return () => { api.off('reInit', onSelect); api.off('select', onSelect); };
|
|
}, [api, onSelect]);
|
|
|
|
return (
|
|
<CarouselContext.Provider value={{ carouselRef, api, scrollPrev, scrollNext, canScrollPrev, canScrollNext, orientation }}>
|
|
<div role="region" aria-roledescription="carousel" data-slot="carousel" className={cn('relative', className)} onKeyDownCapture={(event) => { if (event.key === 'ArrowLeft') { event.preventDefault(); scrollPrev(); } else if (event.key === 'ArrowRight') { event.preventDefault(); scrollNext(); } }} {...props}>{children}</div>
|
|
</CarouselContext.Provider>
|
|
);
|
|
}
|
|
|
|
function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
|
|
const { carouselRef, orientation } = useCarousel();
|
|
return <div ref={carouselRef} className="overflow-hidden"><div data-slot="carousel-content" className={cn('flex', orientation === 'horizontal' ? '-ml-5' : '-mt-5 flex-col', className)} {...props} /></div>;
|
|
}
|
|
|
|
function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
|
|
const { orientation } = useCarousel();
|
|
return <div role="group" aria-roledescription="slide" data-slot="carousel-item" className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-5' : 'pt-5', className)} {...props} />;
|
|
}
|
|
|
|
function CarouselPrevious({ className, ...props }: React.ComponentProps<typeof Button>) {
|
|
const { scrollPrev, canScrollPrev } = useCarousel();
|
|
return <Button data-slot="carousel-previous" variant="outline" size="icon" className={cn('absolute left-0 top-1/2 -translate-y-1/2 rounded-full', className)} disabled={!canScrollPrev} onClick={scrollPrev} {...props}><ArrowLeft aria-hidden="true" /><span className="sr-only">Previous slide</span></Button>;
|
|
}
|
|
|
|
function CarouselNext({ className, ...props }: React.ComponentProps<typeof Button>) {
|
|
const { scrollNext, canScrollNext } = useCarousel();
|
|
return <Button data-slot="carousel-next" variant="outline" size="icon" className={cn('absolute right-0 top-1/2 -translate-y-1/2 rounded-full', className)} disabled={!canScrollNext} onClick={scrollNext} {...props}><ArrowRight aria-hidden="true" /><span className="sr-only">Next slide</span></Button>;
|
|
}
|
|
|
|
export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
|