import {  Carousel,  CarouselContent,  CarouselItem,  CarouselNext,  CarouselPrevious,} from "@/components/ui/8bit/carousel"const levels = [  { number: "01", name: "Mossy Woods", detail: "Find the path through the old forest.", color: "bg-lime-300" },  { number: "02", name: "Crystal Cavern", detail: "Collect crystals before the lights go out.", color: "bg-sky-300" },  { number: "03", name: "Sunset Harbor", detail: "Set sail for the next island.", color: "bg-orange-300" },]export default function CarouselDemo() {  return (    <Carousel className="w-full max-w-sm">      <CarouselContent>        {levels.map((level) => (          <CarouselItem key={level.number}>            <div className="relative flex min-h-60 flex-col justify-between overflow-hidden border-4 border-foreground bg-background p-6 shadow-[4px_4px_0_0_hsl(var(--foreground))]">              <div className="absolute right-6 top-6 grid grid-cols-3 gap-1" aria-hidden="true">                <span className={`col-start-2 size-4 ${level.color}`} />                <span className={`size-4 ${level.color}`} />                <span className={`size-4 ${level.color}`} />                <span className={`size-4 ${level.color}`} />                <span className={`col-start-2 size-4 ${level.color}`} />              </div>              <p className="font-mono text-sm text-muted-foreground">LEVEL {level.number}</p>              <div className="space-y-2">                <p className="text-2xl font-bold tracking-tight">{level.name}</p>                <p className="max-w-56 text-sm text-muted-foreground">{level.detail}</p>              </div>            </div>          </CarouselItem>        ))}      </CarouselContent>      <CarouselPrevious aria-label="Previous level" />      <CarouselNext aria-label="Next level" />    </Carousel>  )}