function IoTWaterPurifierControl({ title = "IoT Control Water Purifier", waterLevel, setWaterLevel, filterStatus, purificationActive, setPurificationActive, mode, setMode }) { const purificationStatusClass = purificationActive ? "text-green-500" : "text-red-500"; const purificationStatusText = purificationActive ? "Active" : "Inactive"; const autoModeClass = mode === "Auto" ? "bg-green-600" : "bg-green-500 hover:bg-green-600"; const manualModeClass = mode === "Manual" ? "bg-yellow-600" : "bg-yellow-500 hover:bg-yellow-600"; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center bg-gray-100 p-4 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "waterLevel", className: "block text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Water Level: ", waterLevel, "%"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "waterLevel", name: "waterLevel", className: "w-full", value: waterLevel, onChange: (e)=>setWaterLevel(e.target.value), __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Filter Status:"), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, filterStatus)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Purification Status:"), /*#__PURE__*/ React.createElement("p", { className: `text-lg ${purificationStatusClass}`, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, purificationStatusText)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", onClick: ()=>setPurificationActive(true), __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Start Purification"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 ml-4", onClick: ()=>setPurificationActive(false), __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Stop Purification")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded ${autoModeClass} text-white`, onClick: ()=>setMode("Auto"), __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Auto Mode"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded ${manualModeClass} text-white`, onClick: ()=>setMode("Manual"), __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Manual Mode")))); } function IoTWaterPurifierControlStory() { const [waterLevel, setWaterLevel] = React.useState(50); const [purificationActive, setPurificationActive] = React.useState(false); const [mode, setMode] = React.useState("Manual"); const filterStatus = "Good"; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(IoTWaterPurifierControl, { waterLevel: waterLevel, setWaterLevel: setWaterLevel, filterStatus: filterStatus, purificationActive: purificationActive, setPurificationActive: setPurificationActive, mode: mode, setMode: setMode, __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this })); } function MainComponent() { const [waterLevel, setWaterLevel] = React.useState(50); const [filterStatus, setFilterStatus] = React.useState("Good"); const [purificationActive, setPurificationActive] = React.useState(false); const [mode, setMode] = React.useState("Manual"); return /*#__PURE__*/ React.createElement(IoTWaterPurifierControl, { title: "IoT Control Water Purifier", waterLevel: waterLevel, setWaterLevel: setWaterLevel, filterStatus: filterStatus, purificationActive: purificationActive, setPurificationActive: setPurificationActive, mode: mode, setMode: setMode, __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }); }