{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tweet-card",
  "title": "Tweet Card",
  "description": "Static social-proof card — props, not an API call.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/tweet-card.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\n// `content` is omitted from the base attributes: HTML has its own `content`\n// attribute typed as a string, and ours takes a node.\ninterface TweetCardProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"content\"> {\n  name: string;\n  handle: string;\n  content: React.ReactNode;\n  /** Optional avatar URL; falls back to the author's initial */\n  avatar?: string;\n  /** Free-form, e.g. \"2h\" or \"Mar 14\" */\n  time?: string;\n  verified?: boolean;\n}\n\n/**\n * Static social-proof card in the shape of a tweet. Takes props rather than\n * calling an API — no network request, no rate limit, no runtime dependency.\n */\nexport function TweetCard({\n  name,\n  handle,\n  content,\n  avatar,\n  time,\n  verified = false,\n  className,\n  ...props\n}: TweetCardProps) {\n  return (\n    <figure\n      {...props}\n      data-slot=\"tweet-card\"\n      className={cn(\n        \"flex w-full max-w-sm flex-col gap-3 rounded-2xl border bg-card p-4 text-card-foreground transition-colors hover:bg-muted/40\",\n        className\n      )}\n    >\n      <header className=\"flex items-center gap-3\">\n        {avatar ? (\n          // eslint-disable-next-line @next/next/no-img-element\n          <img loading=\"lazy\" decoding=\"async\"\n            src={avatar}\n            alt=\"\"\n            className=\"size-10 shrink-0 rounded-full object-cover\"\n          />\n        ) : (\n          <span\n            aria-hidden\n            className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-brand-from to-brand-to text-sm font-semibold text-brand-foreground\"\n          >\n            {name.charAt(0)}\n          </span>\n        )}\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-1\">\n            <span className=\"truncate text-sm font-semibold\">{name}</span>\n            {verified && (\n              <svg\n                viewBox=\"0 0 24 24\"\n                className=\"size-4 shrink-0 fill-brand\"\n                aria-label=\"Verified account\"\n                role=\"img\"\n              >\n                <path d=\"M12 2l2.4 1.8 3-.3 1 2.8 2.6 1.5-1 2.9 1 2.9-2.6 1.5-1 2.8-3-.3L12 22l-2.4-1.8-3 .3-1-2.8L3 16.2l1-2.9-1-2.9 2.6-1.5 1-2.8 3 .3z\" />\n                <path\n                  d=\"M8.5 12.2l2.3 2.3 4.5-4.6\"\n                  fill=\"none\"\n                  stroke=\"var(--card)\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            )}\n          </div>\n          <p className=\"truncate text-sm text-muted-foreground\">@{handle}</p>\n        </div>\n        {time && (\n          <time className=\"shrink-0 text-xs text-muted-foreground\">{time}</time>\n        )}\n      </header>\n      <blockquote className=\"text-sm leading-relaxed text-pretty\">\n        {content}\n      </blockquote>\n    </figure>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/tweet-card.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "color-brand": "var(--brand)",
      "color-brand-from": "var(--brand-from)",
      "color-brand-via": "var(--brand-via)",
      "color-brand-to": "var(--brand-to)"
    },
    "light": {
      "brand": "oklch(0.546 0.245 263)",
      "brand-from": "oklch(0.546 0.245 263)",
      "brand-via": "oklch(0.623 0.214 260)",
      "brand-to": "oklch(0.685 0.169 237)"
    },
    "dark": {
      "brand": "oklch(0.623 0.214 260)",
      "brand-from": "oklch(0.623 0.214 260)",
      "brand-via": "oklch(0.707 0.165 255)",
      "brand-to": "oklch(0.746 0.16 233)"
    }
  },
  "type": "registry:ui"
}