Part O
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import { fly } from 'svelte/transition';
|
||||
import { onDestroy } from 'svelte';
|
||||
|
||||
export let message = '';
|
||||
export let kind = 'info';
|
||||
export let id = 0;
|
||||
|
||||
let visible = false;
|
||||
let timer = null;
|
||||
|
||||
function reset() {
|
||||
if (timer) clearTimeout(timer);
|
||||
visible = !!message;
|
||||
if (message) {
|
||||
timer = setTimeout(() => {
|
||||
visible = false;
|
||||
}, 4200);
|
||||
}
|
||||
}
|
||||
|
||||
$: message, id, reset();
|
||||
|
||||
onDestroy(() => {
|
||||
if (timer) clearTimeout(timer);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div class="fixed bottom-5 left-1/2 z-50 -translate-x-1/2 px-4" transition:fly={{ y: 12, duration: 180 }}>
|
||||
<div
|
||||
class="rounded-xl border px-4 py-3 text-sm shadow-2xl backdrop-blur-md {kind === 'error'
|
||||
? 'border-danger/40 bg-danger/15 text-danger'
|
||||
: kind === 'success'
|
||||
? 'border-ok/40 bg-ok/15 text-ok'
|
||||
: 'border-edge bg-raised/95 text-ink'}"
|
||||
>
|
||||
{message}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user