my-links/components/Categories/Categories.tsx

import LinkTag from 'next/link';

import styles from '../../styles/home/categories.module.scss';
import { Category } from '../../types';

import EditSVG from '../../public/icons/edit.svg';
import RemoveSVG from '../../public/icons/remove.svg';

interface CategoriesProps {
    categories: Category[];
    categoryActive: Category;
    handleSelectCategory: (category: Category) => void;
}
export default function Categories({ categories, categoryActive, handleSelectCategory }: CategoriesProps) {
    return (
        <div className={`${styles['block-wrapper']} ${styles['categories']}`}>
            <h4>Catégories</h4>
            <ul className={styles['items']}>
                {categories.map((category, key) => (
                    <CategoryItem
                        category={category}
                        categoryActive={categoryActive}
                        handleSelectCategory={handleSelectCategory}
                        key={key}
                    />
                ))}
            </ul>
        </div>
    )
}

interface CategoryItemProps {
    category: Category;
    categoryActive: Category;
    handleSelectCategory: (category: Category) => void;
}
function CategoryItem({ category, categoryActive, handleSelectCategory }: CategoryItemProps): JSX.Element {
    const className = `${styles['item']} ${category.id === categoryActive.id ? styles['active'] : ''}`;
    const onClick = () => handleSelectCategory(category);

    return (
        <li className={className} onClick={onClick}>
            <div className={styles['content']}>
                <span className={styles['name']}>{category.name}</span>
                <span className={styles['links-count']}>— {category.links.length}</span>
            </div>
            <MenuOptions id={category.id} />
        </li>
    )
}

function MenuOptions({ id }: { id: number; }): JSX.Element {
    return (
        <div className={styles['menu-item']}>
            <LinkTag href={`/category/edit/${id}`}>
                <a className={styles['option-edit']}>
                    <EditSVG />
                </a>
            </LinkTag>
            <LinkTag href={`/category/remove/${id}`}>
                <a className={styles['option-remove']}>
                    <RemoveSVG />
                </a>
            </LinkTag>
        </div>
    )
}