Notra/src/components/Header.tsx

42 lines
1.3 KiB
TypeScript

import Link from "next/link";
import { CircleQuestionMark, List, Plus, UserRound, UserRoundMinus } from "lucide-react";
import { logOut } from "@/app/actions";
import { getAuth } from "@/lib/auth";
import HeaderButton from "./ui/HeaderButton";
export default async function Header() {
const auth = await getAuth();
return (
<header className="flex items-center gap-6 m-4">
<Link href={auth ? "/notes" : "/"}>
<HeaderButton title="rhyme" className="bg-sky-600 hover:bg-sky-500" />
</Link>
{auth && (
<div className="flex gap-2">
<Link href="/notes/new">
<HeaderButton title="new" icon={<Plus size={20} />} />
</Link>
<Link href="/notes">
<HeaderButton title="list" icon={<List size={20} />} />
</Link>
</div>
)}
<div className="flex gap-2 ml-auto">
<Link href="/about">
<HeaderButton title="about" icon={<CircleQuestionMark size={20} />} />
</Link>
{auth ? (
<HeaderButton onClick={logOut} title="log out" icon={<UserRoundMinus size={20} />} />
) : (
<Link href="/auth">
<HeaderButton title="login" icon={<UserRound size={20} />} />
</Link>
)}
</div>
</header>
);
}