PLG-MuDiCS/control/frontend/src/components/Notification.svelte

<script lang="ts">
    import { fade } from "svelte/transition";
    import Button from "./Button.svelte";
	import { X } from "lucide-svelte";
	import { notifications } from "../ts/stores/notification";
	import { get_shifted_color } from "../ts/stores/ui_behavior";
</script>

<div class="fixed flex flex-col gap-2 {true ? "top-[41%]": "top-2"} right-2 left-2 md:top-auto md:left-auto md:bottom-2 md:w-100 z-50">
    {#each $notifications as n (n.id)}
        <div
            transition:fade={{ duration: 200 }}
            class="p-2 pl-4 pb-3 rounded-lg shadow-xl/30 text-white flex flex-col gap-2 overflow-hidden relative border-1 border-black/20 {n.className}"
            class:bg-red-900={n.type === "error"}
            class:bg-green-900={n.type === "success"}
            class:bg-sky-900={n.type === "info"}
            style="--dur: {n.duration}ms"
        >
            <div class="flex flex-row justify-between">
                <span class="text-xl font-bold flex items-center">{n.title}</span>
                <Button click_function={() => notifications.remove(n.id)} className="p-2" bg="bg-stone-900/50" hover_bg="bg-stone-600/70" active_bg="bg-stone-500/80"><X/></Button>
            </div>

            <span class="whitespace-break-spaces">{n.message}</span>

            <div class="absolute inset-x-0 bottom-0 h-1 bg-white/25">
                <div
                    class="block h-full w-full bg-white/80 origin-left animate-progress-bar"
                ></div>
            </div>
        </div>
    {/each}
</div>

<style>
    @keyframes progress {
        from {
            transform: scaleX(0);
        }
        to {
            transform: scaleX(1);
        }
    }
    .animate-progress-bar {
        animation: progress var(--dur) linear forwards;
        transform-origin: left;
    }
</style>