function MainComponent() { const [flashlightOn, setFlashlightOn] = React.useState(false); const [clockVisible, setClockVisible] = React.useState(false); const handleFlashlightToggle = ()=>{ setFlashlightOn(!flashlightOn); const audio = new Audio('/click-sound.mp3'); audio.play(); }; const handleClockClick = ()=>{ setClockVisible(!clockVisible); const audio = new Audio('/ticking-sound.mp3'); if (clockVisible) audio.pause(); else audio.play(); }; const flashlightButtonStyle = flashlightOn ? 'bg-yellow-500' : 'bg-gray-500'; const flashlightIcon = flashlightOn ? 'fa-sun' : 'fa-moon'; const flashlightText = flashlightOn ? 'Flashlight Off' : 'Flashlight On'; const clockStyle = clockVisible ? '' : 'hidden'; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#010101] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-6xl mb-10 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "Smart Tools"), /*#__PURE__*/ React.createElement("button", { className: `p-6 text-black font-semibold rounded-full ${flashlightButtonStyle} transition duration-300`, onClick: handleFlashlightToggle, style: { animation: flashlightOn ? 'click 0.4s ease' : '' }, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${flashlightIcon} pr-4 text-2xl`, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), flashlightText), /*#__PURE__*/ React.createElement("div", { className: "mt-14 text-white font-crimson-text", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Date and Time"), /*#__PURE__*/ React.createElement("div", { className: "text-xl underline cursor-pointer", onClick: handleClockClick, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Analog Clock"), /*#__PURE__*/ React.createElement("div", { className: `${clockStyle}`, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://free.timeanddate.com/clock/i84xexll/n545/szw160/szh160/hbw0/hfc000/cf100/hgr0/fas20/fdi64/mqcfff/mqs4/mql2/mqw4/mqd78/mhcf00/mhs2/mhl3/mhw4/mhd78/mmv0/hhcbbb/hhs2/hmcbbb/hms2/hscfff", frameBorder: "0", width: "160", height: "160", allowTransparency: "true", style: { backgroundColor: 'transparent' }, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, ` @keyframes click { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } `)); }