{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product",
  "title": "Product",
  "description": "A two-column product Open Graph image with brand and copy on the left, a product shot on the right, and a price pill.",
  "files": [
    {
      "path": "registry/components/product/index.tsx",
      "content": "export interface ProductProps {\n  brand: string;\n  title: string;\n  description: string;\n  price: string;\n  image?: string;\n  logo?: string;\n}\n\nexport const Product = ({\n  brand,\n  title,\n  description,\n  price,\n  image,\n  logo,\n}: ProductProps) => (\n  <div\n    style={{\n      backgroundColor: \"#09090b\",\n      color: \"#fafafa\",\n      display: \"flex\",\n      height: \"100%\",\n      padding: \"72px\",\n      width: \"100%\",\n    }}\n  >\n    <div\n      style={{\n        display: \"flex\",\n        flex: 1,\n        flexDirection: \"column\",\n        justifyContent: \"space-between\",\n        paddingRight: \"56px\",\n      }}\n    >\n      <div style={{ alignItems: \"center\", display: \"flex\", gap: \"14px\" }}>\n        {logo ? (\n          <img\n            alt=\"\"\n            height={32}\n            src={logo}\n            width={32}\n            style={{\n              borderRadius: \"10px\",\n              objectFit: \"contain\",\n            }}\n          />\n        ) : (\n          <div\n            style={{\n              backgroundColor: \"#6366f1\",\n              borderRadius: \"10px\",\n              height: \"32px\",\n              width: \"32px\",\n            }}\n          />\n        )}\n        <div style={{ display: \"flex\", fontSize: \"28px\", fontWeight: 600 }}>\n          {brand}\n        </div>\n      </div>\n\n      <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n        <div\n          style={{\n            display: \"flex\",\n            fontSize: title.length > 28 ? 64 : 76,\n            fontWeight: 700,\n            letterSpacing: \"-0.03em\",\n            lineHeight: 1.05,\n            maxWidth: \"560px\",\n          }}\n        >\n          {title}\n        </div>\n        <div\n          style={{\n            color: \"#a1a1aa\",\n            display: \"flex\",\n            fontSize: \"30px\",\n            lineHeight: 1.4,\n            marginTop: \"24px\",\n            maxWidth: \"520px\",\n          }}\n        >\n          {description}\n        </div>\n      </div>\n\n      <div\n        style={{\n          alignItems: \"center\",\n          alignSelf: \"flex-start\",\n          backgroundColor: \"#6366f1\",\n          borderRadius: \"999px\",\n          color: \"#ffffff\",\n          display: \"flex\",\n          fontSize: \"32px\",\n          fontWeight: 700,\n          padding: \"14px 32px\",\n        }}\n      >\n        {price}\n      </div>\n    </div>\n\n    <div\n      style={{\n        alignItems: \"center\",\n        backgroundColor: \"#18181b\",\n        backgroundImage: image\n          ? `url(${image})`\n          : \"linear-gradient(135deg, #6366f1 0%, #a855f7 100%)\",\n        backgroundPosition: \"center\",\n        backgroundSize: \"486px 486px\",\n        border: \"1px solid rgba(250,250,250,0.1)\",\n        borderRadius: \"28px\",\n        display: \"flex\",\n        height: \"100%\",\n        justifyContent: \"center\",\n        width: \"486px\",\n      }}\n    />\n  </div>\n);\n",
      "type": "registry:component",
      "target": "components/og/product.tsx"
    }
  ],
  "type": "registry:component"
}