{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "changelog-5",
  "title": "Sticky Version Jump Sidebar",
  "description": "Changelog page with a sticky version-jump sidebar beside long-form release entries grouped into Added, Improved, and Fixed changes.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/changelog/5/changelog-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\n\ntype ChangeType = \"Added\" | \"Improved\" | \"Fixed\"\n\nconst typeVariant: Record<ChangeType, \"default\" | \"secondary\" | \"outline\"> = {\n  Added: \"default\",\n  Improved: \"secondary\",\n  Fixed: \"outline\",\n}\n\nconst releases = [\n  {\n    version: \"2.4.0\",\n    date: \"July 18, 2026\",\n    summary: \"Real-time collaboration and a faster editor.\",\n    changes: [\n      {\n        type: \"Added\" as ChangeType,\n        text: \"Live cursors and presence in the editor.\",\n      },\n      {\n        type: \"Added\" as ChangeType,\n        text: \"Slash commands for inserting blocks.\",\n      },\n      {\n        type: \"Improved\" as ChangeType,\n        text: \"Editor now loads 40% faster on large documents.\",\n      },\n      {\n        type: \"Fixed\" as ChangeType,\n        text: \"Pasted images occasionally lost their aspect ratio.\",\n      },\n    ],\n  },\n  {\n    version: \"2.3.1\",\n    date: \"July 2, 2026\",\n    summary: \"Stability fixes and export improvements.\",\n    changes: [\n      {\n        type: \"Improved\" as ChangeType,\n        text: \"PDF exports now preserve custom fonts.\",\n      },\n      {\n        type: \"Fixed\" as ChangeType,\n        text: \"Workspace switcher could show stale membership.\",\n      },\n    ],\n  },\n  {\n    version: \"2.3.0\",\n    date: \"June 20, 2026\",\n    summary: \"Introducing scheduled reports.\",\n    changes: [\n      {\n        type: \"Added\" as ChangeType,\n        text: \"Schedule reports to send on a recurring cadence.\",\n      },\n      {\n        type: \"Improved\" as ChangeType,\n        text: \"Redesigned the notifications center.\",\n      },\n    ],\n  },\n]\n\nfunction slug(version: string) {\n  return `v${version.replace(/\\./g, \"-\")}`\n}\n\nexport default function ChangelogBlock() {\n  return (\n    <section className=\"w-full bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-4xl\">\n        <div className=\"mb-10 flex flex-col gap-2\">\n          <p className=\"text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n            Changelog\n          </p>\n          <h1 className=\"font-heading text-3xl font-bold tracking-tight\">\n            What&apos;s new\n          </h1>\n          <p className=\"text-sm text-muted-foreground\">\n            Every improvement, fix, and new feature we ship to Acme.\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-10 md:grid-cols-[10rem_1fr]\">\n          <aside className=\"hidden md:block\">\n            <nav className=\"sticky top-8 flex flex-col gap-1\">\n              <span className=\"mb-1 text-[10px] font-semibold tracking-widest text-muted-foreground uppercase\">\n                Releases\n              </span>\n              {releases.map((release) => (\n                <a\n                  key={release.version}\n                  href={`#${slug(release.version)}`}\n                  className=\"flex flex-col border-l border-border py-1 pl-3 text-sm transition-colors hover:border-foreground hover:text-foreground\"\n                >\n                  <span className=\"font-medium tabular-nums\">\n                    v{release.version}\n                  </span>\n                  <span className=\"text-xs text-muted-foreground\">\n                    {release.date}\n                  </span>\n                </a>\n              ))}\n            </nav>\n          </aside>\n\n          <div className=\"flex flex-col gap-12\">\n            {releases.map((release) => (\n              <article\n                key={release.version}\n                id={slug(release.version)}\n                className=\"flex scroll-mt-8 flex-col gap-4\"\n              >\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"flex items-center gap-3\">\n                    <h2 className=\"font-heading text-xl font-bold tracking-tight tabular-nums\">\n                      v{release.version}\n                    </h2>\n                    <span className=\"text-xs text-muted-foreground\">\n                      {release.date}\n                    </span>\n                  </div>\n                  <p className=\"text-sm text-muted-foreground\">\n                    {release.summary}\n                  </p>\n                </div>\n                <ul className=\"flex flex-col gap-2.5 border-t border-border pt-4\">\n                  {release.changes.map((change, index) => (\n                    <li key={index} className=\"flex items-start gap-3 text-sm\">\n                      <Badge\n                        variant={typeVariant[change.type]}\n                        className=\"mt-0.5 w-20 shrink-0 justify-center text-[11px]\"\n                      >\n                        {change.type}\n                      </Badge>\n                      <span className=\"text-foreground\">{change.text}</span>\n                    </li>\n                  ))}\n                </ul>\n              </article>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/changelog-5.tsx"
    }
  ],
  "meta": {
    "height": "841px",
    "tier": "free"
  },
  "categories": [
    "changelog"
  ],
  "type": "registry:block"
}