{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-02",
  "type": "registry:block",
  "title": "Stats with Borders",
  "description": "A stats with borders block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "badge",
    "card"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/stats/stats-02.tsx",
      "type": "registry:component",
      "target": "components/stats-02.tsx",
      "content": "import { TrendingDown, TrendingUp } from 'lucide-react';\nimport { Badge } from '@/components/ui/badge';\nimport { Card, CardContent, CardTitle } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst stats = [\n  {\n    metric: 'Active Users',\n    current: '128,456',\n    previous: '115,789',\n    difference: '10.9%',\n    trend: 'up',\n  },\n  {\n    metric: 'Conversion Rate',\n    current: '5.32%',\n    previous: '6.18%',\n    difference: '0.86%',\n    trend: 'down',\n  },\n  {\n    metric: 'Avg. Session Duration',\n    current: '3m 42s',\n    previous: '3m 15s',\n    difference: '13.8%',\n    trend: 'up',\n  },\n];\n\nexport default function Stats02() {\n  return (\n    <div className=\"flex items-center justify-center p-10\">\n      <div className=\"grid grid-cols-1 divide-y divide-border overflow-hidden rounded-lg bg-border md:grid-cols-3 md:divide-x md:divide-y-0\">\n        {stats.map((item) => (\n          <Card\n            className=\"rounded-none border-0 py-0 shadow-sm\"\n            key={item.metric}\n          >\n            <CardContent className=\"p-4 sm:p-6\">\n              <CardTitle className=\"font-normal text-base\">\n                {item.metric}\n              </CardTitle>\n              <div className=\"mt-1 flex items-baseline gap-2 md:block lg:flex\">\n                <div className=\"flex items-baseline font-semibold text-2xl text-primary tabular-nums\">\n                  {item.current}\n                  <span className=\"ml-2 font-medium text-muted-foreground text-sm tabular-nums\">\n                    from {item.previous}\n                  </span>\n                </div>\n\n                <Badge\n                  className={cn(\n                    'inline-flex h-auto items-center border-transparent px-1.5 py-0.5 ps-2.5 font-medium text-xs tabular-nums md:mt-2 lg:mt-0 [&>svg]:size-5!',\n                    item.trend === 'up'\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                  variant=\"outline\"\n                >\n                  {item.trend === 'up' ? (\n                    <TrendingUp className=\"-ml-1 mr-0.5 h-5 w-5 shrink-0 self-center text-green-500\" />\n                  ) : (\n                    <TrendingDown className=\"-ml-1 mr-0.5 h-5 w-5 shrink-0 self-center text-red-500\" />\n                  )}\n\n                  <span className=\"sr-only\">\n                    {' '}\n                    {item.trend === 'up' ? 'Increased' : 'Decreased'} by{' '}\n                  </span>\n                  {item.difference}\n                </Badge>\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}