29 lines
1.3 KiB
Vue
29 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { useToastStore } from '../stores/toast'
|
|
import { Check, AlertCircle, Info } from 'lucide-vue-next'
|
|
|
|
const toastStore = useToastStore()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fixed top-4 left-1/2 -translate-x-1/2 z-[100] flex flex-col gap-2 pointer-events-none" style="margin-left: 24px;">
|
|
<div
|
|
v-for="toast in toastStore.toasts"
|
|
:key="toast.id"
|
|
@click="toastStore.removeToast(toast.id)"
|
|
class="w-80 flex items-center gap-3 px-4 py-3 bg-bg-surface border border-border-subtle rounded-lg shadow-lg cursor-pointer pointer-events-auto border-l-[3px]"
|
|
:class="[
|
|
toast.exiting ? 'animate-toast-exit' : 'animate-toast-enter',
|
|
toast.type === 'success' ? 'border-l-status-running' : '',
|
|
toast.type === 'error' ? 'border-l-status-error' : '',
|
|
toast.type === 'info' ? 'border-l-accent' : ''
|
|
]"
|
|
>
|
|
<Check v-if="toast.type === 'success'" class="w-4 h-4 text-status-running shrink-0" :stroke-width="2" />
|
|
<AlertCircle v-if="toast.type === 'error'" class="w-4 h-4 text-status-error shrink-0" :stroke-width="2" />
|
|
<Info v-if="toast.type === 'info'" class="w-4 h-4 text-accent shrink-0" :stroke-width="2" />
|
|
<span class="text-sm text-text-primary">{{ toast.message }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|