41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { AlertCircle } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
interface ToastProps {
|
|
toast: { message: string; type: 'error' | 'success' } | null
|
|
onClose: () => void
|
|
}
|
|
|
|
export function ToastNotification({ toast, onClose }: ToastProps) {
|
|
return (
|
|
<AnimatePresence>
|
|
{toast && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50, scale: 0.95 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: 20, scale: 0.95 }}
|
|
className={`fixed bottom-5 right-5 z-50 flex items-center gap-3 px-4 py-3 rounded-xl border shadow-lg backdrop-blur-md transition-all duration-300 max-w-md ${
|
|
toast.type === 'error'
|
|
? 'bg-red-500/20 border-red-500/40 text-red-200'
|
|
: 'bg-green-500/20 border-green-500/40 text-green-200'
|
|
}`}
|
|
>
|
|
<AlertCircle className={`w-5 h-5 shrink-0 ${toast.type === 'error' ? 'text-red-400' : 'text-green-400'}`} />
|
|
<p className="text-sm font-medium">{toast.message}</p>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="w-5 h-5 ml-auto text-slate-400 hover:text-white"
|
|
onClick={onClose}
|
|
>
|
|
✕
|
|
</Button>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|