{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-block-02",
  "title": "Carousel Block 02",
  "description": "A simple carousel block",
  "registryDependencies": [
    "carousel"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/carousel-block-02/components/carousel.tsx",
      "content": "import {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/bases/radix/ui/carousel\";\n\nconst images = [\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-321.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-310.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-173.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-147.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-105.jpg\",\n];\n\nexport default function CarouselDemo() {\n  return (\n    <div className=\"px-6 py-20\">\n      <Carousel\n        className=\"mx-auto w-full max-w-5xl\"\n        opts={{ loop: true, align: \"start\" }}\n      >\n        <div className=\"mb-3 flex items-center justify-end gap-1 md:hidden\">\n          <CarouselPrevious className=\"static translate-y-0\" />\n          <CarouselNext className=\"static translate-y-0\" />\n        </div>\n        <div className=\"rounded-xl bg-card p-6 shadow-xl/3 ring ring-border/80\">\n          <div className=\"mb-5 flex items-end justify-between\">\n            <div>\n              <h2 className=\"font-medium text-3xl tracking-tight\">dddepth</h2>\n              <p className=\"mt-2 text-lg text-muted-foreground leading-snug\">\n                A Curated Collection of AI-generated Abstract 3D Shapes\n              </p>\n            </div>\n\n            <div className=\"hidden space-x-2 md:block\">\n              <CarouselPrevious className=\"static translate-y-0\" />\n              <CarouselNext className=\"static translate-y-0\" />\n            </div>\n          </div>\n\n          <CarouselContent>\n            {images.map((image, index) => (\n              <CarouselItem\n                className=\"basis-1/2 md:basis-1/3 lg:basis-1/4\"\n                key={index}\n              >\n                <div className=\"p-1\">\n                  <div className=\"aspect-square\">\n                    <img className=\"rounded-lg object-cover\" src={image} />\n                  </div>\n                </div>\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </div>\n      </Carousel>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}