{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "area-chart-custom-legend-example",
  "title": "Area Chart Custom Legend",
  "description": "area-chart-custom-legend-example",
  "dependencies": [
    "@heroicons/react",
    "recharts"
  ],
  "registryDependencies": [
    "https://intentui.com/r/area-chart",
    "https://intentui.com/r/card",
    "https://intentui.com/r/use-mobile"
  ],
  "files": [
    {
      "path": "src/components/examples/visualizations/area-chart/area-chart-custom-legend-example.tsx",
      "content": "'use client'\n\nimport { ArrowUpTrayIcon, ChatBubbleLeftRightIcon, HeartIcon } from '@heroicons/react/24/outline'\nimport { useMemo } from 'react'\nimport type { LegendPayload } from 'recharts'\nimport { AreaChart } from '@/components/ui/area-chart'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { useIsMobile } from '@/hooks/use-mobile'\n\nfunction CustomLegend({ payload }: { payload?: ReadonlyArray<LegendPayload> }) {\n  const icons: Record<string, React.ReactNode> = {\n    likes: <HeartIcon />,\n    comments: <ChatBubbleLeftRightIcon />,\n    shares: <ArrowUpTrayIcon />,\n  }\n\n  return (\n    <CardFooter className=\"flex justify-center gap-4 pt-6 text-sm\">\n      {payload?.map((item) => {\n        const key = item.dataKey?.toString() ?? ''\n        return (\n          <div key={key} className=\"flex items-center gap-2\">\n            <span style={{ color: item.color }}>{icons[key]}</span>\n            <span>{item.value}</span>\n          </div>\n        )\n      })}\n    </CardFooter>\n  )\n}\n\nexport default function AreaChartCustomLegendDemo() {\n  const isMobile = useIsMobile()\n  const data = useMemo(\n    () =>\n      Array.from({ length: 7 }, (_, i) => ({\n        day: `Day ${i + 1}`,\n        likes: Math.floor(100 + Math.random() * 300),\n        comments: Math.floor(20 + Math.random() * 80),\n        shares: Math.floor(10 + Math.random() * 50),\n      })),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Engagement last 7d</CardTitle>\n        <CardDescription>Likes, comments, and shares for the recent week.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <AreaChart\n          containerHeight={isMobile ? 200 : 300}\n          data={data}\n          dataKey=\"day\"\n          xAxisProps={{ interval: 0 }}\n          legend={<CustomLegend />}\n          config={{\n            likes: { label: 'Likes' },\n            comments: { label: 'Comments' },\n            shares: { label: 'Shares' },\n          }}\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/area-chart-custom-legend-example/page.tsx"
    }
  ],
  "type": "registry:page"
}