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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
3x
 
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
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;
 
    Iif (category && typeof category == 'object') category = category[0];
    Iif (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;