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
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
3x
 
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
3x
 
import styles from './post.module.css';
import Link from 'next/link';
 
type Props = {
    posts?: {
        meta: {
            title: string;
            excerpt: string;
            slug: string;
        };
    }[];
    slug?: string | string[];
    category?: string | string[];
};
/**
 * @example
 *     <PostList posts={posts} slug={slug} category={category} />;
 *
 * @param {object[]} posts - The list of posts
 * @param {string} slug - The slug is used to highlight the selected post
 * @param {string} category - The category is used to highlight the selected post
 * @returns {JSX.Element}
 */
const PostList = ({ posts, slug, category }: Props) => {
    if (!posts) return null;
 
    Iif (slug && typeof slug == 'object') slug = slug[0];
    Iif (category && typeof category == 'object') category = category[0];
 
    return (
        <ul data-testid="post-list" className={styles.list}>
            {posts.map(
                (
                    item: {
                        meta: {
                            title: string;
                            excerpt: string;
                            slug: string;
                        };
                    },
                    index: number
                ) => (
                    <li key={index} className={slug == item.meta.slug ? styles.selected : ''}>
                        <Link href={`/blog/${category}/${item.meta.slug}`} title={item.meta.title}>
                            <div className={styles.title}>{item.meta.title}</div>
                            <div className={styles.excerpt}>{item.meta.excerpt}</div>
                        </Link>
                    </li>
                )
            )}
        </ul>
    );
};
export default PostList;