{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat",
  "title": "Stat",
  "description": "A metric / dashboard Open Graph image with an eyebrow label, an oversized number, a trend pill, and a caption.",
  "files": [
    {
      "path": "registry/components/stat/index.tsx",
      "content": "export interface StatProps {\n  label: string;\n  value: string;\n  caption: string;\n  trend?: string;\n  brand: string;\n  logo?: string;\n}\n\nexport const Stat = ({\n  label,\n  value,\n  caption,\n  trend,\n  brand,\n  logo,\n}: StatProps) => (\n  <div\n    style={{\n      backgroundColor: \"#09090b\",\n      backgroundImage:\n        \"radial-gradient(circle at 50% 120%, rgba(34,197,94,0.18), transparent 55%)\",\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: \"#a1a1aa\",\n        display: \"flex\",\n        fontSize: \"30px\",\n        fontWeight: 600,\n        letterSpacing: \"0.04em\",\n        textTransform: \"uppercase\",\n      }}\n    >\n      {label}\n    </div>\n\n    <div\n      style={{\n        alignItems: \"flex-end\",\n        display: \"flex\",\n        gap: \"28px\",\n        marginTop: \"20px\",\n      }}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          fontSize: \"200px\",\n          fontWeight: 800,\n          letterSpacing: \"-0.04em\",\n          lineHeight: 1,\n        }}\n      >\n        {value}\n      </div>\n      {trend ? (\n        <div\n          style={{\n            alignItems: \"center\",\n            backgroundColor: \"rgba(34,197,94,0.15)\",\n            borderRadius: \"999px\",\n            color: \"#22c55e\",\n            display: \"flex\",\n            fontSize: \"34px\",\n            fontWeight: 700,\n            gap: \"10px\",\n            marginBottom: \"36px\",\n            padding: \"10px 22px\",\n          }}\n        >\n          <svg\n            fill=\"none\"\n            height=\"26\"\n            stroke=\"#22c55e\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"3\"\n            viewBox=\"0 0 24 24\"\n            width=\"26\"\n          >\n            <path d=\"M7 17 17 7M9 7h8v8\" />\n          </svg>\n          {trend}\n        </div>\n      ) : null}\n    </div>\n\n    <div\n      style={{\n        color: \"#d4d4d8\",\n        display: \"flex\",\n        fontSize: \"34px\",\n        lineHeight: 1.4,\n        marginTop: \"28px\",\n        maxWidth: \"820px\",\n      }}\n    >\n      {caption}\n    </div>\n\n    <div\n      style={{\n        alignItems: \"center\",\n        bottom: \"56px\",\n        color: \"#71717a\",\n        display: \"flex\",\n        fontSize: \"26px\",\n        fontWeight: 600,\n        gap: \"12px\",\n        position: \"absolute\",\n      }}\n    >\n      {logo ? (\n        <img\n          alt=\"\"\n          height={24}\n          src={logo}\n          width={24}\n          style={{\n            borderRadius: \"6px\",\n            objectFit: \"contain\",\n          }}\n        />\n      ) : (\n        <div\n          style={{\n            backgroundColor: \"#22c55e\",\n            borderRadius: \"8px\",\n            height: \"24px\",\n            width: \"24px\",\n          }}\n        />\n      )}\n      {brand}\n    </div>\n  </div>\n);\n",
      "type": "registry:component",
      "target": "components/og/stat.tsx"
    }
  ],
  "type": "registry:component"
}