blob: f5c6d9bb79f7e53f9ab03976ce92d9a91f42242e (
plain)
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
|
import PostMeta from '@components/PostMeta/PostMeta';
import { t } from '@lingui/macro';
import { ArticlePreview } from '@ts/types/articles';
import Link from 'next/link';
import ArrowRightIcon from '@assets/images/icon-arrow-right.svg';
import styles from './PostPreview.module.scss';
import Image from 'next/image';
type TitleLevel = 2 | 3 | 4 | 5 | 6;
const PostPreview = ({
post,
titleLevel,
}: {
post: ArticlePreview;
titleLevel: TitleLevel;
}) => {
const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
return (
<article className={styles.wrapper}>
{post.featuredImage && Object.keys(post.featuredImage).length > 0 && (
<div className={styles.cover}>
<Image
src={post.featuredImage.sourceUrl}
alt={post.featuredImage.altText}
layout="fill"
objectFit="contain"
/>
</div>
)}
<header className={styles.header}>
<TitleTag>
<Link href={`/article/${post.slug}`}>
<a>{post.title}</a>
</Link>
</TitleTag>
</header>
<div
className={styles.body}
dangerouslySetInnerHTML={{ __html: post.intro }}
></div>
<footer className={styles.footer}>
<Link href={`/article/${post.slug}`}>
<a className={styles['read-more']}>
{t`Read more`}
<span className="screen-reader-text">
{' '}
{t({ message: `about ${post.title}`, comment: 'Post title' })}
</span>
<ArrowRightIcon className={styles.icon} />
</a>
</Link>
</footer>
<PostMeta
commentCount={post.commentCount}
publicationDate={post.dates.publication}
updateDate={post.dates.update}
thematics={post.thematics}
/>
</article>
);
};
export default PostPreview;
|
