{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-03",
  "title": "Carousel 03",
  "description": "A carousel of cards with a title and description.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "carousel",
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/carousel/carousel-03/carousel-03.tsx",
      "content": "'use client'\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { useEffect, useState } from 'react'\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: 'Beautiful blocks',\n    description: 'Polished components that feel ready.',\n    src: 'https://images.unsplash.com/photo-1545277048-000c86055339?q=80&w=1171&auto=format&fit=crop',\n    alt: 'Alt 1',\n  },\n  {\n    title: 'Ship faster',\n    description: 'Move from idea to screen quickly.',\n    src: 'https://images.unsplash.com/photo-1574557398955-09174289ea44?q=80&w=1171&auto=format&fit=crop',\n    alt: 'Alt 2',\n  },\n  {\n    title: 'Build clean',\n    description: 'Simple structure with room to breathe.',\n    src: 'https://images.unsplash.com/photo-1595330495302-e257debfa664?q=80&w=1171&auto=format&fit=crop',\n    alt: 'Alt 3',\n  },\n  {\n    title: 'Launch ready',\n    description: 'Fast to use and easy to ship.',\n    src: 'https://images.unsplash.com/photo-1543617934-70e4a9efad1c?q=80&w=1170&auto=format&fit=crop',\n    alt: 'Alt 4',\n  },\n  {\n    title: 'Made to scale',\n    description: 'Reusable blocks for growing products.',\n    src: 'https://images.unsplash.com/photo-1574557399375-c721d2371825?q=80&w=1171&auto=format&fit=crop',\n    alt: 'Alt 5',\n  },\n  {\n    title: 'Ready to use',\n    description: 'Drop in and keep moving.',\n    src: 'https://images.unsplash.com/photo-1574557399909-c6df4fde191a?q=80&w=1171&auto=format&fit=crop',\n    alt: 'Alt 6',\n  },\n]\n\nexport function Carousel03() {\n  const [api, setApi] = useState<CarouselApi>()\n  const [canPrev, setCanPrev] = useState(false)\n  const [canNext, setCanNext] = useState(false)\n\n  useEffect(() => {\n    if (!api) return\n\n    const onSelect = () => {\n      setCanPrev(api.canScrollPrev())\n      setCanNext(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 w-full flex-col gap-8 md:gap-10\">\n      <div className=\"mx-auto flex w-full max-w-6xl flex-wrap items-start justify-between gap-2 px-4\">\n        <h2 className=\"min-w-[200px] flex-1 text-2xl font-semibold sm:max-w-md md:text-3xl lg:max-w-lg\">\n          New blocks for modern UI building.\n        </h2>\n        <p className=\"text-muted-foreground w-full text-sm sm:w-auto sm:max-w-md md:text-base lg:max-w-lg\">\n          Fresh, reusable pieces for fast product work.\n        </p>\n      </div>\n\n      <Carousel\n        setApi={setApi}\n        opts={{\n          align: 'start',\n        }}\n        className=\"w-full\"\n        aria-label=\"New blocks\"\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=\"basis-[80%] pl-4 md:basis-[45%] lg:basis-[36%]\"\n            >\n              <div className=\"relative w-full overflow-hidden rounded-lg\">\n                <img\n                  src={item.src}\n                  alt={item.alt}\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                  className=\"h-[220px] w-full object-cover md:h-[300px] lg:h-[340px]\"\n                />\n              </div>\n              <div className=\"mt-3\">\n                <h3 className=\"text-lg font-medium\">{item.title}</h3>\n                <p className=\"text-muted-foreground text-sm\">\n                  {item.description}\n                </p>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n      </Carousel>\n\n      <div className=\"mx-auto flex w-full max-w-6xl justify-end gap-3 px-4\">\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => api?.scrollPrev()}\n          disabled={!canPrev}\n          className=\"bg-muted/60 hover:bg-muted size-10 rounded-full border-none shadow-none\"\n        >\n          <ChevronLeft />\n          <span className=\"sr-only\">Previous slide</span>\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => api?.scrollNext()}\n          disabled={!canNext}\n          className=\"bg-muted/60 hover:bg-muted size-10 rounded-full border-none shadow-none\"\n        >\n          <ChevronRight />\n          <span className=\"sr-only\">Next slide</span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/carousel/carousel-03.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 700,
    "containerClassName": "max-w-full overflow-hidden px-0"
  },
  "type": "registry:block"
}