34 lines
922 B
Svelte
34 lines
922 B
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
let { text, maxLines = 10 }: { text: string; maxLines?: number } = $props();
|
|
|
|
let expanded = $state(false);
|
|
let el = $state<HTMLElement | undefined>(undefined);
|
|
let isClamped = $state(false);
|
|
|
|
$effect(() => {
|
|
if (el && !expanded) {
|
|
isClamped = el.scrollHeight > el.clientHeight;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div>
|
|
<div
|
|
bind:this={el}
|
|
style={!expanded ? `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${maxLines}` : ''}
|
|
class="rounded border border-line bg-muted p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-ink"
|
|
>
|
|
{text}
|
|
</div>
|
|
{#if isClamped || expanded}
|
|
<button
|
|
onclick={() => (expanded = !expanded)}
|
|
class="mt-2 font-sans text-xs text-ink-3 transition hover:text-ink"
|
|
>
|
|
{expanded ? m.comp_expandable_show_less() : m.comp_expandable_show_more()}
|
|
</button>
|
|
{/if}
|
|
</div>
|