{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "editorial",
  "title": "Editorial",
  "description": "A poster-style Open Graph image with oversized display type and a large faint ghost word set behind the content.",
  "files": [
    {
      "path": "registry/components/editorial/index.tsx",
      "content": "export interface EditorialProps {\n  kicker: string;\n  title: string;\n  meta: string;\n  ghost?: string;\n  brand: string;\n  logo?: string;\n}\n\nexport const Editorial = ({\n  kicker,\n  title,\n  meta,\n  ghost,\n  brand,\n  logo,\n}: EditorialProps) => (\n  <div\n    style={{\n      backgroundColor: \"#f5f1e9\",\n      color: \"#0a0a0a\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      height: \"100%\",\n      justifyContent: \"space-between\",\n      overflow: \"hidden\",\n      padding: \"80px\",\n      position: \"relative\",\n      width: \"100%\",\n    }}\n  >\n    <div\n      style={{\n        bottom: \"-60px\",\n        color: \"rgba(10,10,10,0.05)\",\n        display: \"flex\",\n        fontSize: \"420px\",\n        fontWeight: 800,\n        letterSpacing: \"-0.04em\",\n        lineHeight: 1,\n        position: \"absolute\",\n        right: \"-20px\",\n      }}\n    >\n      {ghost ?? title.split(\" \")[0]}\n    </div>\n\n    <div\n      style={{\n        alignItems: \"center\",\n        alignSelf: \"flex-start\",\n        backgroundColor: \"rgba(225,29,72,0.15)\",\n        borderRadius: \"999px\",\n        color: \"#e11d48\",\n        display: \"flex\",\n        fontSize: \"26px\",\n        fontWeight: 700,\n        letterSpacing: \"0.04em\",\n        padding: \"10px 24px\",\n        textTransform: \"uppercase\",\n      }}\n    >\n      {kicker}\n    </div>\n\n    <div\n      style={{\n        display: \"flex\",\n        fontSize: title.length > 36 ? 96 : 120,\n        fontWeight: 800,\n        letterSpacing: \"-0.04em\",\n        lineHeight: 0.98,\n        maxWidth: \"1000px\",\n      }}\n    >\n      {title}\n    </div>\n\n    <div\n      style={{\n        alignItems: \"center\",\n        borderTop: \"2px solid rgba(10,10,10,0.15)\",\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        paddingTop: \"28px\",\n      }}\n    >\n      <div style={{ alignItems: \"center\", display: \"flex\", gap: \"12px\" }}>\n        {logo ? (\n          <img\n            alt=\"\"\n            height={32}\n            src={logo}\n            width={32}\n            style={{\n              borderRadius: \"6px\",\n              objectFit: \"contain\",\n            }}\n          />\n        ) : (\n          <div\n            style={{\n              alignItems: \"center\",\n              backgroundColor: \"#e11d48\",\n              borderRadius: \"6px\",\n              color: \"#ffffff\",\n              display: \"flex\",\n              fontSize: \"16px\",\n              fontWeight: 700,\n              height: \"32px\",\n              justifyContent: \"center\",\n              width: \"32px\",\n            }}\n          />\n        )}\n        <div style={{ display: \"flex\", fontSize: \"32px\", fontWeight: 700 }}>\n          {brand}\n        </div>\n      </div>\n      <div style={{ color: \"#52525b\", display: \"flex\", fontSize: \"30px\" }}>\n        {meta}\n      </div>\n    </div>\n  </div>\n);\n",
      "type": "registry:component",
      "target": "components/og/editorial.tsx"
    }
  ],
  "type": "registry:component"
}