Yangshun Tay
3 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