{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-02",
  "title": "Carousel 02",
  "description": "A carousel of media with a title and description.",
  "dependencies": [
    "react-wrap-balancer",
    "lucide-react"
  ],
  "registryDependencies": [
    "carousel",
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/carousel/carousel-02/carousel-02.tsx",
      "content": "'use client'\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { useEffect, useState } from 'react'\nimport Balancer from 'react-wrap-balancer'\n\nimport { Button } from '@/components/ui/button'\nimport {\n  Carousel,\n  type CarouselApi,\n  CarouselContent,\n  CarouselItem,\n} from '@/components/ui/carousel'\n\nconst items = [\n  {\n    title: 'Ship faster',\n    description: 'Less setup, more shipping.',\n    src: 'https://images.unsplash.com/photo-1596308501201-1d81619d907a?q=80&w=1170&auto=format&fit=crop',\n    alt: 'Alt 1',\n  },\n  {\n    title: 'Stay in control',\n    description: 'Your code, your design system.',\n    src: 'https://images.unsplash.com/photo-1747370273882-20aefaa41dac?q=80&w=1074&auto=format&fit=crop',\n    alt: 'Alt 2',\n  },\n  {\n    title: 'Built together',\n    description: 'Open by default, improved by the community.',\n    src: 'https://images.unsplash.com/photo-1740073067432-0fd060f2ecde?q=80&w=1171&auto=format&fit=crop',\n    alt: 'Alt 3',\n  },\n  {\n    title: 'Performance first',\n    description: 'Fast by default, without the tradeoffs.',\n    src: 'https://images.unsplash.com/photo-1567354440819-667147e4d12d?q=80&w=1167&auto=format&fit=crop',\n    alt: 'Alt 4',\n  },\n]\n\nexport function Carousel02() {\n  const [api, setApi] = useState<CarouselApi>()\n  const [canScrollPrev, setCanScrollPrev] = useState(false)\n  const [canScrollNext, setCanScrollNext] = useState(false)\n\n  useEffect(() => {\n    if (!api) return\n\n    const onSelect = () => {\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\n    }\n    api.on('select', onSelect)\n    api.on('reInit', onSelect)\n    onSelect()\n\n    return () => {\n      api.off('select', onSelect)\n      api.off('reInit', onSelect)\n    }\n  }, [api])\n\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <div className=\"mx-auto flex w-full max-w-6xl flex-col justify-between gap-6 px-4 md:flex-row md:items-center\">\n        <div className=\"flex flex-col gap-1\">\n          <h2 className=\"text-2xl font-bold md:max-w-200\">\n            <Balancer balance={0.5}>In focus</Balancer>\n          </h2>\n          <p className=\"text-muted-foreground md:max-w-200\">\n            <Balancer balance={0.5}>\n              Key themes in a compact, browsable format.\n            </Balancer>\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"outline\"\n            onClick={() => api?.scrollPrev()}\n            disabled={!canScrollPrev}\n            size=\"icon\"\n            className=\"bg-muted/60 hover:bg-muted h-10 w-10 rounded-full border-none shadow-none\"\n          >\n            <ChevronLeft className=\"size-4\" />\n            <span className=\"sr-only\">Previous slide</span>\n          </Button>\n          <Button\n            variant=\"outline\"\n            onClick={() => api?.scrollNext()}\n            disabled={!canScrollNext}\n            size=\"icon\"\n            className=\"bg-muted/60 hover:bg-muted h-10 w-10 rounded-full border-none shadow-none\"\n          >\n            <ChevronRight className=\"size-4\" />\n            <span className=\"sr-only\">Next slide</span>\n          </Button>\n        </div>\n      </div>\n\n      <Carousel\n        setApi={setApi}\n        opts={{\n          align: 'center',\n          dragFree: true,\n        }}\n        className=\"w-full\"\n        aria-label=\"In focus\"\n      >\n        <CarouselContent className=\"mx-auto h-auto w-full max-w-6xl px-4 select-none first:!pl-0\">\n          {items.map((item) => (\n            <CarouselItem\n              key={item.title}\n              className=\"h-full basis-5/5 last:!pr-5 md:basis-2/5\"\n            >\n              <div className=\"relative w-full overflow-hidden rounded-xl\">\n                <div className=\"relative h-full min-h-64 w-full md:min-h-96\">\n                  <img\n                    src={item.src}\n                    alt={item.alt}\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                    className=\"absolute inset-0 size-full object-cover\"\n                  />\n                </div>\n                <div className=\"absolute inset-0 bg-black/40\" />\n                <div className=\"absolute inset-0 z-10 flex items-center justify-center p-6\">\n                  <div className=\"max-w-2xl space-y-2 text-center text-white\">\n                    <h3 className=\"text-xl font-medium\">{item.title}</h3>\n                    <p className=\"text-sm\">{item.description}</p>\n                  </div>\n                </div>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n      </Carousel>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/carousel/carousel-02.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 700,
    "containerClassName": "max-w-full overflow-hidden px-0"
  },
  "type": "registry:block"
}