File size: 2,280 Bytes
c0e8080 |
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
typescript
import React from 'react'
import { useToast } from '../contexts/ToastContext'
import { CheckCircle, XCircle, AlertTriangle, Info, X } from 'lucide-react'
const ToastContainer: React.FC = () => {
const { toasts, removeToast } = useToast()
const getToastIcon = (type: string) => {
switch (type) {
case 'success':
return <CheckCircle className="h-5 w-5 text-accent-500" />
case 'error':
return <XCircle className="h-5 w-5 text-red-500" />
case 'warning':
return <AlertTriangle className="h-5 w-5 text-alert-500" />
case 'info':
return <Info className="h-5 w-5 text-primary-500" />
default:
return <Info className="h-5 w-5 text-primary-500" />
}
}
const getToastStyles = (type: string) => {
switch (type) {
case 'success':
return 'bg-accent-50 border-accent-200'
case 'error':
return 'bg-red-50 border-red-200'
case 'warning':
return 'bg-alert-50 border-alert-200'
case 'info':
return 'bg-primary-50 border-primary-200'
default:
return 'bg-gray-50 border-gray-200'
}
}
return (
<div className="fixed top-4 right-4 z-50 space-y-3 max-w-sm">
{toasts.map((toast) => (
<div
key={toast.id}
className={`
card p-4 transform transition-all duration-300 ease-in-out
${getToastStyles(toast.type)}
`}
>
<div className="flex items-start">
<div className="flex-shrink-0">
{getToastIcon(toast.type)}
</div>
<div className="ml-3 flex-1">
<p className="text-sm font-medium text-gray-900">
{toast.title}
</p>
{toast.message && (
<p className="mt-1 text-sm text-gray-500">
{toast.message}
</p>
</div>
<button
onClick={() => removeToast(toast.id)}
className="ml-4 flex-shrink-0 p-1 rounded-button text-gray-400 hover:text-gray-500 hover:bg-gray-100"
>
<X className="h-4 w-4" />
</button>
</div>
</div>
))}
</div>
)
}
export default ToastContainer
</html> |