nub31/minibusservice.no
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pages

Browse Source
This commit is contained in:
nub31
2026-03-16 23:14:51 +01:00
parent 3bf281c7a7
commit 7aea328d4f
17 changed files with 913 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/lib/components/toast/ToastProvider.svelte
View File

@@ -1,58 +1,68 @@
<script lang="ts">
import { toast, toasts } from '$lib/components/toast/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">
<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}
<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}