69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { JSX } from "preact";
|
|
import { type PublicUser } from "@/types.ts";
|
|
|
|
const NAV_ITEM_CLASSES =
|
|
"flex justify-center items-center px-4 py-2 hover:bg-gray-300 dark:hover:bg-gray-700";
|
|
|
|
const HEADER_CLASSES = "bg-gray-200 dark:bg-gray-800";
|
|
|
|
export function LoginNavItems() {
|
|
return (
|
|
<>
|
|
<a
|
|
tabIndex={12}
|
|
href="/register"
|
|
class={`${NAV_ITEM_CLASSES} ml-auto`}
|
|
>
|
|
Register
|
|
</a>
|
|
<a tabIndex={13} href="/login" class={NAV_ITEM_CLASSES}>Login</a>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function UserNavItems() {
|
|
return (
|
|
<>
|
|
<a
|
|
tabIndex={12}
|
|
href="/profile"
|
|
class={`${NAV_ITEM_CLASSES} ml-auto`}
|
|
>
|
|
Profile
|
|
</a>
|
|
<a tabIndex={13} href="/dashboard" class={NAV_ITEM_CLASSES}>Dashboard</a>
|
|
<a tabIndex={13} href="/logout" class={NAV_ITEM_CLASSES}>Logout</a>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export interface PageProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
user?: PublicUser;
|
|
}
|
|
|
|
export function Page(props: PageProps) {
|
|
return (
|
|
<div class="relative min-h-screen flex flex-col">
|
|
<header class="flex justify-start items-center">
|
|
<nav class={`flex w-full drop-shadow-md ${HEADER_CLASSES}`}>
|
|
<a
|
|
tabIndex={10}
|
|
href="/"
|
|
class={`${NAV_ITEM_CLASSES} text-black dark:text-white`}
|
|
>
|
|
<h1 class="text-2xl">LyricScreen</h1>
|
|
</a>
|
|
<a tabIndex={11} href="/note" class={NAV_ITEM_CLASSES}>Notes</a>
|
|
{props.user ? UserNavItems() : LoginNavItems()}
|
|
</nav>
|
|
</header>
|
|
<main class="p-2">
|
|
{props.children}
|
|
</main>
|
|
<footer class={`p-2 w-full mt-auto ${HEADER_CLASSES}`}>
|
|
"It's a bit much, really..."
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|