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

export function CarouselSizesDemo() {
return (
  <div className="w-full max-w-lg px-12">
    <Carousel opts={{ align: "start" }} className="mx-auto w-full max-w-sm">
      <CarouselContent>
        {[1, 2, 3, 4, 5].map((n) => (
          <CarouselItem key={n} className="basis-1/3">
            <div className="p-1">
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-4 text-card-foreground shadow-sm">
                <span className="text-3xl font-semibold">{n}</span>
              </div>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  </div>
);
}

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

export function CarouselVerticalDemo() {
return (
  <div className="w-full max-w-xs py-14">
    <Carousel
      opts={{ align: "start" }}
      orientation="vertical"
      className="mx-auto w-full max-w-[12rem]"
    >
      <CarouselContent className="-mt-1 h-[200px]">
        {[1, 2, 3, 4, 5].map((n) => (
          <CarouselItem key={n} className="basis-1/2 pt-1">
            <div className="h-full p-1">
              <div className="flex h-full items-center justify-center rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
                <span className="text-3xl font-semibold">{n}</span>
              </div>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  </div>
);
}