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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 (
        <>
            <h2 className={styles.navTitle}>{title}</h2>
            <ul className={styles.postList} data-testid="nav-list">
                {list.map(
                    (
                        item: {
                            category: string;
                            total: number;
                            href: string;
                            tag: string;
                        },
                        index: number
                    ) => {
                        return (
                            <li key={index}>
                                <Link
                                    href={item.href}
                                    title={isCategory ? item.category : item.tag}
                                    className={
                                        isCategory
                                            ? category == item.category.toLowerCase()
                                                ? styles.selected
                                                : ''
                                            : category == item.tag.toLowerCase()
                                            ? 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;