flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import type { SettingsComponentProps } from '../../types';
3 import { Label } from '@foxui/core';
4
5 let { item = $bindable() }: SettingsComponentProps = $props();
6
7 const periodOptions = [
8 { value: '7day', label: '7 Days' },
9 { value: '1month', label: '1 Month' },
10 { value: '3month', label: '3 Months' },
11 { value: '6month', label: '6 Months' },
12 { value: '12month', label: '12 Months' },
13 { value: 'overall', label: 'All Time' }
14 ];
15
16 let period = $derived(item.cardData.period ?? '7day');
17</script>
18
19<div class="flex flex-col gap-2">
20 <Label>Time Period</Label>
21 <div class="flex flex-wrap gap-2">
22 {#each periodOptions as opt (opt.value)}
23 <button
24 class={[
25 'rounded-xl border px-3 py-2 text-sm transition-colors',
26 period === opt.value
27 ? 'bg-accent-500 border-accent-500 text-white'
28 : 'bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 hover:border-accent-400'
29 ]}
30 onclick={() => (item.cardData.period = opt.value)}
31 >
32 {opt.label}
33 </button>
34 {/each}
35 </div>
36</div>