your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import { Button, Label } from '@foxui/core';
4 import type { ClockCardData } from './index';
5 import { onMount } from 'svelte';
6
7 let { item }: { item: Item; onclose: () => void } = $props();
8
9 let cardData = $derived(item.cardData as ClockCardData);
10
11 const timezoneOptions = [
12 { value: 'Pacific/Midway', label: 'UTC-11 (Midway)' },
13 { value: 'Pacific/Honolulu', label: 'UTC-10 (Honolulu)' },
14 { value: 'America/Anchorage', label: 'UTC-9 (Anchorage)' },
15 { value: 'America/Los_Angeles', label: 'UTC-8 (Los Angeles)' },
16 { value: 'America/Denver', label: 'UTC-7 (Denver)' },
17 { value: 'America/Chicago', label: 'UTC-6 (Chicago)' },
18 { value: 'America/New_York', label: 'UTC-5 (New York)' },
19 { value: 'America/Halifax', label: 'UTC-4 (Halifax)' },
20 { value: 'America/Sao_Paulo', label: 'UTC-3 (São Paulo)' },
21 { value: 'Atlantic/South_Georgia', label: 'UTC-2 (South Georgia)' },
22 { value: 'Atlantic/Azores', label: 'UTC-1 (Azores)' },
23 { value: 'UTC', label: 'UTC+0 (London)' },
24 { value: 'Europe/Paris', label: 'UTC+1 (Paris)' },
25 { value: 'Europe/Helsinki', label: 'UTC+2 (Helsinki)' },
26 { value: 'Europe/Moscow', label: 'UTC+3 (Moscow)' },
27 { value: 'Asia/Dubai', label: 'UTC+4 (Dubai)' },
28 { value: 'Asia/Karachi', label: 'UTC+5 (Karachi)' },
29 { value: 'Asia/Kolkata', label: 'UTC+5:30 (Mumbai)' },
30 { value: 'Asia/Dhaka', label: 'UTC+6 (Dhaka)' },
31 { value: 'Asia/Bangkok', label: 'UTC+7 (Bangkok)' },
32 { value: 'Asia/Shanghai', label: 'UTC+8 (Shanghai)' },
33 { value: 'Asia/Tokyo', label: 'UTC+9 (Tokyo)' },
34 { value: 'Australia/Sydney', label: 'UTC+10 (Sydney)' },
35 { value: 'Pacific/Noumea', label: 'UTC+11 (Noumea)' },
36 { value: 'Pacific/Auckland', label: 'UTC+12 (Auckland)' }
37 ];
38
39 onMount(() => {
40 if (!cardData.timezone) {
41 try {
42 item.cardData.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
43 } catch {
44 item.cardData.timezone = 'UTC';
45 }
46 }
47 });
48
49 function useLocalTimezone() {
50 try {
51 item.cardData.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
52 } catch {
53 item.cardData.timezone = 'UTC';
54 }
55 }
56</script>
57
58<div class="flex flex-col gap-4">
59 <div class="flex flex-col gap-2">
60 <Label>Timezone</Label>
61 <div class="flex gap-2">
62 <select
63 value={cardData.timezone || 'UTC'}
64 onchange={(e) => (item.cardData.timezone = e.currentTarget.value)}
65 class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 flex-1 rounded-xl border px-3 py-2"
66 >
67 {#each timezoneOptions as tz (tz.value)}
68 <option value={tz.value}>{tz.label}</option>
69 {/each}
70 </select>
71 <Button size="sm" variant="ghost" onclick={useLocalTimezone}>Local</Button>
72 </div>
73 </div>
74</div>