src/components/PostsList/PostsList.tsx


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

import Link from 'next/link';
import { ArticlePreview } from '@ts/types/articles';
import styles from './PostsList.module.scss';

type TitleLevel = 2 | 3 | 4 | 5 | 6;

const PostsList = ({
  posts,
  titleLevel,
}: {
  posts: ArticlePreview[];
  titleLevel: TitleLevel;
}) => {
  const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;

  const postsList = posts.map((post) => {
    return (
      <li key={post.id}>
        <article>
          <header>
            <TitleTag>
              <Link href={`/article/${post.slug}`}>
                <a>{post.title}</a>
              </Link>
            </TitleTag>
          </header>
          <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
        </article>
      </li>
    );
  });

  return <ol className={styles.wrapper}>{postsList}</ol>;
};

export default PostsList;