Last active
May 31, 2022 22:46
Star
You must be signed in to star a gist
Document list contribution application
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Head from "next/head"; | |
import { Fragment } from "react"; | |
import { useState } from "react"; | |
import { Disclosure, Menu, Transition } from "@headlessui/react"; | |
import { BellIcon, MenuIcon, XIcon } from "@heroicons/react/outline"; | |
const navigation = [ | |
{ name: "Document", href: "#", current: true }, | |
{ name: "Projects", href: "#", current: false }, | |
{ name: "Share", href: "#", current: false }, | |
]; | |
function classNames(...classes) { | |
return classes.filter(Boolean).join(" "); | |
} | |
export default function Home() { | |
const [avatar, setAvatar] = useState(""); | |
return ( | |
<> | |
<Head> | |
<title>Create Next App</title> | |
<meta name="description" content="Generated by create next app" /> | |
<link rel="icon" href="/favicon.ico" /> | |
</Head> | |
<Disclosure as="nav" className="bg-gray-800"> | |
{({ open }) => ( | |
<> | |
<div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"> | |
<div className="relative flex items-center justify-between h-16"> | |
<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 p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"> | |
<span className="sr-only">Open main menu</span> | |
{open ? ( | |
<XIcon className="block h-6 w-6" aria-hidden="true" /> | |
) : ( | |
<MenuIcon className="block h-6 w-6" aria-hidden="true" /> | |
)} | |
</Disclosure.Button> | |
</div> | |
<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"> | |
<div className="hidden sm:block sm:ml-6"> | |
<div className="flex space-x-4"> | |
{navigation.map((item) => ( | |
<a | |
key={item.name} | |
href={item.href} | |
className={classNames( | |
item.current | |
? "bg-gray-900 text-white" | |
: "text-gray-300 hover:bg-gray-700 hover:text-white", | |
"px-3 py-2 rounded-md text-sm font-medium" | |
)} | |
aria-current={item.current ? "page" : undefined} | |
> | |
{item.name} | |
</a> | |
))} | |
</div> | |
</div> | |
</div> | |
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"> | |
{/* Profile dropdown */} | |
<Menu as="div" className="ml-3 relative"> | |
<div> | |
<Menu.Button className="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> | |
<span className="sr-only">Open user menu</span> | |
<img | |
className="h-8 w-8 rounded-full" | |
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" | |
alt="" | |
/> | |
</Menu.Button> | |
</div> | |
<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="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"> | |
<Menu.Item> | |
{({ active }) => ( | |
<a | |
href="#" | |
className={classNames( | |
active ? "bg-gray-100" : "", | |
"block px-4 py-2 text-sm text-gray-700" | |
)} | |
> | |
Your Profile | |
</a> | |
)} | |
</Menu.Item> | |
<Menu.Item> | |
{({ active }) => ( | |
<a | |
href="#" | |
className={classNames( | |
active ? "bg-gray-100" : "", | |
"block px-4 py-2 text-sm text-gray-700" | |
)} | |
> | |
Settings | |
</a> | |
)} | |
</Menu.Item> | |
<Menu.Item> | |
{({ active }) => ( | |
<a | |
href="#" | |
className={classNames( | |
active ? "bg-gray-100" : "", | |
"block px-4 py-2 text-sm text-gray-700" | |
)} | |
> | |
Sign out | |
</a> | |
)} | |
</Menu.Item> | |
</Menu.Items> | |
</Transition> | |
</Menu> | |
</div> | |
</div> | |
</div> | |
<Disclosure.Panel className="sm:hidden"> | |
<div className="px-2 pt-2 pb-3 space-y-1"> | |
{navigation.map((item) => ( | |
<Disclosure.Button | |
key={item.name} | |
as="a" | |
href={item.href} | |
className={classNames( | |
item.current | |
? "bg-gray-900 text-white" | |
: "text-gray-300 hover:bg-gray-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> | |
))} | |
</div> | |
</Disclosure.Panel> | |
</> | |
)} | |
</Disclosure> | |
</> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment