axel
58477f579e
fixed flickering on re-render (due to having color classes state be initialized empty) and made code cleaner
38 lines
1.1 KiB
Svelte
38 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { fade } from "svelte/transition";
|
|
import IconChevronLeft from "~icons/tabler/chevron-left";
|
|
import IconEclamationCircle from "~icons/tabler/exclamation-circle";
|
|
import Button from "../ui/Button.svelte";
|
|
import HorizontalSpacer from "../ui/HorizontalSpacer.svelte";
|
|
import ResourcePageHeader from "./ResourcePageHeader.svelte";
|
|
|
|
let {
|
|
heading,
|
|
children,
|
|
error = null,
|
|
} = $props();
|
|
|
|
$effect(() => {
|
|
if (error) {
|
|
setTimeout(() => error = null, 5000)
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-col h-full">
|
|
<ResourcePageHeader title={heading}>
|
|
<Button Icon={IconChevronLeft} onclick={() => history.back()} inverted>Back</Button>
|
|
</ResourcePageHeader>
|
|
|
|
<HorizontalSpacer/>
|
|
|
|
<div class="text-sm text-neutral-700 flex-1 overflow-scroll">
|
|
{@render children()}
|
|
</div>
|
|
|
|
{#if error}
|
|
<div transition:fade>
|
|
<Button Icon={IconEclamationCircle} type="button" color="danger" onclick={() => error = null}>{error} (Click to dismiss)</Button>
|
|
</div>
|
|
{/if}
|
|
</div> |