function MainComponent() { const switchLabel = 'Flash Mode'; const [menuOpen, setMenuOpen] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212] p-4", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center w-full max-w-[400px]", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "flashSwitch", className: "text-lg font-roboto text-white", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, switchLabel), /*#__PURE__*/ React.createElement("button", { className: "text-white font-roboto", onClick: ()=>setMenuOpen(!menuOpen), __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "☰")), menuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 mt-12 mr-4 w-[200px] bg-[#242424] p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "font-roboto text-white", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "py-2 hover:bg-[#343434] cursor-pointer", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Item 1"), /*#__PURE__*/ React.createElement("li", { className: "py-2 hover:bg-[#343434] cursor-pointer", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Item 2"), /*#__PURE__*/ React.createElement("li", { className: "py-2 hover:bg-[#343434] cursor-pointer", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Item 3"))), /*#__PURE__*/ React.createElement("div", { className: "relative inline-block w-16 align-middle select-none transition duration-200 ease-in mt-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "flashSwitch", id: "flashSwitch", className: "toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "flashSwitch", className: "toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, ` .toggle-checkbox:checked { right: 0; } .toggle-checkbox { right: 10px; bottom: 5px; } .toggle-checkbox:checked + .toggle-label { background-color: #4B5563; } .toggle-label { transition: background-color 0.2s; } `)); }