xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2026-02-01 12:26:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

Setup initial phototag page, add navbar with explicit AppWrapper component

Browse Source
This commit is contained in:
Xevion
2022-12-30 16:10:05 -06:00
parent bd24cffee0
commit b253e06e59
5 changed files with 203 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppWrapper.tsx
+84
View File
@@ -0,0 +1,84 @@
import {FunctionComponent, ReactNode} from "react";
import {Disclosure} from '@headlessui/react'
import {HiBars3, HiXMark} from "react-icons/hi2";
import {classNames} from "../utils/helpers";
import Link from "next/link";
const navigation = [
{name: 'Home', href: '/', current: true},
{name: 'Projects', href: '/projects', current: false},
{name: 'Contact', href: '/contact', current: false},
]
type WrapperProps = {
children: ReactNode | ReactNode[];
};
const AppWrapper: FunctionComponent<WrapperProps> = ({children}: WrapperProps) => {
return <div className="min-h-screen bg-zinc-800 text-zinc-50">
<Disclosure as="nav" className="bg-zinc-900">
{({open}) => (
<>
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="relative flex h-16 items-center justify-between">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
{/* Mobile menu button*/}
<Disclosure.Button
className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-zinc-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<span className="sr-only">Open main menu</span>
{open ? (
<HiXMark className="block h-6 w-6" aria-hidden="true"/>
) : (
<HiBars3 className="block h-6 w-6" aria-hidden="true"/>
)}
</Disclosure.Button>
</div>
<div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div className="hidden sm:ml-6 sm:block">
<div className="flex space-x-4">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className={classNames(
item.current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
'px-3 py-2 rounded-md text-sm font-medium'
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</Link>
))}
</div>
</div>
</div>
</div>
</div>
<Disclosure.Panel className="sm:hidden">
<div className="space-y-1 px-2 pt-2 pb-3">
{navigation.map((item) => (
<Link href={item.href}>
<Disclosure.Button
key={item.name}
as="a"
className={classNames(
item.current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
'block px-3 py-2 rounded-md text-base font-medium'
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</Disclosure.Button>
</Link>
))}
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
{children}
</div>
}
export default AppWrapper;