{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-12",
  "type": "registry:component",
  "title": "Card 12",
  "description": "Card 12. A card is a container that displays content in a structured and visually appealing way.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "components/watermelon/card-12.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { HeartIcon } from 'lucide-react';\n\nimport { Badge } from '@/components/base-ui/badge';\nimport { Button } from '@/components/base-ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/base-ui/card';\n\nimport { cn } from '@/lib/utils';\n\ntype ProductCard = {\n  colorLabel: string;\n  description: string;\n  imageAlt: string;\n  imageSrc: string;\n  price: string;\n  sizeLabel: string;\n  title: string;\n};\n\nconst product: ProductCard = {\n  colorLabel: 'Crimson / White',\n  description:\n    'A lightweight everyday runner with a bold profile, cushioned sole, and a shape that works on and off the track.',\n  imageAlt: 'Red running shoe on red background',\n  imageSrc:\n    'https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=1200&q=80',\n  price: '$84.00',\n  sizeLabel: 'EU 39',\n  title: 'Velocity Run One',\n};\n\nconst Card12 = () => {\n  const [liked, setLiked] = useState<boolean>(false);\n\n  return (\n    <div className=\"relative max-w-md overflow-hidden rounded-2xl shadow-lg\">\n      <div className=\"relative h-72\">\n        <img\n          src={product.imageSrc}\n          alt={product.imageAlt}\n          className=\"size-full object-cover\"\n        />\n        <div className=\"absolute inset-0 bg-linear-to-t from-black/10 via-transparent to-transparent\" />\n      </div>\n      <Button\n        size=\"icon\"\n        onClick={() => setLiked((current) => !current)}\n        className=\"absolute top-4 right-4 rounded-full border border-white/60 bg-white/85 text-slate-900 shadow-sm backdrop-blur-sm hover:bg-white dark:border-white/15 dark:bg-black/55 dark:text-slate-100 dark:hover:bg-black/70\"\n      >\n        <HeartIcon\n          className={cn(\n            'size-4',\n            liked ? 'fill-destructive stroke-destructive' : 'stroke-current',\n          )}\n        />\n        <span className=\"sr-only\">Like</span>\n      </Button>\n      <Card className=\"rounded-t-none border-none shadow-none\">\n        <CardHeader className=\"space-y-2\">\n          <CardTitle>{product.title}</CardTitle>\n          <CardDescription className=\"flex flex-wrap items-center gap-2\">\n            <Badge\n              variant=\"outline\"\n              className=\"border-border/70 bg-background/70 rounded-sm\"\n            >\n              {product.sizeLabel}\n            </Badge>\n            <Badge\n              variant=\"outline\"\n              className=\"border-border/70 bg-background/70 rounded-sm\"\n            >\n              {product.colorLabel}\n            </Badge>\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p className=\"text-muted-foreground leading-6\">\n            {product.description}\n          </p>\n        </CardContent>\n        <CardFooter className=\"justify-between gap-3 max-sm:flex-col max-sm:items-stretch\">\n          <div className=\"flex flex-col\">\n            <span className=\"text-muted-foreground text-sm font-medium uppercase\">\n              Price\n            </span>\n            <span className=\"text-2xl font-semibold\">{product.price}</span>\n          </div>\n          <Button\n            size=\"lg\"\n            className=\"bg-sky-600 text-white hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-400\"\n          >\n            Add to cart\n          </Button>\n        </CardFooter>\n      </Card>\n    </div>\n  );\n};\n\nexport default Card12;\n"
    }
  ]
}