{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "link-preview",
  "title": "Link Preview",
  "author": "Ben Hofstetter <ben.hofstetter@gmail.com>",
  "description": "A compact link preview card with favicon, title, description, and thumbnail. Accepts preview data as props.",
  "type": "registry:component",
  "categories": [
    "snax"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/components/link-preview/link-preview.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ExternalLink } from \"lucide-react\"\n\nexport type LinkPreviewData = {\n  url: string\n  title: string\n  description?: string\n  image?: string\n  siteName?: string\n}\n\nexport function LinkPreview({\n  data,\n  className,\n}: React.ComponentProps<\"div\"> & {\n  data: LinkPreviewData\n}) {\n  const domain = (() => {\n    try { return new URL(data.url).hostname.replace(\"www.\", \"\") } catch { return data.siteName || \"\" }\n  })()\n\n  return (\n    <a\n      href={data.url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={cn(\n        \"group flex overflow-hidden rounded-lg border bg-background transition-all hover:border-foreground\",\n        className,\n      )}\n    >\n      {data.image && (\n        <div className=\"hidden aspect-square w-24 shrink-0 overflow-hidden border-r sm:block\">\n          <img\n            src={data.image}\n            alt=\"\"\n            className=\"size-full object-cover\"\n          />\n        </div>\n      )}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1 p-3\">\n        <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n          <span className=\"truncate\">{domain}</span>\n          <ExternalLink className=\"size-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100\" />\n        </div>\n        <p className=\"line-clamp-2 text-sm font-medium leading-tight\">{data.title}</p>\n        {data.description && (\n          <p className=\"line-clamp-2 text-xs text-muted-foreground\">{data.description}</p>\n        )}\n      </div>\n    </a>\n  )\n}",
      "type": "registry:component",
      "target": "@components/link-preview.tsx"
    }
  ]
}