{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-15",
  "type": "registry:block",
  "title": "Stats with Value Breakdown",
  "description": "A stats with value breakdown block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [],
  "dependencies": [],
  "files": [
    {
      "path": "content/components/stats/stats-15.tsx",
      "type": "registry:component",
      "target": "components/stats-15.tsx",
      "content": "import { cn } from '@/lib/utils';\n\nconst data = [\n  {\n    label: 'After 1 year',\n    value: '$2,400',\n    percentage: '+8.2%',\n  },\n  {\n    label: 'After 5 years',\n    value: '$14,800',\n    percentage: '+24.6%',\n  },\n  {\n    label: 'After 10 years',\n    value: '$38,500',\n    percentage: '+52.1%',\n  },\n];\n\nexport function Stats15() {\n  return (\n    <div className=\"w-full max-w-2xs\">\n      <h3 className=\"text-balance font-medium text-foreground text-sm\">\n        Investment growth projection\n      </h3>\n      <ul className=\"mt-2 divide-y divide-border text-sm\" role=\"list\">\n        {data.map((item, index) => (\n          <li className=\"flex items-center justify-between py-3\" key={index}>\n            <span className=\"text-muted-foreground\">{item.label}</span>\n            <span className=\"flex items-center gap-3 tabular-nums\">\n              <span className=\"text-right font-medium text-foreground\">\n                {item.value}\n              </span>\n              <span aria-hidden=\"true\" className=\"h-5 w-px bg-border\" />\n              <span\n                className={cn(\n                  'w-15 rounded px-1.5 py-1 text-center font-semibold text-xs',\n                  'bg-emerald-50 text-emerald-600 dark:bg-emerald-400/10 dark:text-emerald-400'\n                )}\n              >\n                {item.percentage}\n              </span>\n            </span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}