{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "leaderboard-icon-example",
  "title": "Leaderboard Icon",
  "description": "leaderboard-icon-example",
  "dependencies": [
    "@heroicons/react"
  ],
  "registryDependencies": [
    "https://intentui.com/r/leaderboard"
  ],
  "files": [
    {
      "path": "src/components/examples/visualizations/leaderboard/leaderboard-icon-example.tsx",
      "content": "'use client'\n\nimport {\n  ComputerDesktopIcon,\n  DevicePhoneMobileIcon,\n  DeviceTabletIcon,\n  TvIcon,\n} from '@heroicons/react/24/outline'\nimport {\n  Leaderboard,\n  LeaderboardContent,\n  LeaderboardEnd,\n  LeaderboardHeader,\n  LeaderboardItem,\n  LeaderboardStart,\n  LeaderboardTitle,\n} from '@/components/ui/leaderboard'\n\nconst devices = [\n  { label: 'Desktop', sessions: 48200, icon: ComputerDesktopIcon },\n  { label: 'Mobile', sessions: 36500, icon: DevicePhoneMobileIcon },\n  { label: 'Tablet', sessions: 12800, icon: DeviceTabletIcon },\n  { label: 'TV', sessions: 4100, icon: TvIcon },\n]\n\nconst maxSessions = Math.max(...devices.map((item) => item.sessions))\n\nexport default function LeaderboardDevicesDemo() {\n  return (\n    <Leaderboard>\n      <LeaderboardHeader>\n        <LeaderboardTitle>Sessions by device</LeaderboardTitle>\n      </LeaderboardHeader>\n      <LeaderboardContent>\n        {devices.map((item, index) => {\n          const Icon = item.icon\n\n          return (\n            <LeaderboardItem\n              key={index}\n              maxValue={maxSessions}\n              value={item.sessions}\n              formatOptions={{\n                notation: 'compact',\n              }}\n            >\n              {({ valueText }) => (\n                <>\n                  <LeaderboardStart>\n                    <span className=\"flex items-center gap-2\">\n                      <Icon className=\"size-4\" />\n                      {item.label}\n                    </span>\n                  </LeaderboardStart>\n                  <LeaderboardEnd>{valueText}</LeaderboardEnd>\n                </>\n              )}\n            </LeaderboardItem>\n          )\n        })}\n      </LeaderboardContent>\n    </Leaderboard>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/leaderboard-icon-example/page.tsx"
    }
  ],
  "type": "registry:page"
}