function MainComponent() { const [currentAlgorithm, setCurrentAlgorithm] = React.useState(''); function handleAlgorithmChange(event) { setCurrentAlgorithm(event.target.value); } const algorithmOptions = [ { value: 'sorting', label: 'Sorting' }, { value: 'pathfinding', label: 'Pathfinding' }, { value: 'searching', label: 'Searching' } ]; const renderVisualization = ()=>{ switch(currentAlgorithm){ case 'sorting': return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] bg-[#e0e0e0] flex justify-center items-center font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 17, columnNumber: 16 }, __self: this }, "Sorting Algorithm Visualization"); case 'pathfinding': return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] bg-[#e0e0e0] flex justify-center items-center font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 16 }, __self: this }, "Pathfinding Algorithm Visualization"); case 'searching': return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] bg-[#e0e0e0] flex justify-center items-center font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 21, columnNumber: 16 }, __self: this }, "Searching Algorithm Visualization"); default: return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] bg-[#f0f0f0] flex justify-center items-center font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 23, columnNumber: 16 }, __self: this }, "Select an algorithm to visualize."); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center min-h-screen bg-[#fafafa]", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg p-4 relative", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "algorithmSelect", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Choose an Algorithm"), /*#__PURE__*/ React.createElement("select", { name: "algorithm", id: "algorithmSelect", className: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-[#d1d5db] focus:outline-none focus:ring-[#a0a0a0] bg-white rounded-md appearance-none", value: currentAlgorithm, onChange: handleAlgorithmChange, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Select an algorithm"), algorithmOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, option.label))), /*#__PURE__*/ React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-down", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }))), renderVisualization()), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } div { animation: fadeIn 1s ease-in-out forwards; } `)); }