{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quote",
  "title": "Quote",
  "description": "A testimonial / tweet-style Open Graph image with a large quote and an author row.",
  "files": [
    {
      "path": "registry/components/quote/index.tsx",
      "content": "export interface QuoteProps {\n  quote: string;\n  author: string;\n  handle: string;\n  avatar?: 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 Quote = ({ quote, author, handle, avatar }: QuoteProps) => (\n  <div\n    style={{\n      backgroundColor: \"#18181b\",\n      color: \"#fafafa\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      height: \"100%\",\n      justifyContent: \"center\",\n      padding: \"96px\",\n      width: \"100%\",\n    }}\n  >\n    <div\n      style={{\n        color: \"#f472b6\",\n        display: \"flex\",\n        fontSize: \"140px\",\n        fontWeight: 800,\n        lineHeight: 0.8,\n      }}\n    >\n      &ldquo;\n    </div>\n\n    <div\n      style={{\n        display: \"flex\",\n        fontSize: quote.length > 90 ? 52 : 64,\n        fontWeight: 600,\n        letterSpacing: \"-0.02em\",\n        lineHeight: 1.2,\n        marginTop: \"8px\",\n        maxWidth: \"1000px\",\n      }}\n    >\n      {quote}\n    </div>\n\n    <div\n      style={{\n        alignItems: \"center\",\n        display: \"flex\",\n        gap: \"20px\",\n        marginTop: \"56px\",\n      }}\n    >\n      {avatar ? (\n        <img\n          alt={author}\n          src={avatar}\n          width={76}\n          height={76}\n          style={{ borderRadius: \"999px\" }}\n        />\n      ) : (\n        <div\n          style={{\n            alignItems: \"center\",\n            backgroundColor: \"#f472b6\",\n            borderRadius: \"999px\",\n            color: \"#18181b\",\n            display: \"flex\",\n            fontSize: \"32px\",\n            fontWeight: 700,\n            height: \"76px\",\n            justifyContent: \"center\",\n            width: \"76px\",\n          }}\n        >\n          {initials(author)}\n        </div>\n      )}\n      <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n        <div style={{ display: \"flex\", fontSize: \"32px\", fontWeight: 600 }}>\n          {author}\n        </div>\n        <div style={{ color: \"#a1a1aa\", display: \"flex\", fontSize: \"26px\" }}>\n          {handle}\n        </div>\n      </div>\n    </div>\n  </div>\n);\n",
      "type": "registry:component",
      "target": "components/og/quote.tsx"
    }
  ],
  "type": "registry:component"
}