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
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
1x
 
import styles from './avatar.module.css';
import Image from 'next/image';
 
type Props = {
    name: string;
    description: string;
    img: string;
    alt: string;
};
 
/**
 * @example
 *     <Avatar name="John Doe" description="Lorem ipsum" img="/images/avatar.jpg" alt="John Doe" />;
 *
 * @param {string} name - Name of the user
 * @param {string} description - Description of the user
 * @param {string} img - Image of the user
 * @param {string} alt - Alt text for the image
 * @returns {JSX.Element} - Avatar component
 */
const Avatar = ({ name, description, img, alt }: Props) => {
    return (
        <section data-testid="avatar" className={styles.userInfo}>
            <Image className={styles.avatar} src={img} alt={alt} width={71} height={71} />
            <div className={styles.userDetails}>
                <h2 className={styles.username}>{name}</h2>
                <p className={styles.description}>{description}</p>
            </div>
        </section>
    );
};
 
export default Avatar;