blob: 8f3e0da741a45b3d3e2ea2d1e49eb7255f48d193 (
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
|
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';
const PostPreview = ({
post,
TitleTag,
}: {
post: ArticlePreview;
TitleTag: keyof JSX.IntrinsicElements;
}) => {
return (
<article className={styles.wrapper}>
{post.featuredImage && (
<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.content }}
></div>
<footer className={styles.footer}>
<Link href={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.date.publication}
updateDate={post.date.update}
thematics={post.thematics}
/>
</article>
);
};
export default PostPreview;
|
