{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "monthly-earning-chart",
  "type": "registry:component",
  "description": "A Chart component with optional code display for UI blocks.",
  "registryDependencies": [
    "card",
    "button"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/charts/code/MonthlyEarningCode.tsx",
      "content": "\"use client\";\r\nimport Image from \"next/image\";\r\nimport React from \"react\";\r\nimport { Card } from '@/components/ui/card'\r\nimport dynamic from \"next/dynamic\";\r\nconst Chart = dynamic(() => import(\"react-apexcharts\"), { ssr: false });\r\nimport { Icon } from \"@iconify/react\";\r\nconst MonthlyEarning = () => {\r\n  const ChartData: any = {\r\n    series: [\r\n      {\r\n        name: \"\",\r\n        data: [25, 66, 20, 40, 12, 58, 20],\r\n      },\r\n    ],\r\n    chart: {\r\n      type: \"area\",\r\n      height: 80,\r\n      fontFamily: `inherit`,\r\n      foreColor: \"#adb0bb\",\r\n      toolbar: {\r\n        show: false,\r\n      },\r\n      sparkline: {\r\n        enabled: true,\r\n      },\r\n      group: \"sparklines\",\r\n    },\r\n    colors: [\"var(--color-primary)\"],\r\n    stroke: {\r\n      curve: \"smooth\",\r\n      width: 2,\r\n    },\r\n    fill: {\r\n      type: \"gradient\",\r\n      color: [\"var(--color-primary)\"],\r\n      gradient: {\r\n        shadeIntensity: 0,\r\n        inverseColors: false,\r\n        opacityFrom: 0.2,\r\n        opacityTo: 0.8,\r\n        stops: [100],\r\n      },\r\n    },\r\n    tooltip: {\r\n      theme: \"dark\",\r\n      x: {\r\n        format: \"dd/MM/yy HH:mm\",\r\n      },\r\n    },\r\n  };\r\n  return (\r\n    <>\r\n      <Card className=\"mt-[30px] p-0 overflow-hidden\">\r\n        <div className=\"p-6\">\r\n          <div className=\"flex justify-between items-center \">\r\n            <h5 className=\"text-lg font-semibold text-dark dark:text-white\">Monthly Earnings</h5>\r\n            <div className=\"h-10 w-10 bg-lightprimary dark:bg-lightprimary rounded-md flex justify-center items-center\">\r\n              <Image src={'images/svgs/icon-master-card-2.svg'} alt=\"icon\" width=\"50\" height=\"50\" className=\"!w-full !h-auto\" />\r\n            </div>\r\n          </div>\r\n          <div className=\"flex items-center mb-3 mt-1 gap-2\">\r\n            <h4 className=\"text-2xl\">$6,820</h4>\r\n            <span className=\"rounded-full p-1 bg-lightsuccess dark:bg-lightsuccess text-success flex items-center justify-center \">\r\n              <Icon icon=\"solar:arrow-left-up-outline\" height={15} />\r\n            </span>\r\n            <p className=\"text-ld text-sm mb-0\">+9%</p>\r\n          </div>\r\n        </div>\r\n        <Chart\r\n          options={ChartData}\r\n          series={ChartData.series}\r\n          type=\"area\"\r\n          height='80px'\r\n          width='100%'\r\n        />\r\n      </Card>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default MonthlyEarning;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/charts/monthly-earning-chart/MonthlyEarningCode.tsx"
    }
  ]
}