{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-08",
  "title": "Carousel with Progress Bar",
  "description": "A carousel with a progress bar indicator",
  "registryDependencies": [
    "carousel",
    "card",
    "progress"
  ],
  "files": [
    {
      "path": "src/components/customized/carousel/carousel-08.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Carousel,\n  type CarouselApi,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/ui/carousel\";\nimport { Progress } from \"@/registry/ui/progress\";\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 CarouselWithProgress() {\n  const [api, setApi] = React.useState<CarouselApi>();\n  const [current, setCurrent] = React.useState(0);\n  const [count, setCount] = React.useState(0);\n\n  const progress = (current * 100) / count;\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      <Progress className=\"mt-5 ml-auto w-24\" value={progress} />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}