Yangshun Tay
2 years ago
parent
35d614e582
commit
8481ab1044
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.6 KiB |
@ -0,0 +1,21 @@
|
||||
import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
|
||||
|
||||
const navigation: ProductNavigationItems = [
|
||||
{
|
||||
children: [
|
||||
{ href: '/resumes', name: 'View Resumes' },
|
||||
{ href: '/resumes/submit', name: 'Submit Resume' },
|
||||
],
|
||||
href: '#',
|
||||
name: 'Resumes',
|
||||
},
|
||||
{ href: '/questions', name: 'Question Bank' },
|
||||
{ href: '/offers', name: 'Offers' },
|
||||
];
|
||||
|
||||
const config = {
|
||||
navigation,
|
||||
title: 'Tech Interview Handbook',
|
||||
};
|
||||
|
||||
export default config;
|
||||
@ -0,0 +1,72 @@
|
||||
import clsx from 'clsx';
|
||||
import { Fragment } from 'react';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import { ChevronDownIcon } from '@heroicons/react/20/solid';
|
||||
|
||||
type NavigationItem = Readonly<{
|
||||
children?: ReadonlyArray<NavigationItem>;
|
||||
href: string;
|
||||
name: string;
|
||||
}>;
|
||||
|
||||
export type ProductNavigationItems = ReadonlyArray<NavigationItem>;
|
||||
|
||||
type Props = Readonly<{
|
||||
items: ProductNavigationItems;
|
||||
title: string;
|
||||
}>;
|
||||
|
||||
export default function ProductNavigation({ items, title }: Props) {
|
||||
return (
|
||||
<nav aria-label="Global" className="flex space-x-10">
|
||||
<span className="text-primary-700 text-sm font-medium">{title}</span>
|
||||
{items.map((item) =>
|
||||
item.children != null && item.children.length > 0 ? (
|
||||
<Menu key={item.name} as="div" className="relative text-left">
|
||||
<Menu.Button className="focus:ring-primary-600 flex items-center rounded-md text-sm font-medium text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
|
||||
<span>{item.name}</span>
|
||||
<ChevronDownIcon
|
||||
aria-hidden="true"
|
||||
className="ml-1 h-5 w-5 text-gray-500"
|
||||
/>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95">
|
||||
<Menu.Items className="absolute left-0 z-10 mt-2 w-40 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="py-1">
|
||||
{item.children.map((child) => (
|
||||
<Menu.Item key={child.name}>
|
||||
{({ active }) => (
|
||||
<a
|
||||
className={clsx(
|
||||
active ? 'bg-gray-100' : '',
|
||||
'block px-4 py-2 text-sm text-gray-700',
|
||||
)}
|
||||
href={child.href}>
|
||||
{child.name}
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
) : (
|
||||
<a
|
||||
key={item.name}
|
||||
className="text-sm font-medium text-gray-900"
|
||||
href={item.href}>
|
||||
{item.name}
|
||||
</a>
|
||||
),
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
|
||||
|
||||
const navigation: ProductNavigationItems = [
|
||||
{
|
||||
children: [
|
||||
{ href: '#', name: 'Technical Support' },
|
||||
{ href: '#', name: 'Sales' },
|
||||
{ href: '#', name: 'General' },
|
||||
],
|
||||
href: '#',
|
||||
name: 'Inboxes',
|
||||
},
|
||||
{ children: [], href: '#', name: 'Reporting' },
|
||||
{ children: [], href: '#', name: 'Settings' },
|
||||
];
|
||||
|
||||
const config = {
|
||||
navigation,
|
||||
title: 'Offers',
|
||||
};
|
||||
|
||||
export default config;
|
||||
@ -1,56 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
const navigation = [
|
||||
{ href: '/questions/landing', name: '*Landing*' },
|
||||
{ href: '/questions', name: 'Home' },
|
||||
{ href: '#', name: 'My Lists' },
|
||||
{ href: '#', name: 'My Questions' },
|
||||
{ href: '#', name: 'History' },
|
||||
];
|
||||
|
||||
export default function NavBar() {
|
||||
return (
|
||||
<header className="bg-indigo-600">
|
||||
<nav aria-label="Top" className="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex w-full items-center justify-between border-b border-indigo-500 py-3 lg:border-none">
|
||||
<div className="flex items-center">
|
||||
<a className="flex items-center" href="/questions">
|
||||
<span className="sr-only">TIH Question Bank</span>
|
||||
<img alt="TIH Logo" className="h-10 w-auto" src="/logo.svg" />
|
||||
<span className="ml-4 font-bold text-white">
|
||||
TIH Question Bank
|
||||
</span>
|
||||
</a>
|
||||
<div className="ml-8 hidden space-x-6 lg:block">
|
||||
{navigation.map((link) => (
|
||||
<Link
|
||||
key={link.name}
|
||||
className="font-sm text-sm text-white hover:text-indigo-50"
|
||||
href={link.href}>
|
||||
{link.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-8 space-x-4">
|
||||
<a
|
||||
className="inline-block rounded-md border border-transparent bg-indigo-500 py-2 px-4 text-base font-medium text-white hover:bg-opacity-75"
|
||||
href="#">
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center space-x-6 py-4 lg:hidden">
|
||||
{navigation.map((link) => (
|
||||
<Link
|
||||
key={link.name}
|
||||
className="text-base font-medium text-white hover:text-indigo-50"
|
||||
href={link.href}>
|
||||
{link.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
|
||||
|
||||
const navigation: ProductNavigationItems = [
|
||||
{ href: '/questions', name: 'Home' },
|
||||
{ href: '#', name: 'My Lists' },
|
||||
{ href: '#', name: 'My Questions' },
|
||||
{ href: '#', name: 'History' },
|
||||
];
|
||||
|
||||
const config = {
|
||||
navigation,
|
||||
title: 'Questions Bank',
|
||||
};
|
||||
|
||||
export default config;
|
||||
@ -0,0 +1,22 @@
|
||||
import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
|
||||
|
||||
const navigation: ProductNavigationItems = [
|
||||
{
|
||||
children: [
|
||||
{ href: '#', name: 'Technical Support' },
|
||||
{ href: '#', name: 'Sales' },
|
||||
{ href: '#', name: 'General' },
|
||||
],
|
||||
href: '#',
|
||||
name: 'Inboxes',
|
||||
},
|
||||
{ children: [], href: '#', name: 'Reporting' },
|
||||
{ children: [], href: '#', name: 'Settings' },
|
||||
];
|
||||
|
||||
const config = {
|
||||
navigation,
|
||||
title: 'Resumes',
|
||||
};
|
||||
|
||||
export default config;
|
||||
Loading…
Reference in new issue