{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-carousel-3-demo",
  "title": "Product Carousel Demo",
  "description": "Another Demo showing product carousel component with different thumbs.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/product-carousel"
  ],
  "files": [
    {
      "path": "registry/demo/ecommerce/product-carousel-3/index.tsx",
      "content": "import {\n  ProductCarousel,\n  ProductCarouselSlide,\n  ProductCarouselThumbnail,\n  ProductCarouselWrapper,\n  ProductImage,\n} from '@/components/systaliko-ui/ecommerce/product-carousel';\nimport { Badge } from '@/components/systaliko-ui/shadcn/badge';\nimport { Button } from '@/components/systaliko-ui/shadcn/button';\nimport Image from 'next/image';\n\nfunction NikeIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 50 50\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M 6.40625 16.800781 C 3.152344 20.621094 0 25.234375 0 28.902344 C 0 31.019531 1.78125 33.996094 6.132813 33.996094 C 8.484375 33.996094 10.820313 33.050781 12.648438 32.320313 C 15.730469 31.085938 49.789063 16.296875 49.789063 16.296875 C 50.117188 16.132813 50.058594 15.925781 49.644531 16.027344 C 49.480469 16.070313 12.566406 26.074219 12.566406 26.074219 C 11.855469 26.273438 11.128906 26.382813 10.421875 26.382813 C 7.230469 26.382813 5.078125 24.851563 5.078125 21.503906 C 5.078125 20.207031 5.484375 18.640625 6.40625 16.800781 Z\"\n      />\n    </svg>\n  );\n}\nexport function ProductCarousel3Demo() {\n  return (\n    <div className=\"h-svh place-content-center place-items-center\">\n      <ProductCarousel\n        id=\"product-carousel\"\n        className=\"bg-card border w-xs shadow rounded-3xl p-4 overflow-hidden space-y-4\"\n      >\n        <ProductCarouselWrapper>\n          <NikeIcon className=\"size-6 absolute top-1 left-1 z-20\" />\n\n          <ProductCarouselSlide\n            className=\"flex justify-center items-end  \"\n            index={0}\n          >\n            <ProductImage className=\"justify-center items-center\">\n              <Image\n                src=\"https://m.media-amazon.com/images/I/51idMcfqaeL._AC_SX695_.jpg\"\n                width={695}\n                height={390}\n                className=\"inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain\"\n                alt=\"nike air jordan\"\n              />\n              <Image\n                src=\"https://m.media-amazon.com/images/I/51o7G1R81ML._AC_SX695_.jpg\"\n                width={695}\n                height={385}\n                className=\"inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain\"\n                alt=\"nike air jordan\"\n              />\n            </ProductImage>\n          </ProductCarouselSlide>\n\n          <ProductCarouselSlide\n            className=\"flex justify-center items-end size-full  \"\n            index={1}\n          >\n            <ProductImage className=\"size-full justify-center items-center \">\n              <Image\n                src=\"https://m.media-amazon.com/images/I/51sOQ6HcnZL._AC_SX695_.jpg\"\n                width={695}\n                height={395}\n                className=\"inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain\"\n                alt=\"nike air jordan\"\n              />\n              <Image\n                src=\"https://m.media-amazon.com/images/I/512tyq4RP5L._AC_SX695_.jpg\"\n                width={695}\n                height={393}\n                className=\"inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain\"\n                alt=\"nike air jordan\"\n              />\n            </ProductImage>\n          </ProductCarouselSlide>\n\n          <ProductCarouselSlide\n            className=\"flex justify-center items-end size-full  \"\n            index={2}\n          >\n            <ProductImage className=\"size-full justify-center items-center \">\n              <Image\n                src=\"https://m.media-amazon.com/images/I/61KH6jsAjFL._AC_SX695_.jpg\"\n                width={695}\n                height={376}\n                className=\"inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain\"\n                alt=\"nike air jordan\"\n              />\n              <Image\n                src=\"https://m.media-amazon.com/images/I/61adCwX-wwL._AC_SX695_.jpg\"\n                width={695}\n                height={376}\n                className=\"inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain\"\n                alt=\"nike air jordan\"\n              />\n            </ProductImage>\n          </ProductCarouselSlide>\n        </ProductCarouselWrapper>\n        <div className=\"py-1 px-3 inline-flex items-center space-x-2\">\n          <ProductCarouselThumbnail\n            index={0}\n            className=\" size-8 p-1 inline-flex justify-center items-center rounded\"\n            layoutId=\"product-carousel\"\n            activeLayoutClassName=\"size-9\"\n          >\n            <Image\n              src=\"https://m.media-amazon.com/images/I/51idMcfqaeL._AC_SX695_.jpg\"\n              width={695}\n              height={390}\n              className=\"relative inline-block align-middle w-full mx-auto h-auto max-h-full object-contain\"\n              alt=\"nike air jordan\"\n            />\n          </ProductCarouselThumbnail>\n\n          <ProductCarouselThumbnail\n            index={1}\n            className=\" size-8 p-1 inline-flex justify-center items-center rounded\"\n            layoutId=\"product-carousel\"\n            activeLayoutClassName=\"size-9\"\n          >\n            <Image\n              src=\"https://m.media-amazon.com/images/I/51sOQ6HcnZL._AC_SX695_.jpg\"\n              width={695}\n              height={395}\n              className=\"relative inline-block align-middle w-full mx-auto h-auto max-h-full object-contain\"\n              alt=\"nike air jordan\"\n            />\n          </ProductCarouselThumbnail>\n\n          <ProductCarouselThumbnail\n            index={2}\n            className=\" size-8 p-1 inline-flex justify-center items-center rounded\"\n            layoutId=\"product-carousel\"\n            activeLayoutClassName=\"size-9\"\n          >\n            <Image\n              src=\"https://m.media-amazon.com/images/I/61KH6jsAjFL._AC_SX695_.jpg\"\n              width={695}\n              height={376}\n              className=\"relative inline-block align-middle w-full mx-auto h-auto max-h-full object-contain\"\n              alt=\"nike air jordan\"\n            />\n          </ProductCarouselThumbnail>\n        </div>\n\n        <div className=\"space-y-3\">\n          <div className=\"flex items-center justify-between gap-4\">\n            <h2 className=\"font-semibold tracking-tight \">Air Jordan 1</h2>\n            <Badge\n              variant={'secondary'}\n              className=\"shadow-xs border rounded-full\"\n            >\n              Best Seller\n            </Badge>\n          </div>\n          <p className=\"text-muted-foreground text-sm font-light tabular-nums tracking-tighter\">\n            $120.00\n          </p>\n          <Button className=\"rounded-xl w-full\" size={'lg'}>\n            Buy Now\n          </Button>\n        </div>\n      </ProductCarousel>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/product-carousel-3.tsx"
    }
  ],
  "type": "registry:block"
}