43 lines
1 KiB
Svelte
43 lines
1 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { stripMarkdown } from '$lib/markdown';
|
||
|
|
|
||
|
|
let { title, subtitle, content, actions, maxContentLength = 100 } = $props();
|
||
|
|
|
||
|
|
let displayContent = $derived(
|
||
|
|
maxContentLength && content.length > maxContentLength
|
||
|
|
? stripMarkdown(content.slice(0, maxContentLength)) + '...'
|
||
|
|
: stripMarkdown(content)
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-content">
|
||
|
|
<p class="title is-4">{title}</p>
|
||
|
|
{#if subtitle}
|
||
|
|
<p class="subtitle is-6">{subtitle}</p>
|
||
|
|
{/if}
|
||
|
|
<div class="content">
|
||
|
|
{displayContent}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{#if actions.length > 0}
|
||
|
|
<footer class="card-footer">
|
||
|
|
{#each actions as action}
|
||
|
|
{#if action.href}
|
||
|
|
<a href={action.href} class="card-footer-item" class:has-text-danger={action.isDangerous}>
|
||
|
|
{action.label}
|
||
|
|
</a>
|
||
|
|
{:else}
|
||
|
|
<button
|
||
|
|
class="card-footer-item button is-ghost"
|
||
|
|
class:has-text-danger={action.isDangerous}
|
||
|
|
onclick={action.onClick}
|
||
|
|
>
|
||
|
|
{action.label}
|
||
|
|
</button>
|
||
|
|
{/if}
|
||
|
|
{/each}
|
||
|
|
</footer>
|
||
|
|
{/if}
|
||
|
|
</div>
|