function MainComponent() { const [data, setData] = React.useState([]); const [chartType, setChartType] = React.useState('bar'); const handleDataChange = (event)=>{ try { setData(JSON.parse(event.target.value)); } catch (error) { console.error('Invalid JSON format'); } }; const handleChartTypeChange = (event)=>{ setChartType(event.target.value); }; let chart; switch(chartType){ case 'bar': chart = /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }); break; case 'line': chart = /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }); break; case 'pie': chart = /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }); break; case 'scatter': chart = /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }); break; default: chart = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "No chart type selected"); } return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen flex flex-col items-center justify-center bg-[#ecedf0] p-4 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dataInput", className: "block mb-2 text-lg text-[#121212]", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Chart Data (JSON)"), /*#__PURE__*/ React.createElement("textarea", { name: "dataInput", className: "w-full h-[150px] border-[#d1d5db] p-2", onChange: handleDataChange, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "chartType", className: "block mb-2 text-lg text-[#121212]", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Chart Type"), /*#__PURE__*/ React.createElement("select", { name: "chartType", className: "border-[#d1d5db] p-2", value: chartType, onChange: handleChartTypeChange, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "bar", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Bar Chart"), /*#__PURE__*/ React.createElement("option", { value: "line", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Line Chart"), /*#__PURE__*/ React.createElement("option", { value: "pie", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Pie Chart"), /*#__PURE__*/ React.createElement("option", { value: "scatter", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Scatter Plot"))), chart); }