function MainComponent() { const [frequency, setFrequency] = React.useState(''); const [workoutType, setWorkoutType] = React.useState(''); const handleFrequencyChange = (e)=>{ const value = e.target.value; setFrequency(value); switch(value){ case 'daily': setWorkoutType('Full Body Workout'); break; case '4times': setWorkoutType('Upper/Lower Split'); break; case '3times': setWorkoutType('Push Pull Legs'); break; case '2times': setWorkoutType('Body Part Split'); break; default: setWorkoutType(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white shadow-md rounded-md w-full max-w-lg", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Find Your Workout Plan"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "frequency", className: "block mb-2 text-sm font-medium font-roboto text-gray-900", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "How often do you plan to work out?"), /*#__PURE__*/ React.createElement("select", { name: "frequency", id: "frequency", value: frequency, onChange: handleFrequencyChange, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Select Frequency"), /*#__PURE__*/ React.createElement("option", { value: "daily", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Daily"), /*#__PURE__*/ React.createElement("option", { value: "4times", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "4 times a week"), /*#__PURE__*/ React.createElement("option", { value: "3times", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "3 times a week"), /*#__PURE__*/ React.createElement("option", { value: "2times", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "2 times a week")), workoutType && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "block font-semibold", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "Your Workout Type:"), " ", workoutType))))); }