69 lines
2.7 KiB
Svelte
69 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { toast, toasts } from "./toast";
|
|
import { fade } from "svelte/transition";
|
|
import InfoIcon from "../icons/severity/InfoIcon.svelte";
|
|
import WarningIcon from "../icons/severity/WarningIcon.svelte";
|
|
import ErrorIcon from "../icons/severity/ErrorIcon.svelte";
|
|
import SuccessIcon from "../icons/severity/SuccessIcon.svelte";
|
|
</script>
|
|
|
|
{#if $toasts.length >= 1}
|
|
<div
|
|
class="fixed bottom-0 right-0 z-50 flex w-full flex-col gap-2 p-4 text-white sm:w-96"
|
|
>
|
|
{#each $toasts as toastItem}
|
|
<div
|
|
class:bg-red-500={toastItem.type === "error"}
|
|
class:bg-green-500={toastItem.type === "success"}
|
|
class:bg-orange-500={toastItem.type === "warning"}
|
|
class:bg-blue-500={toastItem.type === "info"}
|
|
class="card flex items-center gap-3 border-contrast-900 px-4 py-3 shadow-md dark:border-contrast-100"
|
|
transition:fade={{ duration: 200 }}
|
|
>
|
|
<div
|
|
class:text-red-900={toastItem.type === "error"}
|
|
class:text-green-900={toastItem.type === "success"}
|
|
class:text-orange-900={toastItem.type === "warning"}
|
|
class:text-blue-900={toastItem.type === "info"}
|
|
class="shrink-0"
|
|
>
|
|
{#if toastItem.type === "info"}
|
|
<InfoIcon class="w-7"></InfoIcon>
|
|
{:else if toastItem.type === "warning"}
|
|
<WarningIcon class="w-7"></WarningIcon>
|
|
{:else if toastItem.type === "error"}
|
|
<ErrorIcon class="w-7"></ErrorIcon>
|
|
{:else if toastItem.type === "success"}
|
|
<SuccessIcon class="w-7"></SuccessIcon>
|
|
{/if}
|
|
</div>
|
|
|
|
<p class="grow">
|
|
{toastItem.text}
|
|
</p>
|
|
|
|
<button
|
|
on:click={() => toast.dismiss(toastItem.id)}
|
|
class="shrink-0"
|
|
aria-label="dismiss"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-6"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|