{
  "name": "product-card-06-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/image-viewer-basic.json",
    "https://ui.stackzero.co/r/price-format-basic.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport ImageViewer from \"@/components/commerce-ui/image-viewer-basic\";\nimport PriceFormat from \"@/components/commerce-ui/price-format-basic\";\nimport { Button } from \"@/components/ui/button\";\n\nconst DEFAULT_IMAGE_URL =\n  \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-01.jpg\";\n\ninterface ProductCard_06Props {\n  imageUrl?: string;\n  newRelease?: boolean;\n  productName?: string;\n  description?: string;\n  price?: number;\n  availableStock?: number;\n  releaseDate?: string;\n  features?: string[];\n  onAddToCart?: () => void;\n  onPreOrder?: () => void;\n  currencyPrefix?: string;\n}\n\nfunction ProductCard_06({\n  availableStock = 24,\n  currencyPrefix = \"$\",\n  description = \"Next-generation portable speaker with 360° spatial audio and 24-hour battery life\",\n  features = [\n    \"360° Immersive Sound\",\n    \"Waterproof Design\",\n    \"Voice Assistant\",\n    \"Multi-room Sync\",\n  ],\n  imageUrl = DEFAULT_IMAGE_URL,\n  newRelease = true,\n  onAddToCart = () => {},\n  onPreOrder = () => {},\n  price = 199.99,\n  productName = \"SoundSphere Ultra Wireless Speaker\",\n  releaseDate = \"August 15, 2023\",\n}: ProductCard_06Props = {}) {\n  const isLowStock = availableStock <= 25;\n\n  return (\n    <div className=\"group flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-md sm:h-[220px] sm:flex-row dark:border-gray-800 dark:bg-gray-900\">\n      {/* Image section with highlight effect */}\n      <div className=\"relative h-52 w-full bg-gradient-to-br from-sky-50 via-blue-50 to-indigo-50 sm:h-full sm:w-2/5 dark:from-gray-900 dark:via-blue-950/20 dark:to-gray-900\">\n        {newRelease && (\n          <div className=\"absolute top-3 left-3 z-10 flex items-center justify-center\">\n            <div className=\"animate-pulse-slow rounded-full bg-blue-600 px-3 py-1 text-xs font-bold tracking-wider text-white uppercase shadow-md\">\n              Just Released\n            </div>\n          </div>\n        )}\n\n        {/* Highlight glow effect */}\n        <div className=\"absolute inset-0\">\n          <div className=\"absolute -top-10 -left-10 h-32 w-32 rounded-full bg-blue-300/30 blur-2xl\"></div>\n          <div className=\"absolute right-0 -bottom-8 h-28 w-28 rounded-full bg-indigo-400/20 blur-xl\"></div>\n        </div>\n\n        {/* Image with hover effect */}\n        <div className=\"flex h-full items-center justify-center p-4\">\n          <div className=\"transition-all duration-500 group-hover:scale-[1.05] group-hover:-rotate-2\">\n            <ImageViewer\n              imageUrl={imageUrl}\n              classNameThumbnailViewer=\"rounded-lg h-full object-contain drop-shadow-lg max-h-[180px]\"\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Content section */}\n      <div className=\"flex flex-1 flex-col justify-between p-5\">\n        <div>\n          {/* Product name and description */}\n          <div className=\"mb-3\">\n            <div className=\"flex items-center justify-between\">\n              <h3 className=\"text-xl font-bold text-gray-900 dark:text-white\">\n                {productName}\n              </h3>\n              <PriceFormat\n                prefix={currencyPrefix}\n                value={price}\n                className=\"text-xl font-bold text-blue-600 dark:text-blue-400\"\n              />\n            </div>\n            <p className=\"mt-1 line-clamp-2 text-sm text-gray-600 dark:text-gray-400\">\n              {description}\n            </p>\n          </div>\n\n          {/* Features list */}\n          <div className=\"mb-4\">\n            <ul className=\"grid grid-cols-2 gap-x-4 gap-y-1\">\n              {features.map((feature, index) => (\n                <li key={index} className=\"flex items-center text-sm\">\n                  <svg\n                    className=\"mr-1.5 h-4 w-4 text-blue-500\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth=\"2\"\n                      d=\"M5 13l4 4L19 7\"\n                    />\n                  </svg>\n                  <span className=\"text-gray-700 dark:text-gray-300\">\n                    {feature}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n\n        {/* Bottom section */}\n        <div className=\"flex items-end justify-between\">\n          <div>\n            {isLowStock ? (\n              <p className=\"text-xs font-medium text-amber-600 dark:text-amber-400\">\n                <span className=\"mr-1 inline-block h-2 w-2 animate-pulse rounded-full bg-amber-500\"></span>\n                Only {availableStock} units left\n              </p>\n            ) : (\n              <p className=\"text-xs font-medium text-green-600 dark:text-green-400\">\n                <span className=\"mr-1 inline-block h-2 w-2 rounded-full bg-green-500\"></span>\n                In Stock\n              </p>\n            )}\n            <p className=\"text-xs text-gray-500 dark:text-gray-400\">\n              Released on {releaseDate}\n            </p>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex space-x-2\">\n            <Button\n              variant=\"outline\"\n              onClick={onAddToCart}\n              className=\"border-gray-300 bg-white text-gray-700 hover:border-blue-500 hover:bg-blue-50 hover:text-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n            >\n              Add to cart\n            </Button>\n            <Button\n              onClick={onPreOrder}\n              className=\"bg-blue-600 text-white hover:bg-blue-700\"\n            >\n              Buy now\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ProductCard_06;\nexport type { ProductCard_06Props };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-06.tsx",
      "target": "components/commerce-ui/product-card-06.tsx"
    }
  ]
}