1import {
2  Carousel as CarouselComp,
3  CarouselContent,
4  CarouselItem,
5  CarouselNext,
6  CarouselPrevious,
7} from "@repo/ui/components/carousel";

1<Carousel className="w-full max-w-3xs md:max-w-xs mx-auto">
2  <CarouselContent>
3    {Array.from({ length: 5 }).map((_, index) => (
4      <CarouselItem key={index}>
5        <div className="p-1">
6          <div className="size-full border shadow-inherit rounded-md">
7            <div className="flex aspect-square items-center justify-center p-6">
8              <span className="text-4xl font-semibold">{index + 1}</span>
9            </div>
10          </div>
11        </div>
12      </CarouselItem>
13    ))}
14  </CarouselContent>
15  <CarouselPrevious />
16  <CarouselNext />
17</Carousel>