38 lines
1.2 KiB
Svelte
38 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import {parse, renderAsHtml} from "@welshman/content"
|
|
import {fly} from "@lib/transition"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import {toast, popToast} from "@app/toast"
|
|
|
|
const onActionClick = () => {
|
|
$toast!.action!.onclick()
|
|
popToast($toast!.id)
|
|
}
|
|
</script>
|
|
|
|
{#if $toast}
|
|
{@const theme = $toast.theme || "info"}
|
|
<div transition:fly class="bottom-sai right-sai toast z-toast">
|
|
{#key $toast.id}
|
|
<div
|
|
role="alert"
|
|
class="alert flex justify-center whitespace-normal text-left"
|
|
class:bg-base-100={theme === "info"}
|
|
class:text-base-content={theme === "info"}
|
|
class:alert-error={theme === "error"}>
|
|
<p class="welshman-content-error">
|
|
{@html renderAsHtml(parse({content: $toast.message}))}
|
|
{#if $toast.action}
|
|
<Button class="cursor-pointer underline" onclick={onActionClick}>
|
|
{$toast.action.message}
|
|
</Button>
|
|
{/if}
|
|
</p>
|
|
<Button class="flex items-center opacity-75" onclick={() => popToast($toast.id)}>
|
|
<Icon icon="close-circle" />
|
|
</Button>
|
|
</div>
|
|
{/key}
|
|
</div>
|
|
{/if}
|