import React, { useState, useEffect, useCallback, useMemo } from "react"; import { Plus, X, Trash2, Globe, Search } from "lucide-react"; const LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); const T: Record> = { ko: { title: "World Clock", add: "Add", search: "Search timezone...", empty: "Add a timezone", emptyDesc: "Track time around the world", remove: "Remove" }, en: { title: "World Clock", add: "Add", search: "Search timezone...", empty: "Add a timezone", emptyDesc: "Track time around the world", remove: "Remove" }, ja: { title: "World Clock", add: "Add", search: "Search timezone...", empty: "Add a timezone", emptyDesc: "Track time around the world", remove: "Remove" }, zh: { title: "World Clock", add: "Add", search: "Search timezone...", empty: "Add a timezone", emptyDesc: "Track time around the world", remove: "Remove" }, }; const t = T[LANG] || T.en; function getAllTimezones(): string[] { try { return (Intl as any).supportedValuesOf("timeZone"); } catch { return []; } } function formatTzLabel(tz: string): string { var parts = tz.split("/"); return (parts[parts.length - 1] || tz).replace(/_/g, " "); } function getTimeInTz(tz: string) { try { var d = new Date(); var timeStr = d.toLocaleString("en-US", { timeZone: tz, hour: "2-digit", minute: "2-digit", hour12: false }); var dayStr = d.toLocaleString("en-US", { timeZone: tz, weekday: "short" }); var localH = d.getHours() + d.getMinutes() / 60; var splitParts = timeStr.split(":"); var remoteH = parseInt(splitParts[0]) + parseInt(splitParts[1]) / 60; var diff = Math.round(remoteH - localH); if (diff > 12) diff -= 24; if (diff < -12) diff += 24; return { time: timeStr, day: dayStr, diff: diff }; } catch { return { time: "--:--", day: "", diff: 0 }; } } const DEFAULT_ZONES = ["America/New_York", "Europe/London", "Asia/Tokyo"]; export default function App() { const [selected, setSelected] = useSharedStorage("wclock_zones", DEFAULT_ZONES); const [showAdd, setShowAdd] = useState(false); const [query, setQuery] = useState(""); const [now, setNow] = useState(Date.now()); useEffect(function () { var iv = setInterval(function () { setNow(Date.now()); }, 10000); return function () { clearInterval(iv); }; }, []); var allZones = useMemo(function () { return getAllTimezones(); }, []); var safeSelected = selected || DEFAULT_ZONES; var available = useMemo(function () { var lowerQ = query.toLowerCase(); return allZones.filter(function (tz) { return !safeSelected.includes(tz) && (!query || tz.toLowerCase().includes(lowerQ)); }).slice(0, 50); }, [allZones, safeSelected, query]); var addZone = useCallback(function (tz: string) { setSelected(function (prev) { return [...(prev || DEFAULT_ZONES), tz]; }); setShowAdd(false); setQuery(""); }, [setSelected]); var removeZone = useCallback(function (tz: string) { setSelected(function (prev) { return (prev || DEFAULT_ZONES).filter(function (z) { return z !== tz; }); }); }, [setSelected]); return (

{t.title}

{safeSelected.length === 0 ? (

{t.empty}

{t.emptyDesc}

) : (

{safeSelected.map(function (tz) { var info = getTimeInTz(tz); var diffStr = info.diff === 0 ? "" : info.diff > 0 ? "+" + info.diff + "h" : info.diff + "h"; var hourVal = parseInt(info.time.split(":")[0]); var isDay = hourVal >= 6 && hourVal < 20; var label = formatTzLabel(tz); var region = tz.split("/")[0] || ""; return (

{isDay ? "AM" : "PM"}

{label}

{info.day} · {region} {diffStr && 0 ? "text-sky-400" : "text-orange-400")}>{diffStr}}

{info.time}

); })}

)}

{showAdd && (

{t.add}

) { setQuery(e.target.value); }} placeholder={t.search} className="flex-1 bg-transparent text-white text-sm outline-none placeholder:text-white/40" autoFocus />

{available.length === 0 && query && (

No timezones found

)} {available.map(function (tz) { var label = formatTzLabel(tz); return ( ); })}

)}

); }

World Clock

World Clock

reviews