31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
import { mdxComponents } from '../posts-edge'
|
|
import Link from 'next/link'
|
|
import { MDXRemote } from 'next-mdx-remote'
|
|
import styles from './index.module.scss'
|
|
|
|
export default function LatestPosts({ posts }) {
|
|
return (
|
|
<div className={styles.container}>
|
|
<ul className={styles.postsList}>
|
|
{posts.map((post) => (
|
|
<li className={styles.post} key={post.slug}>
|
|
<div>
|
|
<Link href={`/posts/${encodeURIComponent(post.slug)}`}>
|
|
<a>
|
|
<h3 className={styles.postHeader}>{post.title}</h3>
|
|
</a>
|
|
</Link>
|
|
<time className={styles.postTimestamp}>{post.date.toString()}</time>
|
|
<div className={styles.postBlurb}><MDXRemote {...post.excerptMdx} components={mdxComponents} /></div>
|
|
<Link href={`/posts/${encodeURIComponent(post.slug)}`}>
|
|
<a className={styles.postReadMoreButtonLink}>
|
|
<span role="button" className={styles.postReadMoreButton}>Read More →</span>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|