function MainComponent() { const [hours, setHours] = React.useState(new Date().getHours()); const [minutes, setMinutes] = React.useState(new Date().getMinutes()); const [seconds, setSeconds] = React.useState(new Date().getSeconds()); const ringBell = (times)=>{ const audio = new Audio('/bell-ring.mp3'); let count = 0; const intervalId = setInterval(()=>{ audio.play(); count++; if (count >= times) clearInterval(intervalId); }, 2000); }; React.useEffect(()=>{ const updateClock = ()=>{ const currentTime = new Date(); setHours(currentTime.getHours()); setMinutes(currentTime.getMinutes()); setSeconds(currentTime.getSeconds()); }; const timerId = setInterval(updateClock, 1000); return ()=>clearInterval(timerId); }, []); React.useEffect(()=>{ const timesToRing = hours % 12 || 12; if (minutes === 0 && seconds === 0) { ringBell(timesToRing); } }, [ hours, minutes, seconds ]); const hourAngle = hours % 12 * 30 + minutes * 0.5; const minuteAngle = minutes * 6; const secondAngle = seconds * 6; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[300px] rounded-full border-4 border-[#333] bg-white flex justify-center items-center", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[15px] h-[15px] bg-[#333] rounded-full z-10", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[8px] bg-[#333] h-1/4 transform origin-bottom left-1/2 -translate-x-[50%]", style: { transform: `rotate(${hourAngle}deg)` }, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[6px] bg-[#333] h-1/3 transform origin-bottom left-1/2 -translate-x-[50%]", style: { transform: `rotate(${minuteAngle}deg)` }, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[4px] bg-red-600 h-1/3 transform origin-bottom left-1/2 -translate-x-[50%]", style: { transform: `rotate(${secondAngle}deg)` }, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), Array.from({ length: 12 }).map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, style: { transform: `translateX(-50%) translateY(-100%) rotate(${i * 30}deg)`, transformOrigin: '50% 100%' }, className: "absolute w-[3px] h-8 bg-[#333] top-0 left-1/2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center font-roboto text-2xl text-[#333]", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "bell", className: "text-6xl", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "🔔"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "The bell will ring for the number of times according to the hour.")))); }