AuthModals component

_app.tsx

type AuthModalState = "none" | "login" | "signup" | "resetpassword";

interface AuthModalProps {
  state: AuthModalState
  setState: (state: AuthModalState) => void,
}

function AuthModals({ state, setState }: AuthModalProps) {

  if (state === "signup") {
    return (
      <SignUpModal
        onDismiss={() => setState("none")}
        onLoginInsteadClicked={() => setState("login")}
      />
    );
  }

  if (state === "login") {
    return (
      <LoginModal
        onDismiss={() => setState("none")}
        onSignUpInsteadClicked={() => setState("signup")}
        onForgotPasswordClicked={() => setState("resetpassword")} />
    );
  }

  if (state === "resetpassword") {
    <ResetPasswordModal
      onDismiss={() => setState("none")}
      onSignUpClicked={() => setState("signup")}
    />
  }

  return null;
}