{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-03",
  "type": "registry:block",
  "title": "Stats with Card Layout",
  "description": "A stats with card layout block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "card"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "content/components/stats/stats-03.tsx",
      "type": "registry:component",
      "target": "components/stats-03.tsx",
      "content": "'use client';\n\nimport { Card, CardContent } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst data = [\n  {\n    name: 'Unique visitors',\n    stat: '10,450',\n    change: '-12.5%',\n    changeType: 'negative',\n  },\n  {\n    name: 'Bounce rate',\n    stat: '56.1%',\n    change: '+1.8%',\n    changeType: 'positive',\n  },\n  {\n    name: 'Visit duration',\n    stat: '5.2min',\n    change: '+19.7%',\n    changeType: 'positive',\n  },\n  {\n    name: 'Conversion rate',\n    stat: '3.2%',\n    change: '-2.4%',\n    changeType: 'negative',\n  },\n];\n\nexport default function Stats03() {\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=\"p-6 py-4 shadow-2xs\" key={item.name}>\n            <CardContent className=\"p-0\">\n              <dt className=\"font-medium text-muted-foreground text-sm\">\n                {item.name}\n              </dt>\n              <dd className=\"mt-2 flex items-baseline space-x-2.5\">\n                <span className=\"font-semibold text-3xl text-foreground tabular-nums\">\n                  {item.stat}\n                </span>\n                <span\n                  className={cn(\n                    item.changeType === 'positive'\n                      ? 'text-green-800 dark:text-green-400'\n                      : 'text-red-800 dark:text-red-400',\n                    'font-medium text-sm'\n                  )}\n                >\n                  {item.change}\n                </span>\n              </dd>\n            </CardContent>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}