your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { ContentComponentProps } from '../types';
3 import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
4 import { cn } from '@foxui/core';
5
6 let { item = $bindable() }: ContentComponentProps = $props();
7</script>
8
9<div
10 class="text-base-950 dark:text-base-50 flex h-full w-full flex-col items-center justify-center gap-2 px-4"
11>
12 <PlainTextEditor
13 key="text"
14 bind:contentDict={item.cardData}
15 placeholder="Button text"
16 class={cn(
17 'line-clamp-1 text-center text-2xl font-semibold',
18 item.color === 'transparent'
19 ? 'bg-accent-400 dark:bg-accent-500 hover:bg-accent-400 dark:text-base-950 rounded-2xl px-5 py-2.5 text-xl transition-colors duration-100'
20 : ''
21 )}
22 />
23</div>