{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "changelog",
  "title": "Changelog",
  "description": "A release Open Graph image with a version pill, date, title, and a checklist of highlights.",
  "files": [
    {
      "path": "registry/components/changelog/index.tsx",
      "content": "export interface ChangelogProps {\n  version: string;\n  date: string;\n  title: string;\n  items: string[];\n  brand: string;\n  logo?: string;\n}\n\nexport const Changelog = ({\n  version,\n  date,\n  title,\n  items,\n  brand,\n  logo = \"\",\n}: ChangelogProps) => (\n  <div\n    style={{\n      backgroundColor: \"#0a0a0a\",\n      backgroundImage:\n        \"radial-gradient(circle at 100% 0%, rgba(52,211,153,0.16), transparent 50%)\",\n      color: \"#fafafa\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      height: \"100%\",\n      padding: \"80px\",\n      width: \"100%\",\n    }}\n  >\n    <div style={{ alignItems: \"center\", display: \"flex\", gap: \"20px\" }}>\n      <div\n        style={{\n          alignItems: \"center\",\n          backgroundColor: \"rgba(52,211,153,0.15)\",\n          borderRadius: \"999px\",\n          color: \"#34d399\",\n          display: \"flex\",\n          fontSize: \"28px\",\n          fontWeight: 700,\n          gap: \"8px\",\n          padding: \"10px 22px\",\n        }}\n      >\n        {logo ? (\n          <img\n            alt=\"\"\n            height={20}\n            src={logo}\n            width={20}\n            style={{\n              borderRadius: \"4px\",\n              objectFit: \"contain\",\n            }}\n          />\n        ) : null}\n        {version}\n      </div>\n      <div style={{ color: \"#a1a1aa\", display: \"flex\", fontSize: \"28px\" }}>\n        {date}\n      </div>\n    </div>\n\n    <div\n      style={{\n        display: \"flex\",\n        fontSize: \"80px\",\n        fontWeight: 700,\n        letterSpacing: \"-0.03em\",\n        marginTop: \"32px\",\n      }}\n    >\n      {title}\n    </div>\n\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"22px\",\n        marginTop: \"44px\",\n      }}\n    >\n      {items.slice(0, 4).map((item) => (\n        <div\n          key={item}\n          style={{ alignItems: \"center\", display: \"flex\", gap: \"20px\" }}\n        >\n          <div\n            style={{\n              alignItems: \"center\",\n              backgroundColor: \"rgba(52,211,153,0.15)\",\n              borderRadius: \"999px\",\n              display: \"flex\",\n              height: \"40px\",\n              justifyContent: \"center\",\n              width: \"40px\",\n            }}\n          >\n            <svg\n              fill=\"none\"\n              height=\"22\"\n              stroke=\"#34d399\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"3\"\n              viewBox=\"0 0 24 24\"\n              width=\"22\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </div>\n          <div style={{ color: \"#e4e4e7\", display: \"flex\", fontSize: \"34px\" }}>\n            {item}\n          </div>\n        </div>\n      ))}\n    </div>\n\n    <div\n      style={{\n        alignItems: \"center\",\n        display: \"flex\",\n        gap: \"12px\",\n        position: \"absolute\",\n        right: \"80px\",\n        top: \"80px\",\n      }}\n    >\n      {logo ? (\n        <img\n          alt=\"\"\n          height={40}\n          src={logo}\n          width={40}\n          style={{\n            borderRadius: \"8px\",\n            objectFit: \"contain\",\n          }}\n        />\n      ) : (\n        <div\n          style={{\n            alignItems: \"center\",\n            backgroundColor: \"#34d399\",\n            borderRadius: \"8px\",\n            color: \"#0a0a0a\",\n            display: \"flex\",\n            fontSize: \"20px\",\n            fontWeight: 700,\n            height: \"40px\",\n            justifyContent: \"center\",\n            width: \"40px\",\n          }}\n        />\n      )}\n      <div\n        style={{\n          color: \"#71717a\",\n          fontSize: \"32px\",\n          fontWeight: 700,\n        }}\n      >\n        {brand}\n      </div>\n    </div>\n  </div>\n);\n",
      "type": "registry:component",
      "target": "components/og/changelog.tsx"
    }
  ],
  "type": "registry:component"
}