Carousel

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/radix-sera/components/example"
5import { Card, CardContent } from "@/registry/radix-sera/ui/card"
6import {
7  Carousel,
8  CarouselContent,
9  CarouselItem,
10  CarouselNext,
11  CarouselPrevious,
12} from "@/registry/radix-sera/ui/carousel"
13 
14export default function CarouselExample() {
15  return (
16    <ExampleWrapper className="lg:grid-cols-1">
17      <CarouselBasic />
18      <CarouselMultiple />
19      <CarouselWithGap />
20    </ExampleWrapper>
21  )
22}
23 
24function CarouselBasic() {
25  return (
26    <Example title="Basic">
27      <Carousel className="mx-auto max-w-xs sm:max-w-sm">
28        <CarouselContent>
29          {Array.from({ length: 5 }).map((_, index) => (
30            <CarouselItem key={index}>
31              <div className="p-1 style-luma:p-2.5">
32                <Card>
33                  <CardContent className="flex aspect-square items-center justify-center p-6">
34                    <span className="text-4xl font-semibold">{index + 1}</span>
35                  </CardContent>
36                </Card>
37              </div>
38            </CarouselItem>
39          ))}
40        </CarouselContent>
41        <CarouselPrevious className="hidden sm:inline-flex" />
42        <CarouselNext className="hidden sm:inline-flex" />
43      </Carousel>
44    </Example>
45  )
46}
47 
48function CarouselMultiple() {
49  return (
50    <Example title="Multiple">
51      <Carousel
52        className="mx-auto max-w-xs sm:max-w-sm"
53        opts={{
54          align: "start",
55        }}
56      >
57        <CarouselContent>
58          {Array.from({ length: 5 }).map((_, index) => (
59            <CarouselItem key={index} className="sm:basis-1/2 lg:basis-1/3">
60              <div className="p-1 style-luma:p-2.5">
61                <Card>
62                  <CardContent className="flex aspect-square items-center justify-center p-6">
63                    <span className="text-3xl font-semibold">{index + 1}</span>
64                  </CardContent>
65                </Card>
66              </div>
67            </CarouselItem>
68          ))}
69        </CarouselContent>
70        <CarouselPrevious className="hidden sm:inline-flex" />
71        <CarouselNext className="hidden sm:inline-flex" />
72      </Carousel>
73    </Example>
74  )
75}
76 
77function CarouselWithGap() {
78  return (
79    <Example title="With Gap">
80      <Carousel className="mx-auto max-w-xs sm:max-w-sm">
81        <CarouselContent className="-ml-1">
82          {Array.from({ length: 5 }).map((_, index) => (
83// … truncated