{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-card-editorial",
  "type": "registry:component",
  "title": "Editorial product card",
  "description": "Portrait tile that swaps to a second image on hover, display title, price and a benefit line. The whole card is one link.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "product-card",
    "any"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json",
    "https://storekit-eight.vercel.app/r/price.json",
    "https://storekit-eight.vercel.app/r/product-image.json"
  ],
  "files": [
    {
      "path": "product-card/product-card-editorial.tsx",
      "content": "import { cn } from \"@/components/storekit/lib/cn\"\nimport { Price } from \"@/components/storekit/ui/price\"\nimport { ProductImage } from \"@/components/storekit/ui/product-image\"\n\n/* Editorial tile. Portrait image that swaps to a second shot on hover, a\n   display-face title, the price under it and one benefit line. No button: the whole card\n   is a single link and every part of it shares the hover. */\n\nexport function ProductCardEditorial({\n  title = \"Daily Greens\",\n  benefit = \"28 greens and probiotics in one scoop.\",\n  price = 4900,\n  compareAt,\n  image = \"/placeholder.webp\",\n  hoverImage,\n  href = \"#\",\n  className,\n}: {\n  title?: string\n  benefit?: string\n  price?: number\n  compareAt?: number\n  image?: string\n  hoverImage?: string\n  href?: string\n  className?: string\n}) {\n  return (\n    <a\n      href={href}\n      data-sk-section=\"product-card\"\n      data-sk-variant=\"product-card-editorial\"\n      className={cn(\n        \"group/img flex flex-col gap-4 rounded-sk-card outline-none focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-4 focus-visible:ring-offset-sk-paper\",\n        className\n      )}\n    >\n      <ProductImage src={image} hoverSrc={hoverImage} alt=\"\" aspect=\"portrait\" fit=\"cover\" className=\"rounded-sk-card\" />\n      <div className=\"flex flex-col gap-1.5\">\n        <div className=\"flex flex-col gap-1\">\n          <h3 className=\"text-balance break-words font-sk-display text-lg font-semibold leading-[1.1] tracking-[-0.02em] text-sk-ink underline-offset-4 sm:text-xl decoration-sk-ink/30 group-hover/img:underline\">\n            {title}\n          </h3>\n          <Price amount={price} compareAt={compareAt} size=\"sm\" />\n        </div>\n        <p className=\"text-sm leading-[1.5] text-sk-muted\">{benefit}</p>\n      </div>\n    </a>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/storekit/product-card/product-card-editorial.tsx"
    }
  ],
  "meta": {
    "section": "product-card",
    "variant": "editorial",
    "niche": [
      "any"
    ],
    "commerce": [
      "link"
    ],
    "previewHeight": 520
  }
}