44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { CheckCircle2, AlertCircle, Info } from 'lucide-react'
|
|
|
|
type Props = {
|
|
status: 'idle' | 'success' | 'error' | 'info'
|
|
message: string | null
|
|
}
|
|
|
|
export default function StatusMessage({ status, message }: Props) {
|
|
if (!message) return null
|
|
|
|
const config = {
|
|
success: {
|
|
color: 'bg-[#f0fdf4] border-[#006600] text-[#004d00]',
|
|
icon: <CheckCircle2 className="h-5 w-5 flex-shrink-0" style={{ color: '#006600' }} />
|
|
},
|
|
error: {
|
|
color: 'bg-[#fef2f2] border-[#FF0000] text-[#991b1b]',
|
|
icon: <AlertCircle className="h-5 w-5 flex-shrink-0" style={{ color: '#FF0000' }} />
|
|
},
|
|
info: {
|
|
color: 'bg-[#f3f4f6] border-[#6b7280] text-[#374151]',
|
|
icon: <Info className="h-5 w-5 flex-shrink-0" style={{ color: '#6b7280' }} />
|
|
},
|
|
idle: {
|
|
color: 'bg-[#f3f4f6] border-[#6b7280] text-[#374151]',
|
|
icon: <Info className="h-5 w-5 flex-shrink-0" style={{ color: '#6b7280' }} />
|
|
}
|
|
}
|
|
|
|
const current = config[status]
|
|
|
|
return (
|
|
<div
|
|
role="status"
|
|
aria-live="polite"
|
|
className={`mt-4 flex items-center gap-3 rounded-lg border-l-4 px-4 py-3 text-sm font-medium ${current.color}`}
|
|
>
|
|
{current.icon}
|
|
<span>{message}</span>
|
|
</div>
|
|
)
|
|
}
|