Interfaces Carousel

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

export default function CarouselVerticalDemo() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center overflow-hidden bg-background p-8">
      <Carousel orientation="vertical" className="w-full max-w-xs sm:max-w-sm">
        <CarouselContent className="h-72">
          {Array.from({ length: 5 }).map((_, index) => (
            <CarouselItem key={index}>
              <div className="bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm">
                <div className="flex h-64 aspect-video w-full items-center justify-center p-4">
                  <span className="text-4xl font-semibold">
                    {index + 1}
                  </span>
                </div>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}