function MainComponent() { const [batteryInfo, setBatteryInfo] = React.useState({ level: "Loading...", charging: "Loading...", chargingTime: "Loading...", dischargingTime: "Loading..." }); React.useEffect(()=>{ async function updateBatteryInfo() { const battery = await navigator.getBattery(); setBatteryInfo({ level: `${battery.level * 100}%`, charging: battery.charging ? "Yes" : "No", chargingTime: `${battery.chargingTime} Seconds`, dischargingTime: `${battery.dischargingTime} Seconds` }); battery.addEventListener('chargingchange', ()=>{ setBatteryInfo((prev)=>({ ...prev, charging: battery.charging ? "Yes" : "No" })); }); battery.addEventListener('levelchange', ()=>{ setBatteryInfo((prev)=>({ ...prev, level: `${battery.level * 100}%` })); }); battery.addEventListener('chargingtimechange', ()=>{ setBatteryInfo((prev)=>({ ...prev, chargingTime: `${battery.chargingTime} Seconds` })); }); battery.addEventListener('dischargingtimechange', ()=>{ setBatteryInfo((prev)=>({ ...prev, dischargingTime: `${battery.dischargingTime} Seconds` })); }); } updateBatteryInfo(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-6 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "🔋 Battery Status"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Battery Level: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 41, columnNumber: 76 }, __self: this }, batteryInfo.level)), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Charging: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 42, columnNumber: 71 }, __self: this }, batteryInfo.charging)), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Charging Time: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 43, columnNumber: 76 }, __self: this }, batteryInfo.chargingTime)), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Discharging Time: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 44, columnNumber: 79 }, __self: this }, batteryInfo.dischargingTime))))); }