77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import type { Metadata } from "next";
|
|
import "./globals.css";
|
|
import Image from "next/image";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "CSC Librarian",
|
|
description: "A simple library management system for UW CSC",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en">
|
|
<body className={"font-mono"}>
|
|
{navbar}
|
|
{children}
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
const navbarButtonClasses =
|
|
"block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500";
|
|
|
|
const navbar = (
|
|
<nav className="fixed start-0 top-0 z-20 w-full border-b border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-900">
|
|
<div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4">
|
|
<a href="/" className="flex items-center space-x-3 rtl:space-x-reverse">
|
|
<Image
|
|
src="/images/csc-icon.svg"
|
|
className="h-8"
|
|
alt="CSC Logo"
|
|
width={70}
|
|
height={16}
|
|
/>
|
|
<span className="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">
|
|
Librarian
|
|
</span>
|
|
</a>
|
|
<button
|
|
data-collapse-toggle="navbar-default"
|
|
type="button"
|
|
className="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden"
|
|
aria-controls="navbar-default"
|
|
aria-expanded="false"
|
|
></button>
|
|
<div className="hidden w-full md:block md:w-auto" id="navbar-default">
|
|
<ul className="mt-4 flex flex-col rounded-lg border border-gray-100 bg-gray-50 p-4 font-medium dark:border-gray-700 dark:bg-gray-800 md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:p-0 md:dark:bg-gray-900 rtl:space-x-reverse">
|
|
<li>
|
|
<a href="/" className={navbarButtonClasses}>
|
|
Home
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="catalogue" className={navbarButtonClasses}>
|
|
Catalogue
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="modify" className={navbarButtonClasses}>
|
|
Modify
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="admin" className={navbarButtonClasses}>
|
|
Admin
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|