ls-deno/routes/_app.tsx

79 lines
2.1 KiB
TypeScript
Raw Normal View History

2022-10-11 23:49:36 -05:00
import { type AppProps, Handlers } from "$fresh/server.ts";
2022-10-11 17:02:45 -05:00
import { type PublicUser } from "@/types.ts";
import { type ContextState } from "@/types.ts";
interface MyAppProps extends AppProps {
user?: PublicUser;
}
2022-10-11 23:49:36 -05:00
export const handler: Handlers<MyAppProps, ContextState> = {
2022-10-11 17:12:32 -05:00
async GET(request: Request, context) {
2022-10-11 23:49:36 -05:00
console.error("\n\nYO\n\n");
2022-10-11 17:12:32 -05:00
console.log("AppHandler:", request, context);
2022-10-11 23:49:36 -05:00
return await context.render({ user: context.state.user });
2022-10-11 17:02:45 -05:00
},
};
2022-10-11 23:49:36 -05:00
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>
</>
);
}
2022-10-11 17:02:45 -05:00
export default function App({ Component, ...props }: MyAppProps) {
console.log("AppProps:", props);
return (
2022-10-11 23:49:36 -05:00
<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">
<Component></Component>
</main>
<footer class={`p-2 w-full mt-auto ${HEADER_CLASSES}`}>
"It's a bit much, really..."
</footer>
</div>
2022-10-11 17:02:45 -05:00
);
}