Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// 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 (
<div className="timezone-select">
<select value={selectedZone} onChange={handleChange}>
<option value="">Select a timezone...</option>
<optgroup label="Common Timezones">
{commonTimezones.map((zone) => (
<option key={zone} value={zone}>
{zone.split('/').pop().replace(/_/g, ' ')}
</option>
))}
</optgroup>
{Object.entries(groupedTimezones).map(([continent, zones]) => (
<optgroup key={continent} label={continent}>
{zones.map(({ zone, label }) => (
<option key={zone} value={zone}>{label}</option>
))}
</optgroup>
))}
</select>
<button onClick={handleAdd} disabled={!selectedZone}>Add</button>
</div>
);