Blog.jsx

1function List({ posts }) {2  return (3    <div className="wrap">4      <div className="page-head">5        <h1>Blog</h1>6        <p className="lead">Long-form posts, newest first.</p>7      </div>8      <div className="grid posts">9        {posts.map((one) => (10          <article key={one.slug} className="card">11            <a className="shot" href={one.route}>12              {one.image ? <img src={one.image} alt="" loading="lazy" /> : null}13            </a>14            <h3>15              <a href={one.route}>{one.title}</a>16            </h3>17            <time>{one.date}</time>18            <p>{one.lead}</p>19          </article>20        ))}21      </div>22    </div>23  );24}2526export function Blog({ posts = [], post, body }) {27  if (!post) return <List posts={posts} />;28  return (29    <div className="wrap narrow">30      <article className="doc">31        <h1>{post.title}</h1>32        <p className="lead">{post.lead}</p>33        <p className="when">34          <time>{post.date}</time>35        </p>36        <div className="prose" data-body dangerouslySetInnerHTML={{ __html: body }}></div>37      </article>38    </div>39  );40}