Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 35x 35x 1x 1x 35x 1x | import { useEffect } from 'react'
import { cn } from '@/lib/utils'
interface ToastProps {
message: string | null
onDismiss: () => void
}
export function Toast({ message, onDismiss }: ToastProps) {
useEffect(() => {
if (!message) return
const timer = setTimeout(onDismiss, 2000)
return () => clearTimeout(timer)
}, [message, onDismiss])
if (!message) return null
return (
<div className={cn(
"fixed bottom-8 left-1/2 -translate-x-1/2 z-[1100]",
"bg-secondary text-foreground px-5 py-2 rounded-lg text-[13px]",
"shadow-[0_4px_16px_var(--shadow-dialog)]",
"animate-in slide-in-from-bottom-2 fade-in duration-200"
)}>
{message}
</div>
)
}
|