Something went wrong. Try again.
fork of ozone with nix stuff
Something went wrong. Try again.
3.5 kB · 88 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889import { Fragment, ReactNode } from 'react'import { Dialog, Transition, TransitionChild, DialogTitle, DialogPanel,} from '@headlessui/react'import { XMarkIcon } from '@heroicons/react/24/outline'
export function ActionPanel(props: { open: boolean onClose: () => void title?: ReactNode children?: ReactNode}) { const { open, onClose, title, children } = props return ( <Transition show={open} as={Fragment}> <Dialog as="div" className="relative z-10" onClose={onClose}> <TransitionChild as={Fragment} enter="ease-in-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in-out duration-300" leaveFrom="opacity-100" leaveTo="opacity-0" > <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" /> </TransitionChild> <div className="fixed inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden"> <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10"> <TransitionChild as={Fragment} enter="transform transition ease-in-out duration-300 sm:duration-500" enterFrom="translate-x-full" enterTo="translate-x-0" leave="transform transition ease-in-out duration-300 sm:duration-500" leaveFrom="translate-x-0" leaveTo="translate-x-full" > <DialogPanel className="pointer-events-auto relative w-screen max-w-md"> <TransitionChild as={Fragment} enter="ease-in-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in-out duration-300" leaveFrom="opacity-100" leaveTo="opacity-0" > <div className="absolute top-0 left-0 -ml-8 flex pt-4 pr-2 sm:-ml-10 sm:pr-4"> <button type="button" className="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white" onClick={onClose} > <span className="sr-only">Close panel</span> <XMarkIcon className="h-6 w-6" aria-hidden="true" /> </button> </div> </TransitionChild> <div className="flex h-full flex-col overflow-y-scroll bg-white dark:bg-slate-900 py-6 shadow-xl"> {title && ( <div className="px-4 sm:px-6"> {typeof title !== 'string' && title} {typeof title === 'string' && ( <DialogTitle className="text-lg font-medium text-gray-900"> {title} </DialogTitle> )} </div> )} <div className="relative mt-6 flex-1 px-4 sm:px-6"> {children} </div> </div> </DialogPanel> </TransitionChild> </div> </div> </div> </Dialog> </Transition> )}