{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-04",
  "type": "registry:block",
  "title": "Stats with Badges",
  "description": "A stats with badges block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "badge",
    "card"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/stats/stats-04.tsx",
      "type": "registry:component",
      "target": "components/stats-04.tsx",
      "content": "'use client';\n\nimport { TrendingDown, TrendingUp } from 'lucide-react';\nimport { Badge } from '@/components/ui/badge';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst data = [\n  {\n    name: 'Daily active users',\n    stat: '3,450',\n    change: '+12.1%',\n    changeType: 'positive',\n  },\n  {\n    name: 'Weekly sessions',\n    stat: '1,342',\n    change: '-9.8%',\n    changeType: 'negative',\n  },\n  {\n    name: 'Duration',\n    stat: '5.2min',\n    change: '+7.7%',\n    changeType: 'positive',\n  },\n];\n\nexport default function Stats04() {\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-3\">\n        {data.map((item) => (\n          <Card className=\"w-full p-6 py-4 shadow-2xs\" key={item.name}>\n            <CardContent className=\"p-0\">\n              <div className=\"flex items-center justify-between\">\n                <dt className=\"font-medium text-muted-foreground text-sm\">\n                  {item.name}\n                </dt>\n                <Badge\n                  className={cn(\n                    'tabular-nums',\n                    item.changeType === 'positive'\n                      ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'\n                      : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'\n                  )}\n                >\n                  {item.changeType === 'positive' ? (\n                    <TrendingUp aria-hidden={true} data-icon=\"inline-start\" />\n                  ) : (\n                    <TrendingDown aria-hidden={true} data-icon=\"inline-start\" />\n                  )}\n                  <span className=\"sr-only\">\n                    {item.changeType === 'positive' ? 'Increased' : 'Decreased'}{' '}\n                    by{' '}\n                  </span>\n                  {item.change}\n                </Badge>\n              </div>\n              <dd className=\"mt-2 font-semibold text-3xl text-foreground tabular-nums\">\n                {item.stat}\n              </dd>\n            </CardContent>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}