{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog",
  "title": "Blog",
  "description": "An article Open Graph image with a category badge, headline, excerpt, and author row.",
  "files": [
    {
      "path": "registry/components/blog/index.tsx",
      "content": "export interface BlogProps {\n  category: string;\n  title: string;\n  excerpt: string;\n  author: string;\n  meta: string;\n  avatar?: string;\n  brand: string;\n  logo?: string;\n}\n\nconst initials = (name: string) =>\n  name\n    .split(\" \")\n    .map((part) => part.charAt(0))\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase();\n\nexport const Blog = ({\n  category,\n  title,\n  excerpt,\n  author,\n  meta,\n  avatar,\n  brand,\n  logo,\n}: BlogProps) => (\n  <div\n    style={{\n      backgroundColor: \"#ffffff\",\n      color: \"#0a0a0a\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      height: \"100%\",\n      justifyContent: \"space-between\",\n      padding: \"80px\",\n      position: \"relative\",\n      width: \"100%\",\n    }}\n  >\n    <div\n      style={{\n        alignSelf: \"flex-start\",\n        backgroundColor: \"rgba(124,58,237,0.15)\",\n        borderRadius: \"999px\",\n        color: \"#7c3aed\",\n        display: \"flex\",\n        fontSize: \"26px\",\n        fontWeight: 600,\n        letterSpacing: \"0.02em\",\n        padding: \"10px 22px\",\n        textTransform: \"uppercase\",\n      }}\n    >\n      {category}\n    </div>\n\n    <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n      <div\n        style={{\n          display: \"flex\",\n          fontSize: title.length > 48 ? 64 : 78,\n          fontWeight: 700,\n          letterSpacing: \"-0.03em\",\n          lineHeight: 1.05,\n          maxWidth: \"1000px\",\n        }}\n      >\n        {title}\n      </div>\n      <div\n        style={{\n          color: \"#52525b\",\n          display: \"flex\",\n          fontSize: \"34px\",\n          lineHeight: 1.4,\n          marginTop: \"28px\",\n          maxWidth: \"920px\",\n        }}\n      >\n        {excerpt}\n      </div>\n    </div>\n\n    <div style={{ alignItems: \"center\", display: \"flex\", gap: \"20px\" }}>\n      {avatar ? (\n        <img\n          alt={author}\n          src={avatar}\n          width={72}\n          height={72}\n          style={{ borderRadius: \"999px\" }}\n        />\n      ) : (\n        <div\n          style={{\n            alignItems: \"center\",\n            backgroundColor: \"#7c3aed\",\n            borderRadius: \"999px\",\n            color: \"#ffffff\",\n            display: \"flex\",\n            fontSize: \"30px\",\n            fontWeight: 700,\n            height: \"72px\",\n            justifyContent: \"center\",\n            width: \"72px\",\n          }}\n        >\n          {initials(author)}\n        </div>\n      )}\n      <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n        <div style={{ display: \"flex\", fontSize: \"30px\", fontWeight: 600 }}>\n          {author}\n        </div>\n        <div style={{ color: \"#71717a\", display: \"flex\", fontSize: \"24px\" }}>\n          {meta}\n        </div>\n      </div>\n    </div>\n\n    <div\n      style={{\n        alignItems: \"center\",\n        display: \"flex\",\n        gap: \"12px\",\n        position: \"absolute\",\n        right: \"80px\",\n        top: \"80px\",\n      }}\n    >\n      {logo ? (\n        <img\n          alt=\"\"\n          height={40}\n          src={logo}\n          width={40}\n          style={{\n            borderRadius: \"8px\",\n            objectFit: \"contain\",\n          }}\n        />\n      ) : (\n        <div\n          style={{\n            alignItems: \"center\",\n            backgroundColor: \"#7c3aed\",\n            borderRadius: \"8px\",\n            color: \"#ffffff\",\n            display: \"flex\",\n            fontSize: \"20px\",\n            fontWeight: 700,\n            height: \"40px\",\n            justifyContent: \"center\",\n            width: \"40px\",\n          }}\n        />\n      )}\n      <div\n        style={{\n          fontSize: \"32px\",\n          fontWeight: 700,\n        }}\n      >\n        {brand}\n      </div>\n    </div>\n  </div>\n);\n",
      "type": "registry:component",
      "target": "components/og/blog.tsx"
    }
  ],
  "type": "registry:component"
}