{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-block-01",
  "title": "Carousel Block 01",
  "description": "A simple carousel block",
  "registryDependencies": [
    "carousel",
    "button"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/carousel-block-01/components/carousel.tsx",
      "content": "import Link from \"next/link\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\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=\"mx-auto max-w-5xl px-14 py-20\">\n      <div className=\"flex items-end justify-between\">\n        <div>\n          <h2 className=\"font-medium text-3xl tracking-tight\">dddepth</h2>\n          <p className=\"mt-2 text-pretty text-lg text-muted-foreground leading-snug\">\n            A Curated Collection of AI-generated Abstract 3D Shapes\n          </p>\n        </div>\n        <Button className=\"max-sm:hidden\" size=\"sm\" variant=\"outline\">\n          <Link href=\"https://www.fffuel.co/dddepth/\" target=\"_blank\">\n            View all\n          </Link>\n        </Button>\n      </div>\n      <Carousel className=\"mt-6 w-full\" opts={{ loop: true, align: \"start\" }}>\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 className=\"mt-4 flex items-center justify-between sm:justify-end\">\n          <div className=\"flex items-center justify-end gap-1.5\">\n            <CarouselPrevious className=\"-left-10 max-md:static max-md:translate-y-0\" />\n            <CarouselNext className=\"-right-10 max-md:static max-md:translate-y-0\" />\n          </div>\n\n          <Button className=\"sm:hidden\" size=\"sm\" variant=\"outline\">\n            <Link href=\"https://www.fffuel.co/dddepth/\">View all</Link>\n          </Button>\n        </div>\n      </Carousel>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}