Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 1x 1x 29x 29x 29x 29x 1x 1x 1x 1x 29x 29x 1x 1x 29x 29x 29x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x | import {useEffect} from "react";
import {X} from "lucide-react";
export interface AlertProps {
message: string;
isVisible: boolean;
onDismiss: () => void;
autoDismissTime: number;
}
function Alert(props: AlertProps) {
useEffect(() => {
let dismissTimer: NodeJS.Timeout;
if (props.isVisible && props.autoDismissTime > 0) {
dismissTimer = setTimeout(() => {
props.onDismiss();
}, props.autoDismissTime);
}
return () => {
if (dismissTimer) {
clearTimeout(dismissTimer);
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.isVisible, props.onDismiss, props.autoDismissTime]);
if (!props.isVisible) return null;
return (
<div className="toast toast-bottom toast-start z-50">
<div role="alert" className="alert alert-success">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 shrink-0 stroke-current"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span role="alert" aria-label="Alert message">
{props.message}
</span>
<button
className="btn btn-sm btn-circle ml-auto"
aria-label="Dismiss alert button"
onClick={props.onDismiss}
>
<X className="h-4 w-4"/>
</button>
</div>
</div>
);
}
export default Alert;
|