{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "showcase",
  "title": "Showcase",
  "description": "A product-showcase Open Graph image with a centered headline above a faux browser window and a minimal dashboard UI.",
  "files": [
    {
      "path": "registry/components/showcase/index.tsx",
      "content": "export interface ShowcaseProps {\n  title: string;\n  subtitle: string;\n  url: string;\n  accent?: string;\n}\n\nexport const Showcase = ({ title, subtitle, url, accent }: ShowcaseProps) => (\n  <div\n    style={{\n      alignItems: \"center\",\n      backgroundColor: \"#09090b\",\n      backgroundImage:\n        \"radial-gradient(circle at 50% 0%, rgba(99,102,241,0.2), transparent 55%)\",\n      color: \"#fafafa\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      height: \"100%\",\n      overflow: \"hidden\",\n      paddingTop: \"64px\",\n      width: \"100%\",\n    }}\n  >\n    <div\n      style={{\n        display: \"flex\",\n        fontSize: \"60px\",\n        fontWeight: 700,\n        letterSpacing: \"-0.03em\",\n        textAlign: \"center\",\n      }}\n    >\n      {title}\n    </div>\n    <div\n      style={{\n        color: \"#a1a1aa\",\n        display: \"flex\",\n        fontSize: \"28px\",\n        marginTop: \"14px\",\n        maxWidth: \"760px\",\n        textAlign: \"center\",\n      }}\n    >\n      {subtitle}\n    </div>\n\n    <div\n      style={{\n        backgroundColor: \"#0a0a0a\",\n        border: \"1px solid rgba(250,250,250,0.12)\",\n        borderRadius: \"20px 20px 0 0\",\n        boxShadow: \"0 -10px 80px rgba(99,102,241,0.25)\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        height: \"360px\",\n        marginTop: \"48px\",\n        width: \"1000px\",\n      }}\n    >\n      <div\n        style={{\n          alignItems: \"center\",\n          borderBottom: \"1px solid rgba(250,250,250,0.08)\",\n          display: \"flex\",\n          gap: \"10px\",\n          padding: \"20px 24px\",\n        }}\n      >\n        <div\n          style={{\n            backgroundColor: \"#ef4444\",\n            borderRadius: \"999px\",\n            height: \"14px\",\n            width: \"14px\",\n          }}\n        />\n        <div\n          style={{\n            backgroundColor: \"#f59e0b\",\n            borderRadius: \"999px\",\n            height: \"14px\",\n            width: \"14px\",\n          }}\n        />\n        <div\n          style={{\n            backgroundColor: \"#22c55e\",\n            borderRadius: \"999px\",\n            height: \"14px\",\n            width: \"14px\",\n          }}\n        />\n        <div\n          style={{\n            backgroundColor: \"rgba(250,250,250,0.06)\",\n            borderRadius: \"8px\",\n            color: \"#71717a\",\n            display: \"flex\",\n            fontSize: \"20px\",\n            marginLeft: \"20px\",\n            padding: \"8px 20px\",\n          }}\n        >\n          {url}\n        </div>\n      </div>\n\n      <div style={{ display: \"flex\", flex: 1 }}>\n        <div\n          style={{\n            borderRight: \"1px solid rgba(250,250,250,0.08)\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"18px\",\n            padding: \"28px 24px\",\n            width: \"220px\",\n          }}\n        >\n          {[0.9, 0.6, 0.7, 0.5].map((w, i) => (\n            <div\n              key={w}\n              style={{\n                backgroundColor: i === 0 ? accent : \"rgba(250,250,250,0.12)\",\n                borderRadius: \"8px\",\n                height: \"20px\",\n                width: `${w * 100}%`,\n              }}\n            />\n          ))}\n        </div>\n\n        <div\n          style={{\n            display: \"flex\",\n            flex: 1,\n            flexDirection: \"column\",\n            padding: \"28px 36px\",\n          }}\n        >\n          <div\n            style={{\n              color: \"#71717a\",\n              display: \"flex\",\n              fontSize: \"22px\",\n            }}\n          >\n            Revenue\n          </div>\n          <div\n            style={{\n              display: \"flex\",\n              fontSize: \"56px\",\n              fontWeight: 700,\n              letterSpacing: \"-0.02em\",\n              marginTop: \"4px\",\n            }}\n          >\n            $346,723\n          </div>\n          <div\n            style={{\n              alignItems: \"flex-end\",\n              display: \"flex\",\n              flex: 1,\n              gap: \"18px\",\n              marginTop: \"24px\",\n            }}\n          >\n            {[0.4, 0.65, 0.5, 0.8, 0.55, 0.95, 0.7, 0.85].map((h, i) => (\n              <div\n                key={h}\n                style={{\n                  backgroundColor:\n                    i % 2 === 0 ? accent : \"rgba(250,250,250,0.18)\",\n                  borderRadius: \"6px 6px 0 0\",\n                  display: \"flex\",\n                  flex: 1,\n                  height: `${h * 100}%`,\n                }}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n);\n",
      "type": "registry:component",
      "target": "components/og/showcase.tsx"
    }
  ],
  "type": "registry:component"
}