From b1422a41419b98dd16f9dfda961e90a0799a3f93 Mon Sep 17 00:00:00 2001 From: Jorge Moya Date: Fri, 26 Jul 2024 13:43:24 -0500 Subject: [PATCH] feat: add pageSize prop to carousels --- core/components/ui/carousel/carousel.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/core/components/ui/carousel/carousel.tsx b/core/components/ui/carousel/carousel.tsx index ae2ca3261d..5c5d55775c 100644 --- a/core/components/ui/carousel/carousel.tsx +++ b/core/components/ui/carousel/carousel.tsx @@ -17,12 +17,13 @@ type CarouselApi = UseEmblaCarouselType[1]; interface Props extends ComponentPropsWithoutRef<'div'> { items: ReactNode[]; title: string; + pageSize?: 2 | 3 | 4; } -const Carousel = ({ className, children, title, items, ...props }: Props) => { +const Carousel = ({ className, children, pageSize = 4, title, items, ...props }: Props) => { const id = useId(); const titleId = useId(); - const itemsPerGroup = 4; + const itemsPerGroup = pageSize; const [carouselRef, api] = useEmblaCarousel({ loop: true, @@ -150,7 +151,10 @@ const Carousel = ({ className, children, title, items, ...props }: Props) => { aria-label={`${index + 1} of ${groupedItems.length}`} aria-roledescription="slide" className={cn( - 'grid min-w-0 shrink-0 grow-0 basis-full grid-cols-2 gap-6 px-4 md:grid-cols-4 lg:gap-8', + 'grid min-w-0 shrink-0 grow-0 basis-full grid-cols-2 gap-6 px-4 lg:gap-8', + pageSize === 2 && 'md:grid-cols-2', + pageSize === 3 && 'md:grid-cols-3', + pageSize === 4 && 'md:grid-cols-4', !slidesInView.includes(index) && 'invisible', )} id={`${id}-slide-${index + 1}`}