src/pages/login.tsx

import { useState } from "react";
import { login } from "../hooks/auth";

function Login() {
 const [username, setUsername] = useState("");
 const [password, setPassword] = useState("");
 const [isLoggedIn, setIsLoggedIn] = useState(false);

 const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await login(username, password);
    if (res.ok) {
      setIsLoggedIn(true);
      // redirect to profile page
    } else {
      // show error message
    }
 };

 return (
    <form onSubmit={handleSubmit}>
      <h1>Login</h1>
      <label htmlFor="username">Username</label>
      <input
        type="text"
        name="username"
        id="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <label htmlFor="password">Password</label>
      <input
        type="password"
        name="password"
        id="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Login</button>
      <p>
        Don't have an account? <a href="/signup">Signup</a>
      </p>
    </form>
 );
}

export default Login;