Code review: Vistas Dinámicas para el SignIn

Por comodidad y escalabilidad es mejor separar y crear un servicio (pequeña librería) que interactúe con el LocalStorage. Algo asi:

De esta manera es más simple llamar cualquier cosa del storage, por ejemplo:

Tan solo se importa donde se necesite y de esta manera no tienes que hacer JSON.parse o JSON.stringify en todo lado, aparte que esa lógica queda encapsulada en 1 solo lado, por ende si se necesita cambiar algo. El cambio es en 1 solo lado:

También se puede renderizar de la siguiente manera:

{
	condición
		? render1
		: render2 
} 

.
Si se cumple la condición se ejecuta el render1 y sino el render2.
.
Por ejemplo:

return (
    <Layout>
      <h1 className="font-medium text-xl text-center mb-6 w-80">Welcome!</h1>
      {view === "create-user-info" ? (
        <div>Crear usuario</div>
      ) : (
        <div className="flex flex-col w-80">
          <p>
            <span className="font-ligth text-sm">Email: </span>
            <span>{parsedAccount?.email}</span>
          </p>
          <p>
            <span className="font-light text-sm">Password: </span>
            <span>{parsedAccount?.password}</span>
          </p>
          <Link to="/">
            <button
              className="bg-black disabled:bg-black/40 text-white w-full rounded-lg py-3 mt-4 mb-2"
              disabled={!hasUserAnAccount}
            >
              Log In
            </button>
          </Link>
          <div className="text-center">
            <a
              className="font-light text-xs underline underline-offset-4"
              href="/"
            >
              Forgot my password
            </a>
          </div>
          <button
            onClick={() => setView("create-user-info")}
            className="border border-black disabled:text-black/40 disabled:border-black/40 rounded-lg mt-6 py-3"
            disabled={hasUserAnAccount}
          >
            Sign Up
          </button>
        </div>
      )}
    </Layout>
  );