{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-carousel-10","type":"registry:block","title":"Carousel with overlay thumbnail navigation","description":"Carousel with overlay thumbnail navigation","dependencies":["cn"],"registryDependencies":["carousel"],"files":[{"path":"c-carousel-10.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useCallback, useEffect, useState } from \"react\"\n\nimport { cn } from \"cn\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  type CarouselApi,\n} from \"@/components/ui/carousel\"\n\nconst ITEMS_COUNT = 10\n\nexport function Pattern() {\n  const [mainApi, setMainApi] = useState<CarouselApi>()\n  const [thumbApi, setThumbApi] = useState<CarouselApi>()\n  const [selectedIndex, setSelectedIndex] = useState(0)\n\n  const onThumbClick = useCallback(\n    (index: number) => {\n      if (!mainApi || !thumbApi) return\n      mainApi.scrollTo(index)\n    },\n    [mainApi, thumbApi]\n  )\n\n  const onSelect = useCallback(() => {\n    if (!mainApi || !thumbApi) return\n    const index = mainApi.selectedScrollSnap()\n    setSelectedIndex(index)\n    thumbApi.scrollTo(index)\n  }, [mainApi, thumbApi])\n\n  useEffect(() => {\n    if (!mainApi) return\n    onSelect()\n    mainApi.on(\"select\", onSelect)\n    mainApi.on(\"reInit\", onSelect)\n    return () => {\n      mainApi.off(\"select\", onSelect)\n      mainApi.off(\"reInit\", onSelect)\n    }\n  }, [mainApi, onSelect])\n\n  return (\n    <div className=\"flex w-full max-w-2xl items-center justify-center p-4\">\n      <div className=\"group relative w-full overflow-hidden rounded-xl\">\n        {/* Main Carousel */}\n        <Carousel setApi={setMainApi} className=\"w-full\">\n          <CarouselContent>\n            {Array.from({ length: ITEMS_COUNT }).map((_, index) => (\n              <CarouselItem key={index}>\n                <div className=\"bg-muted relative aspect-video w-full overflow-hidden\">\n                  <img\n                    src={`https://picsum.photos/1200/675?grayscale&random=${index + 60}`}\n                    alt={`Slide ${index + 1}`}\n                    width={1200}\n                    height={675}\n                    className=\"h-full w-full object-cover\"\n                  />\n                </div>\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </Carousel>\n\n        {/* Overlay Thumbnails Container */}\n        <div className=\"absolute inset-x-0 bottom-0 bg-linear-to-t from-black/60 to-transparent p-4 transition-opacity duration-300\">\n          <div className=\"relative mx-auto w-full max-w-md\">\n            <Carousel\n              setApi={setThumbApi}\n              opts={{\n                containScroll: \"keepSnaps\",\n                dragFree: true,\n              }}\n              className=\"w-full\"\n            >\n              <CarouselContent className=\"-ml-2 flex-row\">\n                {Array.from({ length: ITEMS_COUNT }).map((_, index) => (\n                  <CarouselItem\n                    key={index}\n                    className=\"basis-1/4 cursor-pointer pl-2 sm:basis-1/8\"\n                    onClick={() => onThumbClick(index)}\n                  >\n                    <div\n                      className={cn(\n                        \"relative aspect-square overflow-hidden rounded-md border-2 transition-all duration-300\",\n                        index === selectedIndex\n                          ? \"border-white opacity-100 ring-2 ring-black/20\"\n                          : \"border-white/40 opacity-50 hover:opacity-80\"\n                      )}\n                    >\n                      <img\n                        src={`https://picsum.photos/200/200?grayscale&random=${index + 60}`}\n                        alt={`Thumb ${index + 1}`}\n                        width={200}\n                        height={200}\n                        className=\"h-full w-full object-cover\"\n                      />\n                    </div>\n                  </CarouselItem>\n                ))}\n              </CarouselContent>\n            </Carousel>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}","target":"components/examples/c-carousel-10.tsx"}],"meta":{"order":10}}