33 lines
691 B
Svelte
33 lines
691 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import type { ClassValue } from 'svelte/elements';
|
|
|
|
interface Props {
|
|
title: Snippet | string;
|
|
children: Snippet;
|
|
additional?: Snippet;
|
|
class?: ClassValue | null;
|
|
}
|
|
|
|
let { title, children, additional, class: className }: Props = $props();
|
|
|
|
const cl = $derived([
|
|
'm-2 flex flex-col rounded-md border p-2 text-center shadow-sm transition-shadow hover:shadow-md',
|
|
className,
|
|
]);
|
|
</script>
|
|
|
|
<div class={cl}>
|
|
<span class="block">
|
|
{#if typeof title === 'string'}
|
|
{title}
|
|
{:else}
|
|
{@render title()}
|
|
{/if}
|
|
</span>
|
|
<span class="block text-xl">
|
|
{@render children()}
|
|
</span>
|
|
{@render additional?.()}
|
|
</div>
|