forked from nodejs/nodejs.dev
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.tsx
More file actions
62 lines (57 loc) · 1.76 KB
/
index.tsx
File metadata and controls
62 lines (57 loc) · 1.76 KB
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
import React, { Fragment } from 'react';
import { injectIntl, WrappedComponentProps } from 'react-intl';
import { LocalizedLink as Link } from 'gatsby-theme-i18n';
import { getTerminatingString } from '../../../util/getTerminatingString';
import { blogPath } from '../../../../pathPrefixes';
import { BlogPost } from '../../../types';
import styles from './index.module.scss';
const getBlogCategoryUrl = (category: string): string =>
`${blogPath}${category}/`;
const getBlogPostUrl = (slug: string) =>
slug.endsWith('/') ? slug : `${slug}/`;
interface Props {
data: BlogPost;
}
const BlogCard = ({
data: {
node: {
fields: { date, slug, readingTime },
frontmatter: { blogAuthors, title, category },
},
},
intl,
}: Props & WrappedComponentProps): JSX.Element => (
<div className={styles.blogCard}>
<div className={styles.title}>
<Link to={getBlogPostUrl(slug)}>{title}</Link>
<div className={styles.metadata}>
{category && (
<Link
className={styles.category}
to={getBlogCategoryUrl(category.name)}
>
{intl.formatMessage({ id: category.slug })}
</Link>
)}
<span>{readingTime.text}</span>
</div>
</div>
<div className={styles.content}>
<h4>{date}</h4>
<p>
{intl.formatMessage({ id: 'blog.authors.list.title.by' })}{' '}
{blogAuthors?.map((author, i) => (
<Fragment key={author.name}>
<span>{author.name}</span>
{getTerminatingString(
i,
blogAuthors.length,
` ${intl.formatMessage({ id: 'blog.authors.list.title.and' })} `
)}
</Fragment>
))}
</p>
</div>
</div>
);
export default injectIntl(BlogCard);