// This timezone comparison tool will use the Luxon library for date and time manipulation. // It will create a React app that displays current times in different timezones and works in both server and client environments. /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useCallback, useMemo } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { DateTime } from "https://esm.sh/luxon"; const timezones = [ "America/Los_Angeles", "America/New_York", "Europe/London", "Europe/Paris", "Asia/Tokyo", "Australia/Sydney", ]; // Helper function to group timezones by country function groupTimezonesByCountry(timezones) { return timezones.reduce((acc, zone) => { const [continent, ...rest] = zone.split('/'); const country = rest.join('/').replace(/_/g, ' '); if (!acc[continent]) { acc[continent] = []; } acc[continent].push({ zone, label: country || continent }); return acc; }, {}); } // List of common timezones const commonTimezones = [ // North America "America/New_York", "America/Los_Angeles", "America/Chicago", "America/Toronto", "America/Vancouver", "America/Mexico_City", // South America "America/Sao_Paulo", "America/Buenos_Aires", "America/Santiago", // Europe "Europe/London", "Europe/Paris", "Europe/Berlin", "Europe/Rome", "Europe/Moscow", // Asia "Asia/Tokyo", "Asia/Shanghai", "Asia/Hong_Kong", "Asia/Singapore", "Asia/Dubai", "Asia/Seoul", "Asia/Kolkata", // Oceania "Australia/Sydney", "Australia/Melbourne", "Pacific/Auckland", ]; function TimezoneSelect({ onSelect }) { const [selectedZone, setSelectedZone] = useState(""); const groupedTimezones = useMemo(() => groupTimezonesByCountry(DateTime.ZONE_NAMES || []), []); const handleChange = (e) => { setSelectedZone(e.target.value); }; const handleAdd = () => { if (selectedZone) { onSelect(selectedZone); setSelectedZone(""); } }; return (

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

Timezone Comparison Tool

Your timezone: {userTimezone}

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

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

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

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

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

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

`, { headers } ); } catch (error) { console.error("Server error:", error); return new Response(`Server Error: ${error.message}`, { status: 500, headers: { "Content-Type": "text/plain" } }); } } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } h1 { text-align: center; color: #333; } .user-timezone-box { background-color: #e6f3ff; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .user-timezone-box .user-timezone { display: flex; flex-direction: column; align-items: center; } .user-timezone-box .user-timezone strong { font-size: 1.2em; color: #0056b3; } .user-timezone-box .user-time { font-size: 1.5em; font-weight: bold; color: #007bff; margin-top: 10px; } .timezone-list { background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; } .timezone-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eee; } .timezone-row:last-child { border-bottom: none; } .timezone-info { display: flex; flex-direction: column; } .timezone-name { font-weight: bold; color: #333; } .timezone-offset { font-size: 0.8em; color: #666; } .timezone-time { font-size: 1.2em; font-weight: bold; color: #007bff; } footer { text-align: center; margin-top: 20px; font-size: 0.8em; color: #666; } footer a { color: #007bff; text-decoration: none; } footer a:hover { text-decoration: underline; } .add-timezone { padding: 15px 20px; border-top: 1px solid #eee; } .timezone-select { display: flex; gap: 10px; } .timezone-select select { flex-grow: 1; padding: 10px; font-size: 1em; border: 1px solid #ccc; border-radius: 4px; background-color: #f8f8f8; } .timezone-select button { padding: 10px 20px; font-size: 1em; color: white; background-color: #007bff; border: none; border-radius: 4px; cursor: pointer; } .timezone-select button:disabled { background-color: #cccccc; cursor: not-allowed; } .timezone-select button:hover:not(:disabled) { background-color: #0056b3; } .timezone-select select optgroup { font-weight: bold; } .timezone-select select option { font-weight: normal; } `; export default server;

timeZoneCompareTool