blob: 3ea4c407cbdbd8e7d119689d75fcdf560e80f17a (
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
66
|
import PostMeta from '@components/PostMeta/PostMeta';
import { t } from '@lingui/macro';
import { ArticleMeta, ArticlePreview } from '@ts/types/articles';
import Link from 'next/link';
import styles from './PostPreview.module.scss';
import Image from 'next/image';
import { ButtonLink } from '@components/Buttons';
import { ArrowIcon } from '@components/Icons';
type TitleLevel = 2 | 3 | 4 | 5 | 6;
const PostPreview = ({
post,
titleLevel,
}: {
post: ArticlePreview;
titleLevel: TitleLevel;
}) => {
const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
const meta: ArticleMeta = {
commentCount: post.commentCount ? post.commentCount : 0,
dates: post.dates,
subjects: post.subjects,
thematics: post.thematics,
};
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 className={styles.title}>
<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}>
<ButtonLink target={`/article/${post.slug}`} position="left">
{t`Read more`}
<span className="screen-reader-text">
{' '}
{t({ message: `about ${post.title}`, comment: 'Post title' })}
</span>
<ArrowIcon />
</ButtonLink>
</footer>
<PostMeta meta={meta} />
</article>
);
};
export default PostPreview;
|
