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
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
3x
 
3x
3x
2x
1x
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
import React from 'react';
import { clx } from '@/helpers';
import styles from './notification.module.css';
import { GrFormClose } from 'react-icons/gr';
 
type Props = {
    title: string;
    message: string;
    type?: 'success' | 'error';
    onClose?: () => void;
};
 
/**
 * @example
 *     <Notification title="Success" message="This is a success message" type="success" />;
 *     <Notification title="Error" message="This is an error message" type="error" />;
 *
 * @param {string} title - The title of the notification
 * @param {string} message - The message of the notification
 * @param {string} type - The type of the notification
 * @returns {JSX.Element}
 */
const Notification = ({ title, message, type = 'success' }: Props) => {
    const [show, setShow] = React.useState(true);
 
    React.useEffect(() => {
        if (show) {
            const timeout = setTimeout(() => {
                setShow(false);
            }, 7000);
 
            return () => clearTimeout(timeout);
        }
    }, [show]);
 
    return (
        <div
            data-testid={show ? 'notification' : 'notification-hidden'}
            className={clx(
                styles.notification,
                type === 'success' ? styles.success : styles.error,
                show ? styles.show : styles.hide
            )}
        >
            <GrFormClose className={styles.close} onClick={() => setShow(false)} />
            <div className={styles.title}>{title}</div>
            <div className={styles.message}>{message}</div>
        </div>
    );
};
 
export default Notification;