{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-08",
  "type": "registry:block",
  "title": "Stats with Circular Progress and Links",
  "description": "A stats with circular progress and links block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "card",
    "chart"
  ],
  "dependencies": [
    "recharts"
  ],
  "files": [
    {
      "path": "content/components/stats/stats-08.tsx",
      "type": "registry:component",
      "target": "components/stats-08.tsx",
      "content": "'use client';\n\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';\nimport { Card, CardContent, CardFooter } from '@/components/ui/card';\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nconst data = [\n  {\n    name: 'HR',\n    progress: 25,\n    budget: '$1,000',\n    current: '$250',\n    href: '#',\n    fill: 'var(--chart-1)',\n  },\n  {\n    name: 'Marketing',\n    progress: 55,\n    budget: '$1,000',\n    current: '$550',\n    href: '#',\n    fill: 'var(--chart-2)',\n  },\n  {\n    name: 'Finance',\n    progress: 85,\n    budget: '$1,000',\n    current: '$850',\n    href: '#',\n    fill: 'var(--chart-3)',\n  },\n  {\n    name: 'Engineering',\n    progress: 70,\n    budget: '$2,000',\n    current: '$1,400',\n    href: '#',\n    fill: 'var(--chart-4)',\n  },\n];\n\nconst chartConfig = {\n  progress: {\n    label: 'Progress',\n    color: 'var(--primary)',\n  },\n} satisfies ChartConfig;\n\nexport default function Stats08() {\n  return (\n    <div className=\"flex w-full items-center justify-center p-10\">\n      <dl className=\"grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n        {data.map((item) => (\n          <Card className=\"gap-0 p-0 shadow-2xs\" key={item.name}>\n            <CardContent className=\"p-4\">\n              <div className=\"flex items-center space-x-3\">\n                <div className=\"relative flex items-center justify-center\">\n                  <ChartContainer\n                    className=\"h-[80px] w-[80px]\"\n                    config={chartConfig}\n                  >\n                    <RadialBarChart\n                      barSize={6}\n                      data={[item]}\n                      endAngle={-270}\n                      innerRadius={30}\n                      outerRadius={40}\n                      startAngle={90}\n                    >\n                      <PolarAngleAxis\n                        angleAxisId={0}\n                        axisLine={false}\n                        domain={[0, 100]}\n                        tick={false}\n                        type=\"number\"\n                      />\n                      <RadialBar\n                        angleAxisId={0}\n                        background\n                        cornerRadius={10}\n                        dataKey=\"progress\"\n                        fill={item.fill}\n                      />\n                    </RadialBarChart>\n                  </ChartContainer>\n                  <div className=\"absolute inset-0 flex items-center justify-center\">\n                    <span className=\"font-medium text-base text-foreground\">\n                      {item.progress}%\n                    </span>\n                  </div>\n                </div>\n                <div>\n                  <dd className=\"font-medium text-base text-foreground\">\n                    {item.current} / {item.budget}\n                  </dd>\n                  <dt className=\"text-muted-foreground text-sm\">\n                    Budget {item.name}\n                  </dt>\n                </div>\n              </div>\n            </CardContent>\n            <CardFooter className=\"flex items-center justify-end border-border border-t p-0!\">\n              <a\n                className=\"px-6 py-3 font-medium text-primary text-sm hover:text-primary/90\"\n                href={item.href}\n              >\n                View more &#8594;\n              </a>\n            </CardFooter>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}