your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import { textAlignClasses, textSizeClasses, verticalAlignClasses } from '.';
4 import type { ContentComponentProps } from '../types';
5 import PlainTextEditor from '../utils/PlainTextEditor.svelte';
6
7 let { item = $bindable<Item>() }: ContentComponentProps = $props();
8</script>
9
10<div
11 class={[
12 'line-clamp-1 inline-flex h-full w-full rounded-md p-1 px-2 font-semibold',
13 textAlignClasses[item.cardData.textAlign as string],
14 verticalAlignClasses[item.cardData.verticalAlign ?? ('center' as string)],
15 textSizeClasses[(item.cardData.textSize ?? 1) as number]
16 ]}
17>
18 <PlainTextEditor bind:item key="text" class="line-clamp-1 w-full" />
19</div>