function MainComponent() { const [timeLeft, setTimeLeft] = React.useState({ days: 0, hours: 0, minutes: 0, seconds: 0 }); React.useEffect(()=>{ const target = new Date(`April 20, 2024 00:00:00`).getTime(); const interval = setInterval(()=>{ const now = new Date().getTime(); const distance = target - now; const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor(distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)); const minutes = Math.floor(distance % (1000 * 60 * 60) / (1000 * 60)); const seconds = Math.floor(distance % (1000 * 60) / 1000); setTimeLeft({ days, hours, minutes, seconds }); if (distance < 0) { clearInterval(interval); setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }); } }, 1000); return ()=>clearInterval(interval); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#121212] mb-8", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "Countdown to April 20th, 2024"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-5xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, timeLeft.days), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Days")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-5xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, timeLeft.hours), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Hours")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-5xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, timeLeft.minutes), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Minutes")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-5xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, timeLeft.seconds), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Seconds")))); }