function MainComponent() { const [timeNY, setTimeNY] = React.useState('--:--:--'); const [timeTokyo, setTimeTokyo] = React.useState('--:--:--'); const [timeRome, setTimeRome] = React.useState('--:--:--'); const [timeStockholm, setTimeStockholm] = React.useState('--:--:--'); const updateTime = ()=>{ const formatTime = (date)=>new Date(date).toLocaleTimeString('en-US', { hour12: false }); setTimeNY(formatTime(new Date().toLocaleString('en-US', { timeZone: 'America/New_York' }))); setTimeTokyo(formatTime(new Date().toLocaleString('en-US', { timeZone: 'Asia/Tokyo' }))); setTimeRome(formatTime(new Date().toLocaleString('en-US', { timeZone: 'Europe/Rome' }))); setTimeStockholm(formatTime(new Date().toLocaleString('en-US', { timeZone: 'Europe/Stockholm' }))); }; React.useEffect(()=>{ const timer = setInterval(updateTime, 1000); return ()=>clearInterval(timer); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center gap-8 p-10 min-h-screen bg-[url('/images/world-map-dark.png')] bg-cover font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, ` @font-face { font-family: 'Arne Jacobsen'; src: url('/fonts/ArneJacobsen.woff2') format('woff2'); } `), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-[#121212] p-6 rounded-xl shadow-lg opacity-90", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium text-center mb-2 text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "USA - New York"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-semibold text-center text-white", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, timeNY)), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-[#121212] p-6 rounded-xl shadow-lg opacity-90", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium text-center mb-2 text-white", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Japan - Tokyo"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-semibold text-center text-white", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, timeTokyo)), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-[#121212] p-6 rounded-xl shadow-lg opacity-90", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium text-center mb-2 text-white", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Italy - Rome"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-semibold text-center text-white", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, timeRome)), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-[#121212] p-6 rounded-xl shadow-lg opacity-90", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium text-center mb-2 text-white", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Sweden - Stockholm"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-semibold text-center text-white", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, timeStockholm))); }