your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import type { ContentComponentProps } from '../types';
4 import { Input, Label } from '@foxui/core';
5
6 let { item = $bindable<Item>() }: ContentComponentProps = $props();
7
8 // Initialize fontSize if not set
9 if (item.cardData.fontSize === undefined) {
10 item.cardData.fontSize = 0.33;
11 }
12
13 const displayPercent = $derived(Math.round((parseFloat(item.cardData.fontSize) as number) * 100));
14</script>
15
16<div class="flex flex-col gap-3">
17 <div>
18 <Label class="mb-1 text-xs">Text</Label>
19 <Input bind:value={item.cardData.text} placeholder="Enter text" class="w-full" />
20 </div>
21
22 <div>
23 <Label class="mb-1 text-xs">Font Size ({displayPercent}%)</Label>
24 <input
25 type="range"
26 min="0.1"
27 max="0.8"
28 step="0.01"
29 value={parseFloat(item.cardData.fontSize) ?? 0.33}
30 oninput={(e) => {
31 item.cardData.fontSize = e.currentTarget.value.toString();
32 }}
33 class="bg-base-200 dark:bg-base-700 h-2 w-full cursor-pointer appearance-none rounded-lg"
34 />
35 </div>
36</div>