\n {toasts.map((toast) => (\n \n ))}\n

\n );\n}\n\ninterface ToastProps {\n toast: ToastMessage;\n onRemove: (id: string) => void;\n}\n\nfunction Toast({ toast, onRemove }: ToastProps) {\n const getToastStyles = () => {\n switch (toast.type) {\n case 'success':\n return 'bg-green-50 dark:bg-green-900 border-green-200 dark:border-green-700 text-green-800 dark:text-green-200';\n case 'error':\n return 'bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-700 text-red-800 dark:text-red-200';\n case 'warning':\n return 'bg-yellow-50 dark:bg-yellow-900 border-yellow-200 dark:border-yellow-700 text-yellow-800 dark:text-yellow-200';\n case 'info':\n return 'bg-blue-50 dark:bg-blue-900 border-blue-200 dark:border-blue-700 text-blue-800 dark:text-blue-200';\n default:\n return 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-200';\n }\n };\n\n const getIcon = () => {\n switch (toast.type) {\n case 'success':\n return (\n \n );\n case 'error':\n return (\n \n );\n case 'warning':\n return (\n \n );\n case 'info':\n return (\n \n );\n default:\n return null;\n }\n };\n\n return (\n

\n {getIcon()}\n

\n {toast.title}\n

\n {toast.message && (\n

\n {toast.message}\n

\n )}\n

\n onRemove(toast.id)}\n className=\"inline-flex text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors\"\n >\n \n \n

\n );\n}","deleted","label",[170,171,172,153],"frontend","components","ui","permalink","https://www.val.town/x/jeffy/jeffi/code/frontend/components/ui/ToastContainer.tsx","extension","actionData","errors"]