{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-card",
  "type": "registry:ui",
  "title": "Blog card",
  "description": "Linked Tailwind blog post card with a 16:9 cover image, tag, relative date, title and a two line clamped excerpt. Hover and focus states cover the card.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/aspect-ratio.json",
    "https://ui.minidev.pro/r/relative-time.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/blog-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/blog-card.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\nimport { RelativeTime } from \"@/components/ui/relative-time\"\n\nfunction BlogCard({\n  title,\n  excerpt,\n  href = \"#\",\n  image,\n  date,\n  tag,\n  className,\n}: {\n  title: string\n  excerpt: string\n  href?: string\n  image?: string\n  date?: string | Date\n  tag?: string\n  className?: string\n}) {\n  return (\n    <a\n      data-slot=\"blog-card\"\n      href={href}\n      className={cn(\n        \"group block overflow-hidden rounded-xl border border-border bg-surface outline-none transition-[border-color] duration-[70ms]\",\n        \"hover:border-fg-subtle focus-visible:ring-2 focus-visible:ring-accent\",\n        className\n      )}\n    >\n      <AspectRatio ratio={16 / 9} className=\"bg-sunken\">\n        {image ? (\n          // eslint-disable-next-line @next/next/no-img-element\n          <img src={image} alt=\"\" className=\"absolute inset-0 size-full object-cover\" />\n        ) : null}\n      </AspectRatio>\n      <div className=\"space-y-2 p-4\">\n        <div className=\"flex items-center gap-2 text-xs text-fg-muted\">\n          {tag ? <span className=\"font-medium text-accent\">{tag}</span> : null}\n          {date ? <RelativeTime date={date} /> : null}\n        </div>\n        <h3 className=\"text-sm font-medium text-fg group-hover:text-accent\">{title}</h3>\n        <p className=\"line-clamp-2 text-xs leading-[1.55] text-fg-muted\">{excerpt}</p>\n      </div>\n    </a>\n  )\n}\nexport { BlogCard }\n"
    }
  ]
}