function MainComponent() { const [selectedRouter, setSelectedRouter] = React.useState(""); const [selectedDevice, setSelectedDevice] = React.useState({ "Router A - WiFi": "", "Router B - Ethernet": "", "Router C - USB": "", "Router D - WiFi": "", "Router E - Ethernet": "", "Router F - USB": "", "Router G - WiFi": "", "Router H - Ethernet": "" }); const handleDeviceChange = (router, device)=>{ setSelectedDevice((prev)=>({ ...prev, [router]: device })); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 bg-[#F5F5F5] min-h-screen", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold font-roboto mb-8", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "Internet Routers Bonding Application"), /*#__PURE__*/ React.createElement("select", { name: "router", onChange: (e)=>setSelectedRouter(e.target.value), className: "mb-8 p-2 rounded border border-gray-300", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Select Router"), /*#__PURE__*/ React.createElement("option", { value: "Router A - WiFi", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Router A - WiFi"), /*#__PURE__*/ React.createElement("option", { value: "Router B - Ethernet", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Router B - Ethernet"), /*#__PURE__*/ React.createElement("option", { value: "Router C - USB", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Router C - USB"), /*#__PURE__*/ React.createElement("option", { value: "Router D - WiFi", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Router D - WiFi"), /*#__PURE__*/ React.createElement("option", { value: "Router E - Ethernet", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Router E - Ethernet"), /*#__PURE__*/ React.createElement("option", { value: "Router F - USB", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Router F - USB"), /*#__PURE__*/ React.createElement("option", { value: "Router G - WiFi", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Router G - WiFi"), /*#__PURE__*/ React.createElement("option", { value: "Router H - Ethernet", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Router H - Ethernet")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-8 justify-center items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, Object.keys(selectedDevice).map((router, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-lg rounded-lg p-6 flex flex-col items-center w-[350px]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${router.includes("WiFi") ? "fa-wifi text-[#007BFF]" : router.includes("Ethernet") ? "fa-ethernet text-[#28A745]" : "fa-usb text-[#DC3545]"} text-5xl`, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mt-4", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, router.split(" - ")[0]), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-base text-[#666] mt-2", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, router.split(" - ")[1], " Connection"), /*#__PURE__*/ React.createElement("select", { name: `${router} device`, value: selectedDevice[router], onChange: (e)=>handleDeviceChange(router, e.target.value), className: "mt-4 p-2 rounded border border-gray-300", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Select Device"), /*#__PURE__*/ React.createElement("option", { value: "Device 1", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Device 1"), /*#__PURE__*/ React.createElement("option", { value: "Device 2", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Device 2"), /*#__PURE__*/ React.createElement("option", { value: "Device 3", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Device 3")))))); }