56 lines
1.1 KiB
Svelte
56 lines
1.1 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { createEventDispatcher } from 'svelte';
|
||
|
|
|
||
|
|
export let message = '';
|
||
|
|
export let actionLabel = '';
|
||
|
|
export let onAction: () => void = () => {};
|
||
|
|
|
||
|
|
const dispatch = createEventDispatcher<{ done: void }>();
|
||
|
|
|
||
|
|
function act() {
|
||
|
|
onAction();
|
||
|
|
dispatch('done');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="toast" role="status">
|
||
|
|
<span>{message}</span>
|
||
|
|
{#if actionLabel}
|
||
|
|
<button on:click={act}>{actionLabel}</button>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.toast {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 18px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
z-index: 50;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 14px;
|
||
|
|
background: var(--fg);
|
||
|
|
color: var(--bg);
|
||
|
|
padding: 9px 16px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||
|
|
animation: rise 0.15s ease-out;
|
||
|
|
}
|
||
|
|
.toast button {
|
||
|
|
color: var(--mark-bg);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
@keyframes rise {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(-50%) translateY(8px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateX(-50%) translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|