PostList A1

<ul
  sx={{
    listStyle: 'none',
    m: 0,
    px: 3,
    py: 4,
  }}>
  {posts.map((post) => (
    <li
      key={post.id}
      sx={{
        mb: 4,
      }}>
      <Themed.h2
        sx={{
          m: 0,
        }}>
        <Link
          to={post.slug}
          sx={{
            color: 'inherit',
            textDecoration: 'none',
            ':hover,:focus': {
              color: 'primary',
              textDecoration: 'underline',
            },
          }}>
          {post.title}
        </Link>
      </Themed.h2>
      <small sx={{ fontWeight: 'bold' }}>{post.date}</small>
      <Themed.p>{post.excerpt}</Themed.p>
    </li>
  ))}
</ul>
<ul
  sx={{
    listStyle: 'none',
    m: 0,
    px: 3,
    py: 4,
  }}>
  {posts.map((post) => (
    <li
      key={post.id}
      sx={{
        mb: 4,
      }}>
      <Themed.h2
        sx={{
          m: 0,
        }}>
        <Link
          to={post.slug}
          sx={{
            color: 'inherit',
            textDecoration: 'none',
            ':hover,:focus': {
              color: 'primary',
              textDecoration: 'underline',
            },
          }}>
          {post.title}
        </Link>
      </Themed.h2>
      <small sx={{ fontWeight: 'bold' }}>{post.date}</small>
      <Themed.p>{post.excerpt}</Themed.p>
    </li>
  ))}
</ul>