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.