{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-07",
  "title": "Carousel with Footer",
  "description": "A carousel with a footer section",
  "registryDependencies": [
    "carousel",
    "card"
  ],
  "files": [
    {
      "path": "src/components/customized/carousel/carousel-07.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Carousel,\n  type CarouselApi,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/ui/carousel\";\n\nconst images = [\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-248.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-051.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-029.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-038.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-012.jpg\",\n];\nexport default function CarouselWithFooter() {\n  const [api, setApi] = React.useState<CarouselApi>();\n  const [current, setCurrent] = React.useState(0);\n  const [count, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!api) {\n      return;\n    }\n\n    setCount(api.scrollSnapList().length);\n    setCurrent(api.selectedScrollSnap() + 1);\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1);\n    });\n  }, [api]);\n\n  return (\n    <div className=\"mx-auto max-w-xs py-4\">\n      <Carousel className=\"w-full max-w-xs\" setApi={setApi}>\n        <CarouselContent>\n          {images.map((image) => (\n            <CarouselItem key={image}>\n              <img\n                alt=\"dddepth-248\"\n                className=\"size-full rounded-xl object-cover\"\n                src={image}\n              />\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"top-[calc(100%+0.5rem)] left-0 translate-y-0\" />\n        <CarouselNext className=\"top-[calc(100%+0.5rem)] left-2 translate-x-full translate-y-0\" />\n      </Carousel>\n      <div className=\"mt-4 flex items-center justify-end gap-2\">\n        {Array.from({ length: count }).map((_, index) => (\n          <button\n            className={cn(\"h-3.5 w-3.5 rounded-full border-2\", {\n              \"border-primary\": current === index + 1,\n            })}\n            key={index}\n            onClick={() => api?.scrollTo(index)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}