{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "leaderboard-header-example",
  "title": "Leaderboard Header",
  "description": "leaderboard-header-example",
  "dependencies": [
    "@heroicons/react"
  ],
  "registryDependencies": [
    "https://intentui.com/r/button",
    "https://intentui.com/r/leaderboard",
    "https://intentui.com/r/text"
  ],
  "files": [
    {
      "path": "src/components/examples/visualizations/leaderboard/leaderboard-header-example.tsx",
      "content": "'use client'\n\nimport { ArrowPathIcon } from '@heroicons/react/24/outline'\nimport { Button } from '@/components/ui/button'\nimport {\n  Leaderboard,\n  LeaderboardAction,\n  LeaderboardContent,\n  LeaderboardEnd,\n  LeaderboardHeader,\n  LeaderboardItem,\n  LeaderboardStart,\n  LeaderboardTitle,\n} from '@/components/ui/leaderboard'\nimport { Text } from '@/components/ui/text'\n\nconst topRevenueSources = [\n  { label: 'United States', amount: 30000 },\n  { label: 'Europe', amount: 24500 },\n  { label: 'Asia Pacific', amount: 19800 },\n  { label: 'Canada', amount: 12400 },\n  { label: 'Latin America', amount: 7600 },\n]\n\nconst maxAmount = Math.max(...topRevenueSources.map((item) => item.amount))\n\nexport default function LeaderboardHeaderDemo() {\n  return (\n    <Leaderboard>\n      <LeaderboardHeader>\n        <LeaderboardTitle>Top revenue sources</LeaderboardTitle>\n        <Text>Revenue by location for the last month</Text>\n        <LeaderboardAction>\n          <Button intent=\"secondary\" size=\"sq-sm\" isCircle>\n            <ArrowPathIcon />\n          </Button>\n        </LeaderboardAction>\n      </LeaderboardHeader>\n      <LeaderboardContent>\n        {topRevenueSources.map((item, index) => (\n          <LeaderboardItem\n            key={index}\n            maxValue={maxAmount}\n            value={item.amount}\n            formatOptions={{\n              style: 'currency',\n              currency: 'USD',\n              maximumFractionDigits: 0,\n            }}\n          >\n            {({ valueText }) => (\n              <>\n                <LeaderboardStart>{item.label}</LeaderboardStart>\n                <LeaderboardEnd>{valueText}</LeaderboardEnd>\n              </>\n            )}\n          </LeaderboardItem>\n        ))}\n      </LeaderboardContent>\n    </Leaderboard>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/leaderboard-header-example/page.tsx"
    }
  ],
  "type": "registry:page"
}