{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-migration-path",
  "title": "Comparison — Migration Path",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/comparison-migration-path/ComparisonMigrationPath.tsx",
      "content": "'use client'\n\nimport { ArrowRight, Check, Minus, RefreshCw } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\n// verdict drives the icon and tone, so rows stay declarative and a new row\n// cannot forget to style itself.\nconst rows = [\n  {\n    area: 'Warehouse and models',\n    verdict: 'keep',\n    detail: 'Untouched. We read from them, nothing is rewritten.',\n    effort: 'None',\n  },\n  {\n    area: 'dbt project',\n    verdict: 'keep',\n    detail: 'Imported as metric sources; your DAG keeps running.',\n    effort: 'Half a day',\n  },\n  {\n    area: 'Dashboard layouts',\n    verdict: 'change',\n    detail: 'Rebuilt against certified metrics, usually faster than the original.',\n    effort: '1–2 weeks',\n  },\n  {\n    area: 'Metric formulas',\n    verdict: 'change',\n    detail: 'Moved from dashboard config into versioned files.',\n    effort: '1 week',\n  },\n  {\n    area: 'Per-dashboard permissions',\n    verdict: 'retire',\n    detail: 'Replaced by row-level scope from your IdP.',\n    effort: 'None',\n  },\n  {\n    area: 'Bespoke extract jobs',\n    verdict: 'retire',\n    detail: 'Deleted once the metrics they fed are certified.',\n    effort: 'None',\n  },\n]\n\nconst tone = {\n  keep: { icon: Check, label: 'Keep', class: 'text-success' },\n  change: { icon: RefreshCw, label: 'Change', class: 'text-muted-foreground' },\n  retire: { icon: Minus, label: 'Retire', class: 'text-muted-foreground/60' },\n} as const\n\nexport function ComparisonMigrationPath() {\n  return (\n    <section data-slot=\"comparison-migration-path\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">Migration</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">What actually changes</h2>\n          <p className=\"text-muted-foreground mt-3 text-lg\">\n            Most of the stack stays exactly where it is. The effort column is measured from real rollouts.\n          </p>\n        </div>\n\n        <Card className=\"mt-10\">\n          <CardContent className=\"p-0\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Area</TableHead>\n                  <TableHead className=\"w-28\">Verdict</TableHead>\n                  <TableHead>What happens</TableHead>\n                  <TableHead className=\"w-32 text-right\">Effort</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {rows.map((row) => {\n                  const entry = tone[row.verdict as keyof typeof tone]\n                  const Icon = entry.icon\n                  return (\n                    <TableRow key={row.area}>\n                      <TableCell className=\"font-medium\">{row.area}</TableCell>\n                      <TableCell>\n                        <span className={`inline-flex items-center gap-1.5 text-xs ${entry.class}`}>\n                          <Icon className=\"size-3.5\" aria-hidden=\"true\" />\n                          {entry.label}\n                        </span>\n                      </TableCell>\n                      <TableCell className=\"text-muted-foreground text-sm\">{row.detail}</TableCell>\n                      <TableCell className=\"text-right font-mono text-xs\">{row.effort}</TableCell>\n                    </TableRow>\n                  )\n                })}\n              </TableBody>\n            </Table>\n\n            <Separator />\n            <p className=\"text-muted-foreground px-6 py-4 text-xs leading-relaxed\">\n              Effort assumes one engineer and one analyst part-time. Teams with more than about 200 existing dashboards\n              usually stage the rebuild by department rather than doing it in one pass.\n            </p>\n          </CardContent>\n        </Card>\n\n        <Button className=\"mt-6\">\n          Get a migration estimate\n          <ArrowRight className=\"ml-2 size-4\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/ComparisonMigrationPath.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Migration-focused comparison pairing what a team keeps, what changes, and what is retired when moving from an existing tool, with an effort estimate per row.",
  "categories": [
    "marketing"
  ]
}