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
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
1x
 
import Image from 'next/image';
import styles from './icon.module.css';
import { clx } from '@/helpers';
 
type Props = {
    icon: string;
    alt: string;
    name: string;
    horizontal?: boolean;
    onClick?: () => void;
};
 
/**
 * @example
 *     <IconWithName icon="/images/icons/terminal.svg" alt="Terminal" name="Terminal" />;
 *     <IconWithName icon="/images/icons/terminal.svg" alt="Terminal" name="Terminal" horizontal />;
 *
 * @param {string} icon - The path to the icon
 * @param {string} alt - The alt text for the icon
 * @param {string} name - Text to display
 * @param {boolean} horizontal - If true, the icon will be displayed horizontally
 * @returns {JSX.Element}
 */
const IconWithName = ({ icon, alt, name, horizontal, onClick }: Props) => {
    return (
        <div
            data-testid="icon-with-name"
            className={clx(styles.option, horizontal ? styles.horizontal : '')}
            onClick={onClick}
        >
            <Image src={icon} alt={alt} width={44} height={42} />
            <p className={styles.optionText}>{name}</p>
        </div>
    );
};
export default IconWithName;