38 lines
844 B
TypeScript
38 lines
844 B
TypeScript
|
import { useState, useEffect } from 'react'
|
||
|
|
|
||
|
|
type FlashMessageProperties = {
|
||
|
|
message: string
|
||
|
|
type: 'success' | 'error' | 'info'
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function FlashMessage({
|
||
|
|
message,
|
||
|
|
type,
|
||
|
|
}: FlashMessageProperties) {
|
||
|
|
const [visible, setVisible] = useState<boolean>(false)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (message) {
|
||
|
|
setVisible(true)
|
||
|
|
const timer = setTimeout(() => setVisible(false), 3000)
|
||
|
|
return () => clearTimeout(timer)
|
||
|
|
}
|
||
|
|
}, [message])
|
||
|
|
|
||
|
|
if (!visible) return
|
||
|
|
|
||
|
|
const messageStyles = {
|
||
|
|
success: 'bg-green-100 text-green-800 border-green-300',
|
||
|
|
error: 'bg-red-100 text-red-800 border-red-300',
|
||
|
|
info: 'bg-blue-100 text-blue-800 border-blue-300',
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`fixed top-4 right-4 rounded-lg border p-4 shadow-lg ${messageStyles[type]}`}
|
||
|
|
>
|
||
|
|
{message}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|