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={["line-clamp-1 inline-flex h-full w-full rounded-md p-1 px-2 font-semibold",
12 textAlignClasses[item.cardData.textAlign as string],
13 verticalAlignClasses[item.cardData.verticalAlign ?? ('center' as string)],
14 textSizeClasses[(item.cardData.textSize ?? 1) as number]
15 ]}
16>
17 <PlainTextEditor bind:item key="text" class="line-clamp-1 w-full" />
18</div>