{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "weekly-stats-chart",
  "type": "registry:component",
  "description": "A Chart component with optional code display for UI blocks.",
  "dependencies": [
    "@iconify/react"
  ],
  "registryDependencies": [
    "card",
    "badge"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/charts/code/WeeklyStatsCode.tsx",
      "content": "\"use client\"\r\nimport dynamic from \"next/dynamic\";\r\nimport { Icon } from \"@iconify/react/dist/iconify.js\";\r\nconst Chart = dynamic(() => import(\"react-apexcharts\"), { ssr: false });\r\nimport { Card } from \"@/components/ui/card\";\r\nimport { Badge, BadgeProps } from \"@/components/ui/badge\";\r\n\r\nconst WeeklyStats = () => {\r\n    const ChartData: any = {\r\n        series: [\r\n            {\r\n                name: \"Sales Per Week\",\r\n                color: \"var(--color-primary)\",\r\n                data: [5, 15, 10, 20],\r\n            },\r\n        ],\r\n        chart: {\r\n            id: \"sparkline3\",\r\n            type: \"area\",\r\n            height: 180,\r\n            sparkline: {\r\n                enabled: true,\r\n            },\r\n            group: \"sparklines\",\r\n            fontFamily: \"inherit\",\r\n            foreColor: \"#adb0bb\",\r\n        },\r\n        stroke: {\r\n            curve: \"smooth\",\r\n            width: 2,\r\n        },\r\n        fill: {\r\n            type: \"gradient\",\r\n            gradient: {\r\n                shadeIntensity: 0,\r\n                inverseColors: false,\r\n                opacityFrom: 0.1,\r\n                opacityTo: 0,\r\n                stops: [20, 280],\r\n            },\r\n        },\r\n\r\n        markers: {\r\n            size: 0,\r\n        },\r\n        tooltip: {\r\n            theme: \"dark\",\r\n            fixed: {\r\n                enabled: true,\r\n                position: \"right\",\r\n            },\r\n            x: {\r\n                show: false,\r\n            },\r\n        },\r\n    };\r\n    interface SalesItem {\r\n        key: string;\r\n        title: string;\r\n        subtitle: string;\r\n        badgeColor: BadgeProps['variant'];\r\n        bgcolor: string;\r\n    }\r\n    const SalesData: SalesItem[] = [\r\n        {\r\n            key: 'topSales',\r\n            title: 'Top Sales',\r\n            subtitle: 'Johnathan Doe',\r\n            badgeColor: 'lightPrimary',\r\n            bgcolor: 'bg-lightprimary text-primary',\r\n        },\r\n        {\r\n            key: 'topSeller',\r\n            title: 'Best Seller',\r\n            subtitle: 'MaterialPro Admin',\r\n            badgeColor: 'lightSuccess',\r\n            bgcolor: 'bg-lightsuccess text-success',\r\n        },\r\n        {\r\n            key: 'topCommented',\r\n            title: ' Most Commented',\r\n            subtitle: 'Ample Admin',\r\n            badgeColor: 'lightError',\r\n            bgcolor: 'bg-lighterror text-error',\r\n        },\r\n    ];\r\n    return (\r\n        <Card className=\"flex h-full flex-col justify-start gap-2\">\r\n            <h5 className=\"text-lg font-semibold text-dark dark:text-white\">Weekly Stats</h5>\r\n            <p className=\"text-sm\">Average sales</p>\r\n            <div className=\"my-6\">\r\n                <Chart\r\n                    options={ChartData}\r\n                    series={ChartData.series}\r\n                    type=\"area\"\r\n                    height=\"170px\"\r\n                    width={\"100%\"}\r\n                />\r\n            </div>\r\n\r\n            {SalesData.map((item) => {\r\n                return (\r\n                    <div key={item.key} className=\"flex items-center justify-between mb-7 last:mb-0\">\r\n                        <div className=\"flex items-center gap-3\">\r\n                            <div className={`${item.bgcolor} h-10 w-10 flex justify-center items-center rounded-md`}>\r\n                                <Icon icon=\"tabler:grid-dots\" className=' text-xl' />\r\n                            </div>\r\n                            <div>\r\n                                <h6 className=\"text-base\">{item.title}</h6>\r\n                                <p className=\" dark:text-darklink text-sm\">{item.subtitle}</p>\r\n                            </div>\r\n                        </div>\r\n                        <Badge variant={item.badgeColor} className=\"py-1.1 rounded-md text-sm border-0\" >+68</Badge>\r\n                    </div>\r\n                )\r\n            })}\r\n        </Card>\r\n    )\r\n}\r\n\r\nexport default WeeklyStats",
      "type": "registry:component",
      "target": "components/tailwind-admin/charts/weekly-stats-chart/WeeklyStatsCode.tsx"
    }
  ]
}