44 lines
748 B
Svelte
44 lines
748 B
Svelte
<script>
|
|
import { fade, fly } from 'svelte/transition';
|
|
|
|
let { type = 'confirm' } = $props();
|
|
let open = $state(false);
|
|
let message = $state('');
|
|
|
|
export function pop(msg = '', resetTimeout = 0) {
|
|
message = msg;
|
|
open = true;
|
|
if (resetTimeout > 0) {
|
|
setTimeout(() => {
|
|
open = false;
|
|
}, resetTimeout);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if open}
|
|
<div in:fly={{ duration: 200, y: 100 }} out:fade class="popup {type}">
|
|
<div class="popup-content">
|
|
<p>{message}</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.popup {
|
|
position: fixed;
|
|
width: 20rem;
|
|
padding: 1rem;
|
|
margin: 2rem;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 0.1rem;
|
|
}
|
|
.confirm {
|
|
background-color: var(--light-accent);
|
|
}
|
|
.error {
|
|
background-color: var(--accent);
|
|
}
|
|
</style>
|