{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-06",
  "type": "registry:block",
  "title": "Stats with Status",
  "description": "A stats with status block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/stats/stats-06.tsx",
      "type": "registry:component",
      "target": "components/stats-06.tsx",
      "content": "'use client';\n\nimport { ArrowRight } from 'lucide-react';\nimport Link from 'next/link';\nimport { cn } from '@/lib/utils';\n\nconst statuses = {\n  within: { label: 'On track', color: 'bg-emerald-500' },\n  observe: { label: 'Needs attention', color: 'bg-amber-500' },\n  critical: { label: 'At risk', color: 'bg-red-500' },\n};\n\nconst data = [\n  {\n    name: 'Europe',\n    stat: '$10,023',\n    goalsAchieved: 3,\n    status: 'observe',\n    href: '#',\n  },\n  {\n    name: 'North America',\n    stat: '$14,092',\n    goalsAchieved: 5,\n    status: 'within',\n    href: '#',\n  },\n  {\n    name: 'Asia',\n    stat: '$113,232',\n    goalsAchieved: 1,\n    status: 'critical',\n    href: '#',\n  },\n] as {\n  name: string;\n  stat: string;\n  goalsAchieved: number;\n  status: keyof typeof statuses;\n  href: string;\n}[];\n\nconst goals = [1, 2, 3, 4, 5];\n\nexport default function Stats06() {\n  return (\n    <div className=\"@container flex w-full items-center justify-center p-10\">\n      <dl className=\"grid w-full @2xl:grid-cols-3 grid-cols-1 @2xl:divide-x divide-y @2xl:divide-y-0 divide-foreground/10 overflow-hidden rounded-xl bg-background shadow-[0_0_0_1px_oklch(0_0_0/0.06),0_1px_2px_-1px_oklch(0_0_0/0.06),0_2px_4px_0_oklch(0_0_0/0.04)] dark:shadow-[0_0_0_1px_oklch(1_0_0/0.08)]\">\n        {data.map((item) => {\n          const status = statuses[item.status];\n          return (\n            <div\n              className=\"group relative flex flex-col gap-6 p-6 hover:bg-muted/40\"\n              key={item.name}\n            >\n              <div className=\"flex items-center justify-between gap-3\">\n                <dt className=\"truncate font-medium text-foreground text-sm\">\n                  {item.name}\n                </dt>\n                <dd className=\"flex shrink-0 items-center gap-2 text-muted-foreground text-sm\">\n                  <span\n                    aria-hidden={true}\n                    className={cn('size-1.5 rounded-full', status.color)}\n                  />\n                  {status.label}\n                </dd>\n              </div>\n              <dd className=\"font-semibold text-3xl text-foreground tabular-nums tracking-tight\">\n                {item.stat}\n              </dd>\n              <dd className=\"flex flex-col gap-2\">\n                <div className=\"flex items-center justify-between text-sm\">\n                  <span className=\"text-muted-foreground\">Goals achieved</span>\n                  <span className=\"font-medium text-foreground tabular-nums\">\n                    {item.goalsAchieved}/{goals.length}\n                  </span>\n                </div>\n                <div aria-hidden={true} className=\"flex gap-1\">\n                  {goals.map((goal) => (\n                    <span\n                      className={cn(\n                        'h-1.5 flex-1 rounded-full',\n                        goal <= item.goalsAchieved\n                          ? status.color\n                          : 'bg-foreground/10'\n                      )}\n                      key={goal}\n                    />\n                  ))}\n                </div>\n              </dd>\n              <dd className=\"text-sm\">\n                <Link\n                  className=\"flex items-center gap-1 font-medium text-foreground focus:outline-none\"\n                  href={item.href}\n                >\n                  <span aria-hidden={true} className=\"absolute inset-0\" />\n                  View region\n                  <ArrowRight\n                    aria-hidden={true}\n                    className=\"size-4 shrink-0 transition-transform group-hover:translate-x-0.5\"\n                  />\n                </Link>\n              </dd>\n            </div>\n          );\n        })}\n      </dl>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}