Paul Bailey
e51e88fddd
- Implement toast notification system for success/error messages - Add loading states with skeleton loaders for async operations - Create smooth CSS transitions and animations - Enhance empty states with EmptyState component - Add loading.tsx files for Next.js loading states - Integrate toast notifications across all CRUD operations - Add fade-in and scale-in animations for better UX - Improve visual feedback for user actions
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
|
|
import Toast, { ToastType } from './Toast'
|
|
|
|
interface ToastMessage {
|
|
id: string
|
|
message: string
|
|
type: ToastType
|
|
}
|
|
|
|
interface ToastContextType {
|
|
showToast: (message: string, type: ToastType) => void
|
|
}
|
|
|
|
const ToastContext = createContext<ToastContextType | undefined>(undefined)
|
|
|
|
export function useToast() {
|
|
const context = useContext(ToastContext)
|
|
if (!context) {
|
|
throw new Error('useToast must be used within ToastProvider')
|
|
}
|
|
return context
|
|
}
|
|
|
|
export function ToastProvider({ children }: { children: ReactNode }) {
|
|
const [toasts, setToasts] = useState<ToastMessage[]>([])
|
|
|
|
const showToast = useCallback((message: string, type: ToastType) => {
|
|
const id = Math.random().toString(36).substring(7)
|
|
setToasts((prev) => [...prev, { id, message, type }])
|
|
}, [])
|
|
|
|
const removeToast = useCallback((id: string) => {
|
|
setToasts((prev) => prev.filter((toast) => toast.id !== id))
|
|
}, [])
|
|
|
|
return (
|
|
<ToastContext.Provider value={{ showToast }}>
|
|
{children}
|
|
<div className="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full px-4 sm:px-0">
|
|
{toasts.map((toast) => (
|
|
<Toast
|
|
key={toast.id}
|
|
message={toast.message}
|
|
type={toast.type}
|
|
onClose={() => removeToast(toast.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</ToastContext.Provider>
|
|
)
|
|
}
|