{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-12",
  "type": "registry:block",
  "title": "Stats Usage Dashboard",
  "description": "A stats usage dashboard block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "card",
    "chart"
  ],
  "dependencies": [
    "recharts"
  ],
  "files": [
    {
      "path": "content/components/stats/stats-12.tsx",
      "type": "registry:component",
      "target": "components/stats-12.tsx",
      "content": "'use client';\n\nimport { Cell, Pie, PieChart } from 'recharts';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardHeader } from '@/components/ui/card';\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\ninterface UsageItem {\n  name: string;\n  current: string;\n  limit: string;\n  percentage: number;\n  href?: string;\n}\n\nconst usageData: UsageItem[] = [\n  { name: 'ISR Reads', current: '358K', limit: '1M', percentage: 35.8 },\n  { name: 'Edge Requests', current: '317K', limit: '1M', percentage: 31.7 },\n  {\n    name: 'Fast Origin Transfer',\n    current: '3.07 GB',\n    limit: '10 GB',\n    percentage: 30.7,\n  },\n  {\n    name: 'Speed Insights Data Points',\n    current: '791',\n    limit: '10K',\n    percentage: 7.9,\n  },\n  {\n    name: 'Fast Data Transfer',\n    current: '4.98 GB',\n    limit: '100 GB',\n    percentage: 5.0,\n  },\n  {\n    name: 'Function Duration',\n    current: '3.1 GB-Hrs',\n    limit: '100 GB-Hrs',\n    percentage: 3.1,\n  },\n  {\n    name: 'Web Analytics Events',\n    current: '1.3K',\n    limit: '50K',\n    percentage: 2.6,\n  },\n  { name: 'ISR Writes', current: '4.8K', limit: '200K', percentage: 2.4 },\n  {\n    name: 'Function Invocations',\n    current: '19K',\n    limit: '1M',\n    percentage: 1.9,\n  },\n  {\n    name: 'Image Optimization - Cache Reads',\n    current: '4.3K',\n    limit: '300K',\n    percentage: 1.4,\n  },\n];\n\nconst chartConfig = {\n  used: {\n    label: 'Used',\n    color: 'hsl(var(--primary))',\n  },\n  remaining: {\n    label: 'Remaining',\n    color: 'hsl(var(--muted))',\n  },\n} satisfies ChartConfig;\n\nfunction DonutChart({ percentage }: { percentage: number }) {\n  const backgroundData = [{ name: 'background', value: 100, fill: '#E5E7EB' }];\n  const foregroundData = [\n    {\n      name: 'used',\n      value: Math.max(0, Math.min(100, Number(percentage))),\n      fill: '#3B82F6',\n    },\n    {\n      name: 'empty',\n      value: 100 - Math.max(0, Math.min(100, Number(percentage))),\n      fill: 'transparent',\n    },\n  ];\n\n  return (\n    <ChartContainer\n      className=\"aspect-square h-6 w-6 shrink-0\"\n      config={chartConfig}\n    >\n      <PieChart>\n        <Pie\n          cx=\"50%\"\n          cy=\"50%\"\n          data={backgroundData}\n          dataKey=\"value\"\n          innerRadius={6}\n          isAnimationActive={false}\n          nameKey=\"name\"\n          outerRadius={10}\n        >\n          {backgroundData.map((entry, index) => (\n            <Cell fill={entry.fill} key={`bg-cell-${index}`} />\n          ))}\n        </Pie>\n        <Pie\n          cx=\"50%\"\n          cy=\"50%\"\n          data={foregroundData}\n          dataKey=\"value\"\n          endAngle={-270}\n          innerRadius={6}\n          nameKey=\"name\"\n          outerRadius={10}\n          startAngle={90}\n        >\n          {foregroundData.map((entry, index) => (\n            <Cell fill={entry.fill} key={`fg-cell-${index}`} />\n          ))}\n        </Pie>\n      </PieChart>\n    </ChartContainer>\n  );\n}\n\nexport default function Stats12() {\n  return (\n    <Card className=\"w-full max-w-md gap-3 py-5 shadow-2xs\">\n      <CardHeader className=\"px-5\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex flex-col\">\n            <h3 className=\"text-balance font-medium text-sm\">Last 30 days</h3>\n            <p className=\"text-pretty font-medium text-muted-foreground text-xs\">\n              Updated just now\n            </p>\n          </div>\n          <Button className=\"h-6 font-medium text-xs\" size=\"sm\">\n            Upgrade\n          </Button>\n        </div>\n      </CardHeader>\n\n      <CardContent className=\"px-3 pt-0\">\n        <div className=\"space-y-0\">\n          {usageData.map((item, index) => (\n            <div\n              className={`flex items-center gap-3 rounded-sm p-2 transition-colors hover:bg-muted/50 ${\n                index % 2 === 1 ? 'bg-muted/20' : ''\n              }`}\n              key={item.name}\n            >\n              <DonutChart percentage={item.percentage} />\n              <span className=\"flex-1 truncate text-sm leading-4\">\n                {item.name}\n              </span>\n              <span className=\"font-medium text-muted-foreground text-xs tabular-nums tracking-tighter\">\n                {item.current} /{' '}\n                <span className=\"text-foreground\">{item.limit}</span>\n              </span>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}