Template
Add complete shadcn component set
This commit is contained in:
Rami Bitar
+215
-50
@@ -1,81 +1,246 @@
|
||||
'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 React, {
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
useCallback,
|
||||
useRef,
|
||||
useEffect,
|
||||
} from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from './button';
|
||||
|
||||
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;
|
||||
interface CarouselContextType {
|
||||
currentIndex: number;
|
||||
totalItems: number;
|
||||
scrollPrev: () => void;
|
||||
scrollNext: () => void;
|
||||
canScrollPrev: boolean;
|
||||
canScrollNext: boolean;
|
||||
orientation: 'horizontal' | 'vertical';
|
||||
};
|
||||
}
|
||||
|
||||
const CarouselContext = React.createContext<CarouselContextValue | null>(null);
|
||||
const CarouselContext = createContext<CarouselContextType | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
function useCarousel() {
|
||||
const context = React.useContext(CarouselContext);
|
||||
if (!context) throw new Error('useCarousel must be used within a Carousel');
|
||||
const context = useContext(CarouselContext);
|
||||
if (!context) {
|
||||
throw new Error('Carousel components 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);
|
||||
interface CarouselProps {
|
||||
children: React.ReactNode;
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
opts?: { align?: 'start' | 'center' | 'end' };
|
||||
className?: string;
|
||||
autoPlay?: boolean;
|
||||
autoPlayInterval?: number;
|
||||
}
|
||||
|
||||
const onSelect = React.useCallback((carouselApi: CarouselApi) => {
|
||||
if (!carouselApi) return;
|
||||
setCanScrollPrev(carouselApi.canScrollPrev());
|
||||
setCanScrollNext(carouselApi.canScrollNext());
|
||||
function Carousel({
|
||||
children,
|
||||
orientation = 'horizontal',
|
||||
className,
|
||||
autoPlay = false,
|
||||
autoPlayInterval = 3000,
|
||||
}: CarouselProps) {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const itemCount = React.Children.count(children);
|
||||
const autoPlayTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const canScrollPrev = currentIndex > 0;
|
||||
const canScrollNext = currentIndex < itemCount - 1;
|
||||
|
||||
const scrollPrev = useCallback(() => {
|
||||
setCurrentIndex((prev) => Math.max(0, prev - 1));
|
||||
}, []);
|
||||
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]);
|
||||
const scrollNext = useCallback(() => {
|
||||
setCurrentIndex((prev) => Math.min(itemCount - 1, prev + 1));
|
||||
}, [itemCount]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!autoPlay) return;
|
||||
|
||||
autoPlayTimerRef.current = setInterval(() => {
|
||||
setCurrentIndex((prev) => {
|
||||
if (prev >= itemCount - 1) {
|
||||
return 0;
|
||||
}
|
||||
return prev + 1;
|
||||
});
|
||||
}, autoPlayInterval);
|
||||
|
||||
return () => {
|
||||
if (autoPlayTimerRef.current) {
|
||||
clearInterval(autoPlayTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, [autoPlay, autoPlayInterval, itemCount]);
|
||||
|
||||
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
|
||||
value={{
|
||||
currentIndex,
|
||||
totalItems: itemCount,
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext,
|
||||
orientation,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn('relative', className)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
data-slot="carousel"
|
||||
>
|
||||
{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>;
|
||||
interface CarouselContentProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
function CarouselContent({ className, children }: CarouselContentProps) {
|
||||
const { currentIndex, orientation } = useCarousel();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('overflow-hidden', className)}
|
||||
data-slot="carousel-content"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex transition-transform duration-300 ease-out',
|
||||
orientation === 'horizontal' ? 'flex-row' : 'flex-col'
|
||||
)}
|
||||
style={{
|
||||
transform:
|
||||
orientation === 'horizontal'
|
||||
? `translateX(-${currentIndex * 100}%)`
|
||||
: `translateY(-${currentIndex * 100}%)`,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CarouselItemProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
function CarouselItem({ className, children }: CarouselItemProps) {
|
||||
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} />;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
data-slot="carousel-item"
|
||||
className={cn('min-w-0 shrink-0 grow-0 basis-full', className)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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>;
|
||||
interface CarouselPreviousProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
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>;
|
||||
function CarouselPrevious({ className }: CarouselPreviousProps) {
|
||||
const { scrollPrev, canScrollPrev, orientation } = useCarousel();
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-previous"
|
||||
variant="outline"
|
||||
onClick={scrollPrev}
|
||||
disabled={!canScrollPrev}
|
||||
className={cn(
|
||||
'absolute size-10 rounded-full p-0 flex items-center justify-center',
|
||||
orientation === 'horizontal'
|
||||
? 'top-1/2 left-2 -translate-y-1/2'
|
||||
: 'top-2 left-1/2 -translate-x-1/2 -rotate-90',
|
||||
className
|
||||
)}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="size-4"
|
||||
>
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
|
||||
interface CarouselNextProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function CarouselNext({ className }: CarouselNextProps) {
|
||||
const { scrollNext, canScrollNext, orientation } = useCarousel();
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-next"
|
||||
variant="outline"
|
||||
onClick={scrollNext}
|
||||
disabled={!canScrollNext}
|
||||
className={cn(
|
||||
'absolute size-10 rounded-full p-0 flex items-center justify-center',
|
||||
orientation === 'horizontal'
|
||||
? 'top-1/2 right-2 -translate-y-1/2'
|
||||
: 'bottom-2 left-1/2 -translate-x-1/2 rotate-90',
|
||||
className
|
||||
)}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="size-4"
|
||||
>
|
||||
<path d="M9 18l6-6-6-6" />
|
||||
</svg>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselPrevious,
|
||||
CarouselNext,
|
||||
useCarousel,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user