Back
Version 8
9/6/2024
// 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 } 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",
];
const allTimezones = DateTime.ZONE_NAMES || [];
function App({ initialTime }: { initialTime: string }) {
const [currentTime, setCurrentTime] = useState(DateTime.now());
const [userTimezone, setUserTimezone] = useState("");
const [customTimezones, setCustomTimezones] = useState<string[]>([]);
useEffect(() => {
const timer = setInterval(() => {
setCurrentTime(DateTime.now());
}, 1000);
setUserTimezone(DateTime.local().zoneName);
return () => clearInterval(timer);
}, []);
const addCustomTimezone = useCallback((event) => {
const newZone = event.target.value;
if (newZone && !customTimezones.includes(newZone)) {
setCustomTimezones([...customTimezones, newZone]);
paulkinlan-timezonecomparetool.web.val.run
Updated: September 6, 2024