ls-deno/components/Page.tsx

36 lines
1.1 KiB
TypeScript
Raw Normal View History

2022-09-29 20:22:30 -05:00
import { JSX } from "preact";
2022-10-01 14:35:36 -05:00
const NAV_ITEM_CLASSES =
2022-10-01 14:46:17 -05:00
"flex justify-center items-center px-4 py-2 hover:bg-gray-300 dark:hover:bg-gray-700";
2022-10-01 14:03:15 -05:00
const HEADER_CLASSES = "bg-gray-200 dark:bg-gray-800";
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">
2022-10-01 14:03:15 -05:00
<nav class={`flex w-full drop-shadow-md ${HEADER_CLASSES}`}>
2022-10-01 14:34:07 -05:00
<a
tabIndex={10}
href="/"
class={`${NAV_ITEM_CLASSES} text-black dark:text-white`}
>
2022-09-30 15:14:57 -05:00
<h1 class="text-2xl">LyricScreen</h1>
</a>
2022-10-01 14:34:07 -05:00
<a tabIndex={11} href="/note" class={NAV_ITEM_CLASSES}>Notes</a>
<a tabIndex={12} href="/register" class={NAV_ITEM_CLASSES}>
Register
</a>
<a tabIndex={13} 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-10-01 14:03:15 -05:00
<footer class={`p-2 w-full mt-auto ${HEADER_CLASSES}`}>
2022-09-29 20:22:30 -05:00
"It's a bit much, really..."
</footer>
</div>
);
}