sepehr
2de2958b7a
- Remove buggy Undo/Redo that saved character-by-character - Simplify state to plain useState like Google Keep - Create toast component with success/error/warning/info types - Toast notifications auto-dismiss after 3s with smooth animations - Add ToastProvider in layout - Remove all JavaScript alert() calls - Production-ready notification system
86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import * as React from "react"
|
|
import { X } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export interface ToastProps {
|
|
id: string
|
|
message: string
|
|
type?: 'success' | 'error' | 'info' | 'warning'
|
|
duration?: number
|
|
onClose: (id: string) => void
|
|
}
|
|
|
|
export function Toast({ id, message, type = 'info', duration = 3000, onClose }: ToastProps) {
|
|
React.useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
onClose(id)
|
|
}, duration)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [id, duration, onClose])
|
|
|
|
const bgColors = {
|
|
success: 'bg-green-600',
|
|
error: 'bg-red-600',
|
|
info: 'bg-blue-600',
|
|
warning: 'bg-yellow-600'
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex items-center gap-2 rounded-lg px-4 py-3 text-sm text-white shadow-lg animate-in slide-in-from-top-5",
|
|
bgColors[type]
|
|
)}
|
|
>
|
|
<span className="flex-1">{message}</span>
|
|
<button
|
|
onClick={() => onClose(id)}
|
|
className="rounded-full p-1 hover:bg-white/20 transition-colors"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export interface ToastContextType {
|
|
addToast: (message: string, type?: 'success' | 'error' | 'info' | 'warning') => void
|
|
}
|
|
|
|
const ToastContext = React.createContext<ToastContextType | null>(null)
|
|
|
|
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
|
const [toasts, setToasts] = React.useState<Array<Omit<ToastProps, 'onClose'>>>([])
|
|
|
|
const addToast = React.useCallback((message: string, type: 'success' | 'error' | 'info' | 'warning' = 'info') => {
|
|
const id = Math.random().toString(36).substring(7)
|
|
setToasts(prev => [...prev, { id, message, type }])
|
|
}, [])
|
|
|
|
const removeToast = React.useCallback((id: string) => {
|
|
setToasts(prev => prev.filter(toast => toast.id !== id))
|
|
}, [])
|
|
|
|
return (
|
|
<ToastContext.Provider value={{ addToast }}>
|
|
{children}
|
|
<div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80">
|
|
{toasts.map(toast => (
|
|
<Toast key={toast.id} {...toast} onClose={removeToast} />
|
|
))}
|
|
</div>
|
|
</ToastContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useToast() {
|
|
const context = React.useContext(ToastContext)
|
|
if (!context) {
|
|
throw new Error('useToast must be used within ToastProvider')
|
|
}
|
|
return context
|
|
}
|