Custom Input - Copy this React, Tailwind Component to your project

import React from "react"; import { BsArrowUpRight, BsArrowDownRight } from "react-icons/bs"; const salesData = [ { month: "Jan", sales: 2890 }, { month: "Feb", sales: 3200 }, { month: "Mar", sales: 4500 }, { month: "Apr", sales: 3800 }, { month: "May", sales: 4200 }, { month: "Jun", sales: 5100 }, { month: "Jul", sales: 4800 }, { month: "Aug", sales: 5300 }, { month: "Sep", sales: 5600 }, { month: "Oct", sales: 6000 }, { month: "Nov", sales: 6400 }, { month: "Dec", sales: 7000 }, ]; const Dashboard = () => { return ( <div className="container mx-auto px-4 py-8"> <h1 className="text-2xl font-bold mb-8">E-commerce Dashboard</h1> <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8"> <StatCard title="Total Revenue" value={54000} prefix="$" change={12} isPositive={true} /> <StatCard title="Total Orders" value={1234} change={-3} isPositive={false} /> <StatCard title="New Customers" value={321} change={8} isPositive={true} /> </div> <div className="bg-white rounded-lg shadow p-6 mt-8"> <h2 className="text-xl font-bold mb-4">Sales Overview</h2> <div className="h-96 w-full"> <div className="relative h-full"> <div className="absolute inset-0 bg-gradient-to-t from-blue-50 to-white rounded-lg"> <svg viewBox="0 0 1000 300" className="w-full h-full" preserveAspectRatio="none" > <path d={`M0,${300} ${salesData.map((d, i) => `L${(i * 1000) / 11},${300 - (d.sales / 70)}`).join(" ")} L1000,300 Z`} fill="url(#gradient)" className="transition-all duration-300" > <defs> <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stopColor="#3B82F6" stopOpacity="0.2" /> <stop offset="100%" stopColor="#3B82F6" stopOpacity="0.05" /> </linearGradient> </defs> </path> <path d={`M0,${300} ${salesData.map((d, i) => `L${(i * 1000) / 11},${300 - (d.sales / 70)}`).join(" ")}`} fill="none" stroke="#3B82F6" strokeWidth="2" className="transition-all duration-300" /> </svg> </div> </div> </div> </div> </div> ); }; const StatCard = ({ title, value, prefix, change, isPositive }) => { return ( <div className="bg-white rounded-lg shadow p-6"> <h3 className="text-gray-500 text-sm font-medium">{title}</h3> <div className="mt-2 flex items-baseline"> <span className="text-2xl font-semibold"> {prefix}{value.toLocaleString()} </span> <span className={`ml-2 flex items-center text-sm ${isPositive ? "text-green-500" : "text-red-500"}`}> {isPositive ? ( <BsArrowUpRight className="mr-1" /> ) : ( <BsArrowDownRight className="mr-1" /> )} <span>{Math.abs(change)}%</span> </span> </div> </div> ); }; export default Dashboard;please create inractive achart for a bundle and product ,customer and order please create proper and intractive chart and design this proper