66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
|
import { Fragment, useState } from 'react'
|
||
|
|
import { Dialog, Transition } from '@headlessui/react'
|
||
|
|
import { XIcon } from '@heroicons/react/outline'
|
||
|
|
|
||
|
|
export default function SlideOver() {
|
||
|
|
const [open, setOpen] = useState(true)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Transition.Root show={open} as={Fragment}>
|
||
|
|
<Dialog
|
||
|
|
as="div"
|
||
|
|
className="fixed inset-0 overflow-hidden"
|
||
|
|
onClose={setOpen}
|
||
|
|
>
|
||
|
|
<div className="absolute inset-0 overflow-hidden">
|
||
|
|
<Dialog.Overlay className="absolute inset-0" />
|
||
|
|
|
||
|
|
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
|
||
|
|
<Transition.Child
|
||
|
|
as={Fragment}
|
||
|
|
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||
|
|
enterFrom="translate-x-full"
|
||
|
|
enterTo="translate-x-0"
|
||
|
|
leave="transform transition ease-in-out duration-500 sm:duration-700"
|
||
|
|
leaveFrom="translate-x-0"
|
||
|
|
leaveTo="translate-x-full"
|
||
|
|
>
|
||
|
|
<div className="w-screen max-w-md">
|
||
|
|
<div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
|
||
|
|
<div className="px-4 sm:px-6">
|
||
|
|
<div className="flex items-start justify-between">
|
||
|
|
<Dialog.Title className="text-lg font-medium text-gray-900">
|
||
|
|
Panel title
|
||
|
|
</Dialog.Title>
|
||
|
|
<div className="ml-3 h-7 flex items-center">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||
|
|
onClick={() => setOpen(false)}
|
||
|
|
>
|
||
|
|
<span className="sr-only">Close panel</span>
|
||
|
|
<XIcon className="h-6 w-6" aria-hidden="true" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-6 relative flex-1 px-4 sm:px-6">
|
||
|
|
{/* Replace with your content */}
|
||
|
|
<div className="absolute inset-0 px-4 sm:px-6">
|
||
|
|
<div
|
||
|
|
className="h-full border-2 border-dashed border-gray-200"
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{/* /End replace */}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Transition.Child>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Dialog>
|
||
|
|
</Transition.Root>
|
||
|
|
)
|
||
|
|
}
|