Olivier CROGUENNEC
52 lines
1.4 KiB
React
52 lines
1.4 KiB
React
import { useEffect } from 'react';
|
||
|
||
/**
|
||
* ResultBanner — bannière succès/erreur avec auto-dismiss et × à droite.
|
||
*
|
||
* Props:
|
||
* result : { ok: bool, msg: string } | null
|
||
* onDismiss : () => void — appelé à la fermeture (manuelle ou auto)
|
||
* delay : number — délai auto-dismiss en ms (défaut 4000)
|
||
*/
|
||
export default function ResultBanner({ result, onDismiss, delay = 4000, style = {} }) {
|
||
useEffect(() => {
|
||
if (!result) return;
|
||
const t = setTimeout(onDismiss, delay);
|
||
return () => clearTimeout(t);
|
||
}, [result, delay, onDismiss]);
|
||
|
||
if (!result) return null;
|
||
|
||
return (
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
padding: '8px 14px',
|
||
borderRadius: 8,
|
||
fontSize: 13,
|
||
background: result.ok ? 'rgba(34,197,94,.1)' : 'rgba(239,68,68,.1)',
|
||
color: result.ok ? '#16a34a' : '#dc2626',
|
||
border: `1px solid ${result.ok ? 'rgba(34,197,94,.3)' : 'rgba(239,68,68,.3)'}`,
|
||
...style,
|
||
}}>
|
||
<span>{result.msg}</span>
|
||
<button
|
||
onClick={onDismiss}
|
||
style={{
|
||
marginLeft: 16,
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
color: 'inherit',
|
||
fontSize: 18,
|
||
lineHeight: 1,
|
||
padding: '0 2px',
|
||
flexShrink: 0,
|
||
}}
|
||
aria-label="Fermer"
|
||
>×</button>
|
||
</div>
|
||
);
|
||
}
|