\n \n \n

\n );\n}\n\nfunction App({ initialTime }: { initialTime: string }) {\n const [currentTime, setCurrentTime] = useState(DateTime.now());\n const [userTimezone, setUserTimezone] = useState(\"\");\n const [customTimezones, setCustomTimezones] = useState(() => {\n // Load custom timezones from localStorage on initial render\n if (typeof localStorage !== 'undefined') {\n const saved = localStorage.getItem('customTimezones');\n return saved ? JSON.parse(saved) : [];\n }\n return [];\n });\n\n useEffect(() => {\n const timer = setInterval(() => {\n setCurrentTime(DateTime.now());\n }, 1000);\n setUserTimezone(DateTime.local().zoneName);\n return () => clearInterval(timer);\n }, []);\n\n useEffect(() => {\n // Save custom timezones to localStorage whenever they change\n if (typeof localStorage !== 'undefined') {\n localStorage.setItem('customTimezones', JSON.stringify(customTimezones));\n }\n }, [customTimezones]);\n\n const addCustomTimezone = useCallback((newZone: string) => {\n if (newZone && !customTimezones.includes(newZone)) {\n setCustomTimezones([...customTimezones, newZone]);\n }\n }, [customTimezones]);\n\n return (\n

Timezone Comparison Tool

\n Your timezone: {userTimezone}\n

\n Current time: {currentTime.setZone(userTimezone).toFormat(\"HH:mm:ss\")}\n

\n {timezones.map((zone) => (\n \n ))}\n {customTimezones.map((zone) => (\n \n ))}\n

\n \n

\n );\n}\n\nfunction TimezoneRow({ zone, currentTime }: { zone: string; currentTime: DateTime }) {\n const localTime = currentTime.setZone(zone || 'UTC');\n const offset = localTime.offset / 60;\n const offsetString = offset >= 0 ? `+${offset}` : `${offset}`;\n\n return (\n

\n {zone.replace(\"_\", \" \")}\n GMT{offsetString}\n

\n {localTime.toFormat(\"HH:mm:ss\")}\n

\n );\n}\n\n// client-side only code\nif (typeof window !== \"undefined\") {\n const client = () => {\n const root = document.getElementById(\"root\");\n if (root) createRoot(root).render();\n };\n \n // Execute client-side code after the script has loaded\n window.addEventListener('load', client);\n}\n\nasync function server(request: Request): Promise {\n try {\n // Set CORS headers\n const headers = new Headers({\n \"Access-Control-Allow-Origin\": \"*\",\n \"Content-Type\": \"text/html\",\n });\n\n return new Response(`\n \n \n Timezone Comparison Tool\n \n \n \n \n

\n \n \n \n `,\n { headers }\n );\n } catch (error) {\n console.error(\"Server error:\", error);\n return new Response(`Server Error: ${error.message}`, {\n status: 500,\n headers: { \"Content-Type\": \"text/plain\" }\n });\n }\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f0f0f0;\n}\n.container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\nh1 {\n text-align: center;\n color: #333;\n}\n.user-timezone-box {\n background-color: #e6f3ff;\n border-radius: 8px;\n padding: 15px;\n margin-bottom: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n.user-timezone-box .user-timezone {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.user-timezone-box .user-timezone strong {\n font-size: 1.2em;\n color: #0056b3;\n}\n.user-timezone-box .user-time {\n font-size: 1.5em;\n font-weight: bold;\n color: #007bff;\n margin-top: 10px;\n}\n.timezone-list {\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n overflow: hidden;\n}\n.timezone-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 15px 20px;\n border-bottom: 1px solid #eee;\n}\n.timezone-row:last-child {\n border-bottom: none;\n}\n.timezone-info {\n display: flex;\n flex-direction: column;\n}\n.timezone-name {\n font-weight: bold;\n color: #333;\n}\n.timezone-offset {\n font-size: 0.8em;\n color: #666;\n}\n.timezone-time {\n font-size: 1.2em;\n font-weight: bold;\n color: #007bff;\n}\nfooter {\n text-align: center;\n margin-top: 20px;\n font-size: 0.8em;\n color: #666;\n}\nfooter a {\n color: #007bff;\n text-decoration: none;\n}\nfooter a:hover {\n text-decoration: underline;\n}\n.add-timezone {\n padding: 15px 20px;\n border-top: 1px solid #eee;\n}\n.timezone-select {\n display: flex;\n gap: 10px;\n}\n.timezone-select select {\n flex-grow: 1;\n padding: 10px;\n font-size: 1em;\n border: 1px solid #ccc;\n border-radius: 4px;\n background-color: #f8f8f8;\n}\n.timezone-select button {\n padding: 10px 20px;\n font-size: 1em;\n color: white;\n background-color: #007bff;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n.timezone-select button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n.timezone-select button:hover:not(:disabled) {\n background-color: #0056b3;\n}\n.timezone-select select optgroup {\n font-weight: bold;\n}\n.timezone-select select option {\n font-weight: normal;\n}\n`;\n\nexport default server;","createdAt",["D",1725615033076],"version",14,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_132":133,"_134":135},"handle","paulkinlan","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yWG9oT0R2UTMxam83NXp1d0RRaGJYVTY0aFYifQ","forkedVal","fileId","interval","slug","paulkinlan/timeZoneCompareTool","description","// This timezone comparison tool will use the Luxon library for date and time manipulation.","versions",[145,148,152,156,160,164,168,172,176,180,184,188,192,195,199],{"_121":122,"_146":-5,"_119":147,"_116":114},"prId",["D",1725615033076],{"_121":149,"_146":-5,"_119":150,"_116":151},13,["D",1725614825312],"2e533690-6c32-11ef-ae6c-de64eea55b61",{"_121":153,"_146":-5,"_119":154,"_116":155},12,["D",1725614739627],"fb40a5c6-6c31-11ef-8029-de64eea55b61",{"_121":157,"_146":-5,"_119":158,"_116":159},11,["D",1725614696993],"e1d8a246-6c31-11ef-9793-de64eea55b61",{"_121":161,"_146":-5,"_119":162,"_116":163},10,["D",1725614640514],"c02d3b84-6c31-11ef-96bd-de64eea55b61",{"_121":165,"_146":-5,"_119":166,"_116":167},9,["D",1725614593727],"a44a59f6-6c31-11ef-9a70-de64eea55b61",{"_121":169,"_146":-5,"_119":170,"_116":171},8,["D",1725614544785],"871e567a-6c31-11ef-a97b-de64eea55b61",{"_121":173,"_146":-5,"_119":174,"_116":175},7,["D",1725614394071],"2d493016-6c31-11ef-bd5c-de64eea55b61",{"_121":177,"_146":-5,"_119":178,"_116":179},6,["D",1725614363878],"1b4a168c-6c31-11ef-bd5c-de64eea55b61",{"_121":181,"_146":-5,"_119":182,"_116":183},5,["D",1725614323930],"037a98ec-6c31-11ef-9dfa-de64eea55b61",{"_121":185,"_146":-5,"_119":186,"_116":187},4,["D",1725614260259],"dd871f20-6c30-11ef-a6ee-de64eea55b61",{"_121":189,"_146":-5,"_119":190,"_116":191},3,["D",1725614156156],"9f7a2c68-6c30-11ef-a6ee-de64eea55b61",{"_121":94,"_146":-5,"_119":193,"_116":194},["D",1725614122627],"8b7dff5a-6c30-11ef-93ee-de64eea55b61",{"_121":196,"_146":-5,"_119":197,"_116":198},1,["D",1725614080989],"72ac7e16-6c30-11ef-bff5-de64eea55b61",{"_121":33,"_146":-5,"_119":200,"_116":201},["D",1725614055194],"634cb72e-6c30-11ef-9584-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name._index",{"_97":98,"_99":100,"_98":209,"_203":-5,"_204":243,"_132":133,"_141":142,"_104":105,"_102":103,"_121":-7,"_52":53},{"_102":103,"_99":100,"_104":105,"_106":-5,"_107":-5,"_108":109,"_110":70,"_111":112,"_113":114,"_115":27,"_116":114,"_117":118,"_119":210,"_121":122,"_123":27,"_124":33,"_125":33,"_126":33,"_127":33,"_128":33,"_129":33,"_130":-5,"_21":211,"_136":-5,"_137":-5,"_138":-7,"_139":140,"_141":142,"_143":212},["D",1725615033076],{"_132":133,"_134":135},[213,215,217,219,221,223,225,227,229,231,233,235,237,239,241],{"_121":122,"_146":-5,"_119":214,"_116":114},["D",1725615033076],{"_121":149,"_146":-5,"_119":216,"_116":151},["D",1725614825312],{"_121":153,"_146":-5,"_119":218,"_116":155},["D",1725614739627],{"_121":157,"_146":-5,"_119":220,"_116":159},["D",1725614696993],{"_121":161,"_146":-5,"_119":222,"_116":163},["D",1725614640514],{"_121":165,"_146":-5,"_119":224,"_116":167},["D",1725614593727],{"_121":169,"_146":-5,"_119":226,"_116":171},["D",1725614544785],{"_121":173,"_146":-5,"_119":228,"_116":175},["D",1725614394071],{"_121":177,"_146":-5,"_119":230,"_116":179},["D",1725614363878],{"_121":181,"_146":-5,"_119":232,"_116":183},["D",1725614323930],{"_121":185,"_146":-5,"_119":234,"_116":187},["D",1725614260259],{"_121":189,"_146":-5,"_119":236,"_116":191},["D",1725614156156],{"_121":94,"_146":-5,"_119":238,"_116":194},["D",1725614122627],{"_121":196,"_146":-5,"_119":240,"_116":198},["D",1725614080989],{"_121":33,"_146":-5,"_119":242,"_116":201},["D",1725614055194],[],"routes/_app","actionData","errors"]