{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "horizontal-card",
  "title": "Horizontal Card",
  "description": "Side-by-side product card with image, price, and a clear action.",
  "files": [
    {
      "path": "components/cards/HorizontalCard.tsx",
      "content": "type HorizontalCardProps = {\n  image?: string;\n  imageAlt?: string;\n  label?: string;\n  title?: string;\n  description?: string;\n  price?: string;\n  actionLabel?: string;\n  href?: string;\n  className?: string;\n};\n\nexport default function HorizontalCard({\n  image = 'https://assets.uniquel.io/components/stock/photo-1523275335684-37898b6baf30.jpg',\n  imageAlt = 'Minimal black watch',\n  label = 'New arrival',\n  title = 'Arc One Watch',\n  description = 'A precise everyday timepiece with a brushed steel case and sapphire glass.',\n  price = '$249',\n  actionLabel = 'View product',\n  href = '#',\n  className = '',\n}: HorizontalCardProps) {\n  return (\n    <article\n      className={[\n        'flex max-w-xl overflow-hidden rounded-[var(--radius-2xl,1rem)] border border-[color:var(--color-border,#e5e7eb)] bg-[var(--color-card,#fff)] shadow-sm',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <img src={image} alt={imageAlt} className='w-2/5 object-cover' />\n      <div className='flex min-w-0 flex-1 flex-col p-5'>\n        <p className='text-xs font-semibold uppercase tracking-[0.16em] text-[color:var(--color-primary,#4f46e5)]'>{label}</p>\n        <h3 className='mt-2 text-lg font-semibold tracking-tight text-[color:var(--color-card-foreground,#111827)]'>{title}</h3>\n        <p className='mt-2 text-sm leading-6 text-[color:var(--color-muted-foreground,#4b5563)]'>{description}</p>\n        <div className='mt-auto flex items-center justify-between gap-3 pt-5'>\n          <span className='text-base font-semibold text-[color:var(--color-card-foreground,#111827)]'>{price}</span>\n          <a\n            href={href}\n            className='rounded-[var(--radius-md,0.375rem)] bg-[var(--color-primary,#111827)] px-3 py-2 text-xs font-semibold text-[color:var(--color-primary-foreground,#fff)] transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring,#111827)] focus-visible:ring-offset-2'\n          >\n            {actionLabel}\n          </a>\n        </div>\n      </div>\n    </article>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/cards/HorizontalCard.tsx"
    }
  ],
  "categories": [
    "cards"
  ],
  "type": "registry:component"
}