function MainComponent() { const [inputDevice, setInputDevice] = React.useState('mic'); const [outputDevice, setOutputDevice] = React.useState('speaker'); const handleInputChange = (event)=>{ setInputDevice(event.target.value); }; const handleOutputChange = (event)=>{ setOutputDevice(event.target.value); }; const responsiveClasses = "w-full max-w-md px-3 md:max-w-lg lg:max-w-2xl"; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5] p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${responsiveClasses} p-6 bg-white shadow-md rounded-lg`, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl md:text-2xl font-bold font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Android Audio Router"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "input-device", className: "block text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "Input Device"), /*#__PURE__*/ React.createElement("select", { id: "input-device", name: "inputDevice", className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", value: inputDevice, onChange: handleInputChange, __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "mic", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Microphone"), /*#__PURE__*/ React.createElement("option", { value: "system_sound", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "System Sound"), /*#__PURE__*/ React.createElement("option", { value: "app_output", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "Application Output"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "output-device", className: "block text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Output Device"), /*#__PURE__*/ React.createElement("select", { id: "output-device", name: "outputDevice", className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", value: outputDevice, onChange: handleOutputChange, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "speaker", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Speaker"), /*#__PURE__*/ React.createElement("option", { value: "bluetooth", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Bluetooth Device"), /*#__PURE__*/ React.createElement("option", { value: "headphones", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Headphones"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "mute-toggle", name: "muteToggle", type: "checkbox", className: "w-5 h-5 cursor-pointer rounded text-blue-600 border-gray-300 focus:ring-blue-500", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "mute-toggle", className: "ml-2 block text-md font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Mute Output")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-blue-600 text-white font-bold font-roboto rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Route Audio"))))); }