main
import { IconAlertCircle as AlertCircle, IconCheck as Check, IconInfoCircle as Info } from '@tabler/icons-react'
import type { Notice } from '@/shared/lib'
export function Alert({ notice }: { notice?: Notice }) {
if (!notice) return null
const Icon = notice.kind === 'error' ? AlertCircle : notice.kind === 'success' ? Check : Info
return (
<div
role={notice.kind === 'error' ? 'alert' : 'status'}
className={`mb-6 flex items-start gap-3 rounded-xl p-4 ${notice.kind === 'error' ? 'bg-error-bg' : notice.kind === 'success' ? 'bg-success-bg' : 'bg-elevated'}`}
>
<Icon
size={20}
className={`mt-0.5 shrink-0 ${notice.kind === 'error' ? 'text-danger' : notice.kind === 'success' ? 'text-success' : 'text-muted'}`}
/>
<p className="text-sm leading-[1.6] wrap-anywhere">{notice.text}</p>
</div>
)
}