26 lines
893 B
Svelte

<script lang="ts">
export let headerLeft: string = "";
export let headerRight: string = "";
export let headerColour: string = "text-red-500";
export let footer: string = "";
</script>
<div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
<div class="{headerColour} flex flex-row justify-between items-center mb-4">
<p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
{#if headerRight}
<p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
{/if}
</div>
<hr class="mb-4 border-1" />
<div class="flex-1 flex flex-col justify-center p-5">
<slot />
</div>
{#if footer}
<hr class="my-4 border-1" />
<div class="mt-2 text-base opacity-90">
{@html footer}
</div>
{/if}
</div>