Carousel

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/redpanda-ui/carousel"

<Carousel>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Carousel Structure:
┌─────────────────────────────────────────────────────┐
│ <Carousel> (region, keyboard navigation)            │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <CarouselContent> (scroll viewport)             │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │<CarouselItem>│ │<CarouselItem>│ │<CarouselItem>│ │ │
│ │ │  (slide)    │ │  (slide)    │ │  (slide)    │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│  <CarouselPrevious />            <CarouselNext />    │
└─────────────────────────────────────────────────────┘

<CarouselContent className="-ml-2">
  <CarouselItem className="pl-2">...</CarouselItem>
</CarouselContent>

{/* 33% of the carousel width */}
<CarouselItem className="basis-1/3">...</CarouselItem>

<CarouselPrevious variant="ghost" />
<CarouselNext variant="ghost" />

<Carousel
  opts={{
    align: "start",
    loop: true,
  }}
>
  ...
</Carousel>

import {
  Carousel,
  type CarouselApi,
} from "@/components/redpanda-ui/carousel"

function Example() {
  const [api, setApi] = useState<CarouselApi>()

  useEffect(() => {
    if (!api) {
      return
    }

    api.on("select", () => {
      // Do something on select
    })
  }, [api])

  return <Carousel setApi={setApi}>...</Carousel>
}

import Autoplay from "embla-carousel-autoplay"

<Carousel plugins={[Autoplay({ delay: 2000 })]}>
  ...
</Carousel>