[Projeto] Minha solução - Seção Recomendados

Como outros fizeram, criei outro componente com as recomendações para importá-lo ao final do post:

import style from './Outros.module.css'
import posts from 'assets/posts.json'
import PostCard from '../PostCard/PostCard'

export default function Outros({ id }) {
    const postsMenosAtual = posts.filter(post => post.id !== id)
    const postsSelecionados = postsMenosAtual.slice(0, 4)

    return (
        <>
            <h2 className={style.titulo}>Outros posts que você pode gostar:</h2>
            <ul className={style.posts}>
                {postsSelecionados.map(post => {
                    return (
                        <li key={post.id}>
                            <PostCard post={post} />
                        </li>
                    )
                })}
            </ul>
        </>
    )
}

Para isso, tive que pegar o id do post atual para retirá-lo da lista.

A seguir, o CSS:

.titulo{
    font-family: var(--fonte-secundaria);
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.posts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}