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> ) }