142 lines
4.0 KiB
TypeScript
142 lines
4.0 KiB
TypeScript
import { type NextPage } from "next";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
|
|
|
interface DropdownOption {
|
|
label: string;
|
|
href: string;
|
|
}
|
|
|
|
interface NavBarLinkProps {
|
|
href: string;
|
|
label: string;
|
|
dropdown?: DropdownOption[];
|
|
}
|
|
|
|
const NavBarLink = ({ href, label, dropdown }: NavBarLinkProps) => {
|
|
const DropDown = ({
|
|
dropdownOptions,
|
|
}: {
|
|
dropdownOptions: DropdownOption[];
|
|
}) => {
|
|
const options = dropdownOptions.map((dropdownOption, index) => {
|
|
return (
|
|
<Link key={index} href={dropdownOption.href}>
|
|
<span className="block w-full bg-gradient-to-t from-neutral-900 to-neutral-700 px-4 py-2 text-white hover:from-neutral-500 hover:to-neutral-500">
|
|
{dropdownOption.label}
|
|
</span>
|
|
</Link>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="absolute right-0 left-0 top-full hidden w-full flex-col rounded-b border-l-2 border-r-2 border-b-2 border-neutral-900 group-hover:flex">
|
|
{options}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<li className="group relative">
|
|
<Link
|
|
href={href}
|
|
className={
|
|
"box-border block h-14 border-neutral-800" +
|
|
(dropdown ? "" : " hover:border-b-2")
|
|
}
|
|
>
|
|
<div className="flex h-full flex-row space-x-[4px]">
|
|
<div className="my-auto inline-block">
|
|
<span className="align-text-middle inline-block py-2 text-lg font-bold">
|
|
{label}
|
|
</span>
|
|
</div>
|
|
{dropdown ? <ChevronDownIcon className="w-4" /> : <></>}
|
|
</div>
|
|
</Link>
|
|
{dropdown && dropdown.length > 0 ? (
|
|
<DropDown dropdownOptions={dropdown} />
|
|
) : (
|
|
<></>
|
|
)}
|
|
</li>
|
|
);
|
|
};
|
|
|
|
const NavBar = () => {
|
|
const resourcesDropDown: DropdownOption[] = [
|
|
{
|
|
label: "search",
|
|
href: "/resources/search",
|
|
},
|
|
{
|
|
label: "view all",
|
|
href: "/resources",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-50 w-full border-b border-neutral-400 bg-gradient-to-b from-amber-300 to-amber-300 shadow-black drop-shadow-md">
|
|
<li className="mx-auto flex max-w-5xl flex-row px-4 sm:justify-between">
|
|
<ul id="left-nav-links" className="flex flex-row space-x-10">
|
|
<NavBarLink href="/" label="Home" />
|
|
<NavBarLink
|
|
dropdown={resourcesDropDown}
|
|
href="/resources"
|
|
label="Resources"
|
|
/>
|
|
<NavBarLink href="/about" label="About" />
|
|
</ul>
|
|
|
|
<ul id="right-nav-links" className="hidden flex-row space-x-10 sm:flex">
|
|
<li className="group relative">
|
|
<a
|
|
target="_blank"
|
|
href="https://forms.gle/FD2abgwBuTaipysZ6"
|
|
className="box-border block h-14 border-neutral-800 hover:border-b-2"
|
|
>
|
|
<div className="flex h-full flex-row space-x-[4px]">
|
|
<div className="my-auto inline-block">
|
|
<span className="align-text-middle inline-block py-2 text-lg font-bold">
|
|
Provide Feedback
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<NavBarLink href="/contact" label="Contact Us" />
|
|
</ul>
|
|
</li>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
const Header: NextPage = () => {
|
|
return (
|
|
<>
|
|
<div
|
|
id="logo-row"
|
|
className="border-yellow flex flex-row justify-center border-b bg-neutral-800 p-4 drop-shadow-xl"
|
|
>
|
|
<div className="rounded-xl bg-yellow-100 p-2 shadow-md shadow-yellow-500/50">
|
|
<Image
|
|
alt="Ear listening"
|
|
src="/listening-ear.svg"
|
|
width={64}
|
|
height={64}
|
|
/>
|
|
</div>
|
|
<div id="header-title" className="grid w-64 place-items-center">
|
|
<h1 className="text-center text-2xl font-bold text-neutral-200">
|
|
Center for Auditory Training Resources
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<NavBar />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|