function SmartHomeColorPicker({ color, onChange }) { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "color", value: color, className: "w-32 h-32", onChange: onChange, name: "lightColor", style: { appearance: 'none', WebkitAppearance: 'none' }, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function SmartHomeColorPickerStory() { const [color, setColor] = React.useState('#ffffff'); const handleChange = (e)=>setColor(e.target.value); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SmartHomeColorPicker, { color: color, onChange: handleChange, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [temperature, setTemperature] = React.useState(23); const [humidity, setHumidity] = React.useState(50); const [lightColor, setLightColor] = React.useState('#ffffff'); const [brightness, setBrightness] = React.useState(50); const [fanState, setFanState] = React.useState(false); const [selectedSetting, setSelectedSetting] = React.useState(''); const handleChangeTemperature = (e)=>setTemperature(e.target.value); const handleChangeHumidity = (e)=>setHumidity(e.target.value); const handleChangeLightColor = (e)=>setLightColor(e.target.value); const handleChangeBrightness = (e)=>setBrightness(e.target.value); const toggleFanState = ()=>setFanState(!fanState); const applyMoodLighting = ()=>{ setLightColor('#9933ff'); setBrightness(40); }; const applyComfortLiving = ()=>{ setTemperature(22); setHumidity(40); setFanState(false); }; const applyNightRoutine = ()=>{ setBrightness(0); setFanState(true); }; const applyDateNight = ()=>{ setBrightness(30); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F2F5] flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-roboto text-center my-6", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "Smart Home Controls"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-8 max-w-lg mt-5 mb-5", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, selectedSetting === '' && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center cursor-pointer", onClick: ()=>setSelectedSetting('temperature'), __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-thermometer-half text-4xl", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-roboto mt-2", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, temperature, "°C")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center cursor-pointer", onClick: ()=>setSelectedSetting('humidity'), __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tint text-4xl", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-roboto mt-2", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, humidity, "%")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center cursor-pointer", onClick: ()=>setSelectedSetting('light'), __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb text-4xl", style: { color: lightColor }, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-roboto mt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, brightness, "%")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center cursor-pointer", onClick: ()=>setSelectedSetting('fan'), __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fan text-4xl", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-roboto mt-2", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, fanState ? 'On' : 'Off'))), selectedSetting !== '' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-roboto text-center mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, selectedSetting.charAt(0).toUpperCase() + selectedSetting.slice(1), " Adjustment"), selectedSetting === 'temperature' && /*#__PURE__*/ React.createElement("input", { type: "range", min: "16", max: "30", value: temperature, className: "w-full", onChange: handleChangeTemperature, name: "temperature", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }), selectedSetting === 'humidity' && /*#__PURE__*/ React.createElement("input", { type: "range", min: "30", max: "70", value: humidity, className: "w-full", onChange: handleChangeHumidity, name: "humidity", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }), selectedSetting === 'light' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(SmartHomeColorPicker, { color: lightColor, onChange: handleChangeLightColor, __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "100", value: brightness, className: "w-full mt-4", onChange: handleChangeBrightness, name: "brightness", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this })), selectedSetting === 'fan' && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-32 h-32 flex items-center justify-center rounded-full ${fanState ? 'bg-[#4B0082] text-white' : 'bg-gray-200'} font-roboto text-xl`, onClick: toggleFanState, __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-power-off", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: applyMoodLighting, className: "font-roboto py-2 bg-[#9933ff] text-white rounded", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "🌈 Mood Lighting"), /*#__PURE__*/ React.createElement("button", { onClick: applyComfortLiving, className: "font-roboto py-2 bg-[#FF6347] text-white rounded", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "💆‍♂️ Comfort Living"), /*#__PURE__*/ React.createElement("button", { onClick: applyNightRoutine, className: "font-roboto py-2 bg-[#4B0082] text-white rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "🌙 Night Routine"), /*#__PURE__*/ React.createElement("button", { onClick: applyDateNight, className: "font-roboto py-2 bg-[#FF1493] text-white rounded", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "💕 Date Night")), /*#__PURE__*/ React.createElement("button", { className: "block mx-auto mt-4 bg-[#121212] text-white font-roboto py-2 px-4 rounded", onClick: ()=>setSelectedSetting(''), __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "Back"))); }