Source: Blog/NavList/index.tsx

import styles from './navlist.module.css';
import { BsTag, BsFolder2 } from 'react-icons/bs';
import Link from 'next/link';

type Props = {
    title: string;
    list?: {
        category: string;
        total: number;
        href: string;
        tag: string;
    }[];
    category?: string | string[];
    isCategory?: boolean | boolean[];
};

/**
 * @example
 *     <NavList title="Categories" list={categories} category={category} isCategory={true} />;
 *
 * @param {string} title - The title of the list
 * @param {object[]} list - The list of items
 * @param {string} category - The category has other styles
 * @param {boolean} isCategory - If is category the icon will be a folder
 * @returns {JSX.Element}
 */
const NavList = ({ title, list, category, isCategory }: Props) => {
    if (!list) return null;

    if (category && typeof category == 'object') category = category[0];
    if (isCategory && typeof isCategory == 'object') isCategory = isCategory[0];

    return (
        <>
            {/* SDD-L05: was <h2>. These two sidebar titles precede the article in DOM order, so
                every post outline read h2, h2, h1 — the post title reported as subordinate to the
                sidebar, and heading navigation landing here first. The surrounding <nav> carries an
                aria-label now, so the region is still reachable by landmark without these claiming
                to be document structure. */}
            <p className={styles.navTitle}>{title}</p>
            <ul className={styles.postList} data-testid="nav-list">
                {list.map(
                    (
                        item: {
                            category: string;
                            total: number;
                            href: string;
                            tag: string;
                        },
                        index: number
                    ) => {
                        const isSelected = isCategory
                            ? category === item.category.toLowerCase()
                            : category === item.tag.toLowerCase();
                        return (
                            <li key={index}>
                                <Link
                                    href={item.href}
                                    title={isCategory ? item.category : item.tag}
                                    className={isSelected ? styles.selected : ''}
                                >
                                    {isCategory ? <BsFolder2 /> : <BsTag />}
                                    <div className={styles.tag}>{isCategory ? item.category : item.tag}</div>
                                    <div className={styles.number}>{item.total}</div>
                                </Link>
                            </li>
                        );
                    }
                )}
            </ul>
        </>
    );
};

export default NavList;