<script>
    import { fly } from "svelte/transition";
    $: message = "Saved";
    $: isVisible = false;
    export function show(amessage = "Saved") {
        message = amessage;
        isVisible = true;
        setTimeout(function () {
            isVisible = false;
        }, 2000);
    }
</script>

{#if isVisible}
    <div
        transition:fly={{ duration: 500 }}
        class="lx-alert text-white bg-success border-1 border rounded px-3 py-0 text-center"
        role="alert"
    >
        {message}
    </div>
{/if}

<style>
    .lx-alert {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        top: 45px;
        margin: 0 auto;
    }
</style>
