ls-deno/components/Page.tsx

28 lines
910 B
TypeScript
Raw Normal View History

2022-09-29 20:22:30 -05:00
import { JSX } from "preact";
2022-09-30 15:14:57 -05:00
const NAV_ITEM_CLASSES =
"flex justify-center items-center px-4 py-2 text-blue-500 hover:bg-purple-700";
2022-09-29 20:22:30 -05:00
export function Page(props: JSX.HTMLAttributes<HTMLDivElement>) {
return (
2022-09-30 15:14:57 -05:00
<div class="relative min-h-screen flex flex-col">
<header class="flex justify-start items-center">
<nav class="flex bg-gray-800 w-full drop-shadow-md">
<a href="/" class={NAV_ITEM_CLASSES}>
<h1 class="text-2xl">LyricScreen</h1>
</a>
<a href="/note" class={NAV_ITEM_CLASSES}>Notes</a>
<a href="/register" class={NAV_ITEM_CLASSES}>Register</a>
<a href="/login" class={NAV_ITEM_CLASSES}>Login</a>
2022-09-29 20:22:30 -05:00
</nav>
</header>
2022-09-30 15:14:57 -05:00
<main class="p-2">
2022-09-29 20:22:30 -05:00
{props.children}
</main>
2022-09-30 15:14:57 -05:00
<footer class="p-2 bg-gray-800 w-full mt-auto">
2022-09-29 20:22:30 -05:00
"It's a bit much, really..."
</footer>
</div>
);
}