Executando verificação de segurança...
2

Olá amigo, o conceito fundamental do React é: Componentização. Você precisa pegar esse dashboard e literalmente dividi-lo em partes menores. Por exemplo, veja essa parte do seu código:

<button className="w-full flex-1 px-4 py-2 text-start">
    Editar
</button>
<button className="w-full flex-1 px-4 py-2 text-start">
    Backup
</button>
<button className="w-full flex-1 px-4 py-2 text-start">
    Compartilhar
</button>
<button className="w-full flex-1 px-4 py-2 text-start">
    Excluir
</button>

Percebe que eles são iguais? Portanto, crie um componente separado para eles e apenas o importe em seu dashboard.

Além disso, observe este trecho de código:

<summary
    className="flex w-full flex-1 cursor-pointer select-none flex-row justify-between font-bold"
    onClick={() => {
        if (isOpen) {
            setOpenSessions(
                openSessions.filter((item) => item !== index),
            );
        } else {
            setOpenSessions([...openSessions, index]);
        }
    }}
>

A lógica do código não deve estar dentro do JSX. Crie uma função antes do return do JSX e use essa função no evento OnClick. Ademais, lembre-se sempre de manter seus componentes o mais limpos possível. Boa sorte, amigo. Você consegue.

Carregando publicação patrocinada...
2