{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-07",
  "type": "registry:block",
  "title": "Stats with Circular Progress",
  "description": "A stats with circular progress block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "card",
    "chart"
  ],
  "dependencies": [
    "lucide-react",
    "recharts"
  ],
  "files": [
    {
      "path": "content/components/stats/stats-07.tsx",
      "type": "registry:component",
      "target": "components/stats-07.tsx",
      "content": "'use client';\n\nimport { ExternalLink } from 'lucide-react';\nimport Link from 'next/link';\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nconst data = [\n  {\n    name: 'Workspaces',\n    capacity: 20,\n    current: 1,\n    allowed: 5,\n    fill: 'var(--chart-1)',\n  },\n  {\n    name: 'Dashboards',\n    capacity: 10,\n    current: 2,\n    allowed: 20,\n    fill: 'var(--chart-2)',\n  },\n  {\n    name: 'Chart widgets',\n    capacity: 30,\n    current: 15,\n    allowed: 50,\n    fill: 'var(--chart-3)',\n  },\n  {\n    name: 'Storage',\n    capacity: 50,\n    current: 25,\n    allowed: 100,\n    fill: 'var(--chart-4)',\n  },\n];\n\nconst chartConfig = {\n  capacity: {\n    label: 'Capacity',\n    color: 'hsl(var(--primary))',\n  },\n} satisfies ChartConfig;\n\nexport default function Stats07() {\n  return (\n    <div className=\"flex w-full items-center justify-center p-10\">\n      <div className=\"w-full\">\n        <h2 className=\"text-balance font-medium text-foreground text-xl\">\n          Plan overview\n        </h2>\n        <p className=\"mt-1 text-pretty text-muted-foreground text-sm leading-6\">\n          You are currently on the{' '}\n          <span className=\"font-medium text-foreground\">starter plan</span>.{' '}\n          <Link\n            className=\"inline-flex items-center gap-1 text-primary hover:underline hover:underline-offset-4\"\n            href=\"#\"\n          >\n            View other plans\n            <ExternalLink aria-hidden={true} className=\"size-4\" />\n          </Link>\n        </p>\n        <dl className=\"mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n          {data.map((item) => (\n            <Card className=\"p-4 shadow-2xs\" key={item.name}>\n              <CardContent className=\"flex items-center space-x-4 p-0\">\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=\"capacity\"\n                        fill=\"var(--primary)\"\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.capacity}%\n                    </span>\n                  </div>\n                </div>\n                <div>\n                  <dt className=\"font-medium text-foreground text-sm\">\n                    {item.name}\n                  </dt>\n                  <dd className=\"text-muted-foreground text-sm\">\n                    {item.current} of {item.allowed} used\n                  </dd>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </dl>\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}