your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import { Input, Label } from '@foxui/core';
4 import type { CountdownCardData } from './index';
5
6 let { item }: { item: Item; onclose: () => void } = $props();
7
8 let cardData = $derived(item.cardData as CountdownCardData);
9
10 let targetDateValue = $derived.by(() => {
11 if (!cardData.targetDate) return '';
12 return new Date(cardData.targetDate).toISOString().split('T')[0];
13 });
14
15 let targetTimeValue = $derived.by(() => {
16 if (!cardData.targetDate) return '12:00';
17 return new Date(cardData.targetDate).toTimeString().slice(0, 5);
18 });
19
20 function updateTargetDate(dateStr: string, timeStr: string) {
21 if (!dateStr) return;
22 item.cardData.targetDate = new Date(`${dateStr}T${timeStr}`).toISOString();
23 }
24</script>
25
26<div class="flex flex-col gap-4">
27 <div class="flex flex-col gap-2">
28 <Label>Target Date & Time</Label>
29 <div class="flex gap-2">
30 <Input
31 type="date"
32 value={targetDateValue}
33 onchange={(e) => updateTargetDate(e.currentTarget.value, targetTimeValue)}
34 class="flex-1"
35 />
36 <Input
37 type="time"
38 value={targetTimeValue}
39 onchange={(e) => updateTargetDate(targetDateValue, e.currentTarget.value)}
40 class="w-28"
41 />
42 </div>
43 </div>
44</div>