{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-01",
  "type": "registry:block",
  "title": "Stats with Trending",
  "description": "A stats with trending block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "card"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "content/components/stats/stats-01.tsx",
      "type": "registry:component",
      "target": "components/stats-01.tsx",
      "content": "import { Card, CardContent } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst data = [\n  {\n    name: 'Profit',\n    value: '$287,654.00',\n    change: '+8.32%',\n    changeType: 'positive',\n  },\n  {\n    name: 'Late payments',\n    value: '$9,435.00',\n    change: '-12.64%',\n    changeType: 'negative',\n  },\n  {\n    name: 'Pending orders',\n    value: '$173,229.00',\n    change: '+2.87%',\n    changeType: 'positive',\n  },\n  {\n    name: 'Operating costs',\n    value: '$52,891.00',\n    change: '-5.73%',\n    changeType: 'negative',\n  },\n];\n\nexport default function Stats01() {\n  return (\n    <div className=\"flex items-center justify-center p-10\">\n      <div className=\"mx-auto grid grid-cols-1 gap-px rounded-xl bg-border sm:grid-cols-2 lg:grid-cols-4\">\n        {data.map((stat, index) => (\n          <Card\n            className={cn(\n              'rounded-none border-0 py-0 shadow-none',\n              index === 0 && 'rounded-l-xl',\n              index === data.length - 1 && 'rounded-r-xl'\n            )}\n            key={stat.name}\n          >\n            <CardContent className=\"flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 p-4 sm:p-6\">\n              <div className=\"font-medium text-muted-foreground text-sm\">\n                {stat.name}\n              </div>\n              <div\n                className={cn(\n                  'font-medium text-xs tabular-nums',\n                  stat.changeType === 'positive'\n                    ? 'text-green-800 dark:text-green-400'\n                    : 'text-red-800 dark:text-red-400'\n                )}\n              >\n                {stat.change}\n              </div>\n              <div className=\"w-full flex-none font-medium text-3xl text-foreground tabular-nums tracking-tight\">\n                {stat.value}\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}