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 FluidTextCard from './FluidTextCard.svelte';
5
6 let { item = $bindable<Item>() }: ContentComponentProps = $props();
7
8 let isEditing = $state(false);
9 let inputElement: HTMLInputElement | null = $state(null);
10
11 function handleClick() {
12 if (isEditing) return;
13 isEditing = true;
14 requestAnimationFrame(() => {
15 inputElement?.focus();
16 inputElement?.select();
17 });
18 }
19
20 function handleBlur() {
21 isEditing = false;
22 }
23
24 function handleKeydown(e: KeyboardEvent) {
25 if (e.key === 'Enter' || e.key === 'Escape') {
26 isEditing = false;
27 }
28 }
29</script>
30
31<!-- svelte-ignore a11y_no_static_element_interactions -->
32<!-- svelte-ignore a11y_click_events_have_key_events -->
33<div
34 class="relative h-full w-full cursor-text transition-colors duration-150 {isEditing
35 ? 'ring-2 ring-white/30'
36 : ''}"
37 onclick={handleClick}
38>
39 {#key item.color}
40 <FluidTextCard {item} />
41 {/key}
42
43 {#if isEditing}
44 <!-- svelte-ignore a11y_autofocus -->
45 <!-- svelte-ignore a11y_no_static_element_interactions -->
46 <!-- svelte-ignore a11y_click_events_have_key_events -->
47 <div
48 class="absolute inset-0 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
49 onclick={(e) => e.stopPropagation()}
50 >
51 <input
52 bind:this={inputElement}
53 bind:value={item.cardData.text}
54 onblur={handleBlur}
55 onkeydown={handleKeydown}
56 class="w-full max-w-md rounded-md border border-white/20 bg-white/10 px-4 py-3 text-center text-2xl font-bold text-white transition-colors outline-none focus:border-white/40 focus:bg-white/20"
57 placeholder="Enter text"
58 autofocus
59 />
60 </div>
61 {/if}
62</div>