55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import axios from "axios";
|
|
import Link from "next/link";
|
|
import {useRouter} from "next/router";
|
|
|
|
interface Props {
|
|
profilePicture: string;
|
|
}
|
|
|
|
/* eslint-disable @next/next/no-img-element */
|
|
export default function Navbar({profilePicture}: Props) {
|
|
const router = useRouter();
|
|
|
|
const logout = async () => {
|
|
axios.post("/api/logout").finally(() => {
|
|
router.push("/login");
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="navbar bg-neutral-100 drop-shadow-md text-black z-10">
|
|
<div className="flex-1">
|
|
<Link className="btn btn-ghost normal-case text-xl" href="/">
|
|
IELTS GPT
|
|
</Link>
|
|
</div>
|
|
<div className="flex-none gap-2">
|
|
<div className="form-control">
|
|
<input type="text" placeholder="Search" className="input input-bordered bg-white" />
|
|
</div>
|
|
<div className="dropdown dropdown-end">
|
|
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
|
|
<div className="w-10 rounded-full">
|
|
<img src={profilePicture} alt="Profile picture" />
|
|
</div>
|
|
</label>
|
|
<ul tabIndex={0} className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
|
|
<li>
|
|
<a className="justify-between">
|
|
Profile
|
|
<span className="badge">New</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a>Settings</a>
|
|
</li>
|
|
<li>
|
|
<a onClick={logout}>Logout</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|