{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payouts-echarts-line-chart",
  "description": "Payout trend card with a glowing gradient line and stat rows",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-line-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-payouts-echarts-line-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsLineChart, type ChartConfig } from \"@/registry/charts/echarts-line-chart\";\nimport { cn } from \"@/lib/utils\";\n\nconst chartData = [\n  { month: \"Jan\", payouts: 312, pending: 548 },\n  { month: \"Feb\", payouts: 388, pending: 502 },\n  { month: \"Mar\", payouts: 342, pending: 561 },\n  { month: \"Apr\", payouts: 455, pending: 470 },\n  { month: \"May\", payouts: 521, pending: 398 },\n  { month: \"Jun\", payouts: 486, pending: 441 },\n  { month: \"Jul\", payouts: 573, pending: 372 },\n  { month: \"Aug\", payouts: 640, pending: 316 },\n  { month: \"Sep\", payouts: 598, pending: 358 },\n  { month: \"Oct\", payouts: 662, pending: 284 },\n  { month: \"Nov\", payouts: 617, pending: 331 },\n  { month: \"Dec\", payouts: 690, pending: 262 },\n];\n\nconst chartConfig = {\n  payouts: {\n    label: \"Payouts\",\n    colors: {\n      light: [\"#f97316\", \"#ec4899\"],\n      dark: [\"#fb923c\", \"#f472b6\"],\n    },\n  },\n  pending: {\n    label: \"Pending\",\n    colors: {\n      light: [\"#0891b2\", \"#7c3aed\"],\n      dark: [\"#22d3ee\", \"#a78bfa\"],\n    },\n  },\n} satisfies ChartConfig;\n\nconst STATS = [\n  {\n    key: \"month\",\n    label: \"Monthly\",\n    value: \"$12,480\",\n    delta: \"+8.4%\",\n    sub: \"11,512 last month\",\n    swatch: \"bg-[#f97316] dark:bg-[#fb923c]\",\n  },\n  {\n    key: \"year\",\n    label: \"Yearly\",\n    value: \"$164,320\",\n    delta: \"+3.1%\",\n    sub: \"159,380 last year\",\n    swatch: \"bg-[#ec4899] dark:bg-[#f472b6]\",\n  },\n];\n\nconst CITIES = [\n  { city: \"Berlin\", amount: \"84,210\" },\n  { city: \"Toronto\", amount: \"61,940\" },\n];\n\nexport function EChartsPayoutsLineChart() {\n  return (\n    <div className=\"flex h-full w-full flex-col px-3 pt-2 pb-1 sm:px-4 sm:pt-4 sm:pb-2\">\n      <div className=\"min-h-24 w-full flex-1 sm:min-h-0\">\n        <EChartsLineChart\n          data={chartData}\n          config={chartConfig}\n          xDataKey=\"month\"\n          className=\"h-full w-full\"\n          curveType=\"monotone\"\n        >\n          <EChartsLineChart.Grid />\n          <EChartsLineChart.YAxis />\n          <EChartsLineChart.Tooltip variant=\"frosted-glass\" />\n          <EChartsLineChart.Line dataKey=\"payouts\" strokeVariant=\"solid\" strokeWidth={2} glowing>\n            <EChartsLineChart.ActiveDot variant=\"ping\" />\n          </EChartsLineChart.Line>\n          <EChartsLineChart.Line dataKey=\"pending\" strokeVariant=\"solid\" strokeWidth={2} glowing>\n            <EChartsLineChart.ActiveDot variant=\"ping\" />\n          </EChartsLineChart.Line>\n        </EChartsLineChart>\n      </div>\n\n      <div className=\"mt-2 grid shrink-0 grid-cols-2 gap-3 sm:mt-3 sm:gap-4\">\n        {STATS.map(({ key, label, value, delta, sub, swatch }) => (\n          <div key={key} className=\"flex flex-col gap-0.5\">\n            <span className=\"text-primary flex items-center gap-1.5 text-[10px] leading-3.5 font-medium sm:text-[11px] sm:leading-normal\">\n              <span className={cn(\"size-2 shrink-0 rounded-[3px]\", swatch)} />\n              {label}\n            </span>\n            <span className=\"text-primary text-xl leading-6 font-semibold tracking-tight sm:text-2xl sm:leading-8\">\n              {value}\n            </span>\n            <span className=\"flex items-center gap-1.5 text-[10px] leading-3.5 sm:text-[11px] sm:leading-normal\">\n              <span className=\"font-medium text-emerald-500\">{delta}</span>\n              <span className=\"text-muted-foreground\">{sub}</span>\n            </span>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"mt-2 shrink-0 sm:mt-3\">\n        {CITIES.map(({ city, amount }, i) => (\n          <div\n            key={city}\n            className={cn(\n              \"border-border flex items-center justify-between py-1 text-xs sm:py-1.5 sm:text-sm\",\n              i > 0 && \"border-t\",\n            )}\n          >\n            <span className=\"text-muted-foreground\">{city}</span>\n            <span className=\"text-primary font-medium\">{amount}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/payouts-echarts-line-chart.tsx"
    }
  ],
  "type": "registry:block"
}