23 lines
791 B
Svelte
23 lines
791 B
Svelte
<script lang="ts">
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
import * as Dialog from '$lib/components/ui/dialog/index.js';
|
|
|
|
interface Props {
|
|
messageLength: number | undefined;
|
|
showDialog: boolean;
|
|
}
|
|
|
|
let { messageLength, showDialog = $bindable() }: Props = $props();
|
|
const lengthString = $derived(messageLength ? ` (${messageLength})` : '');
|
|
</script>
|
|
|
|
<Dialog.Root bind:open={showDialog}>
|
|
<Dialog.Content class="sm:max-w-[425px]">
|
|
<Dialog.Header>
|
|
<Dialog.Title>Message too long</Dialog.Title>
|
|
</Dialog.Header>
|
|
This message exceeds the maximum character limit of 2000 characters {lengthString}. Please shorten it and then try again.
|
|
<Button onclick={() => (showDialog = false)}>Okay</Button>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|