{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile",
  "title": "Profile",
  "description": "A personal / portfolio Open Graph image with a circular avatar beside a name, role, bio, and website pill.",
  "files": [
    {
      "path": "registry/components/profile/index.tsx",
      "content": "export interface ProfileProps {\n  name: string;\n  role: string;\n  bio: string;\n  avatar?: string;\n  website: 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 Profile = ({ name, role, bio, avatar, website }: ProfileProps) => (\n  <div\n    style={{\n      alignItems: \"center\",\n      backgroundColor: \"#18181b\",\n      backgroundImage:\n        \"radial-gradient(circle at 0% 100%, rgba(244,63,94,0.18), transparent 55%)\",\n      color: \"#fafafa\",\n      display: \"flex\",\n      gap: \"64px\",\n      height: \"100%\",\n      padding: \"80px\",\n      width: \"100%\",\n    }}\n  >\n    {avatar ? (\n      <img\n        alt={name}\n        height={300}\n        src={avatar}\n        style={{\n          border: \"4px solid rgba(250,250,250,0.15)\",\n          borderRadius: \"999px\",\n        }}\n        width={300}\n      />\n    ) : (\n      <div\n        style={{\n          alignItems: \"center\",\n          backgroundColor: \"#f43f5e\",\n          border: \"4px solid rgba(250,250,250,0.15)\",\n          borderRadius: \"999px\",\n          color: \"#ffffff\",\n          display: \"flex\",\n          flexShrink: 0,\n          fontSize: \"120px\",\n          fontWeight: 700,\n          height: \"300px\",\n          justifyContent: \"center\",\n          width: \"300px\",\n        }}\n      >\n        {initials(name)}\n      </div>\n    )}\n\n    <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n      <div\n        style={{\n          display: \"flex\",\n          fontSize: \"72px\",\n          fontWeight: 700,\n          letterSpacing: \"-0.03em\",\n          lineHeight: 1.05,\n        }}\n      >\n        {name}\n      </div>\n      <div\n        style={{\n          color: \"#f43f5e\",\n          display: \"flex\",\n          fontSize: \"34px\",\n          fontWeight: 600,\n          marginTop: \"12px\",\n        }}\n      >\n        {role}\n      </div>\n      <div\n        style={{\n          color: \"#a1a1aa\",\n          display: \"flex\",\n          fontSize: \"28px\",\n          lineHeight: 1.4,\n          marginTop: \"24px\",\n          maxWidth: \"560px\",\n        }}\n      >\n        {bio}\n      </div>\n      <div\n        style={{\n          alignItems: \"center\",\n          alignSelf: \"flex-start\",\n          backgroundColor: \"rgba(250,250,250,0.06)\",\n          border: \"1px solid rgba(250,250,250,0.12)\",\n          borderRadius: \"999px\",\n          color: \"#d4d4d8\",\n          display: \"flex\",\n          fontSize: \"26px\",\n          fontWeight: 500,\n          marginTop: \"32px\",\n          padding: \"10px 24px\",\n        }}\n      >\n        {website}\n      </div>\n    </div>\n  </div>\n);\n",
      "type": "registry:component",
      "target": "components/og/profile.tsx"
    }
  ],
  "type": "registry:component"
}