85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import { Dialog, Transition } from "@headlessui/react";
|
|
import { Fragment, useState } from "react";
|
|
import { FiSliders } from "react-icons/fi";
|
|
|
|
const Settings = () => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
title="Settings"
|
|
className="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
|
|
flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<FiSliders />
|
|
</button>
|
|
|
|
<Transition appear show={open} as={Fragment}>
|
|
<Dialog
|
|
as="div"
|
|
className="fixed inset-0 z-10 overflow-y-auto"
|
|
onClose={() => setOpen(false)}
|
|
>
|
|
<div className="min-h-screen px-4 text-center">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<Dialog.Overlay className="fixed inset-0" />
|
|
</Transition.Child>
|
|
|
|
<span
|
|
className="inline-block h-screen align-middle"
|
|
aria-hidden="true"
|
|
>
|
|
​
|
|
</span>
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95"
|
|
>
|
|
<div className="my-8 inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
|
|
<Dialog.Title
|
|
as="h3"
|
|
className="text-lg font-medium leading-6 text-gray-900"
|
|
>
|
|
Settings
|
|
</Dialog.Title>
|
|
<div className="mt-2">
|
|
<p className="text-sm text-gray-500">
|
|
Here are some knobs for you to tweak.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
<button
|
|
type="button"
|
|
className="inline-flex justify-center rounded-md border border-transparent bg-sky-100 px-4 py-2 text-sm font-medium text-sky-800 hover:bg-sky-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2"
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
Wicked!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Transition.Child>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|