99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
import React, { Fragment } from "react";
|
|
import classNames from "classnames";
|
|
import { Menu, Transition } from "@headlessui/react";
|
|
|
|
import Burger from "./Burger";
|
|
|
|
const Drop = () => {
|
|
return (
|
|
<div>
|
|
<Menu as="div" className="relative inline-block text-left">
|
|
<div>
|
|
<Menu.Button
|
|
className="inline-flex justify-center w-full rounded-md border
|
|
border-gray-300 shadow-sm px-1 py-1 bg-white text-sm font-medium
|
|
text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2
|
|
focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-black"
|
|
>
|
|
About
|
|
</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-5 w-56 rounded-md
|
|
shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
|
>
|
|
<div className="py-1">
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<a
|
|
href="#"
|
|
className={classNames(
|
|
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
|
"block px-4 py-2 text-sm"
|
|
)}
|
|
>
|
|
About Freeland
|
|
</a>
|
|
)}
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<a
|
|
href="#"
|
|
className={classNames(
|
|
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
|
"block px-4 py-2 text-sm"
|
|
)}
|
|
>
|
|
Contact Us
|
|
</a>
|
|
)}
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<a
|
|
href="#"
|
|
className={classNames(
|
|
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
|
"block px-4 py-2 text-sm"
|
|
)}
|
|
>
|
|
Help
|
|
</a>
|
|
)}
|
|
</Menu.Item>
|
|
{/* <form method="POST" action="#">
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<button
|
|
type="submit"
|
|
className={classNames(
|
|
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
|
"block w-full text-left px-4 py-2 text-sm"
|
|
)}
|
|
>
|
|
Sign out
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
</form> */}
|
|
</div>
|
|
</Menu.Items>
|
|
</Transition>
|
|
</Menu>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Drop;
|