| import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react"; | |
| import { Fragment, ReactNode } from "react"; | |
| import { X } from "lucide-react"; | |
| interface FormDrawerProps { | |
| isOpen: boolean; | |
| onClose: () => void; | |
| title: string; | |
| subtitle?: string; | |
| children: ReactNode; | |
| maxWidth?: string; | |
| } | |
| export default function FormDrawer({ | |
| isOpen, | |
| onClose, | |
| title, | |
| subtitle, | |
| children, | |
| maxWidth = "max-w-xl", | |
| }: FormDrawerProps) { | |
| return ( | |
| <Transition show={isOpen} as={Fragment}> | |
| <Dialog as="div" className="relative z-50" 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-black/70 backdrop-blur-xs 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-400" | |
| enterFrom="translate-x-full" | |
| enterTo="translate-x-0" | |
| leave="transform transition ease-in-out duration-300 sm:duration-400" | |
| leaveFrom="translate-x-0" | |
| leaveTo="translate-x-full" | |
| > | |
| <DialogPanel className={`pointer-events-auto w-screen ${maxWidth}`}> | |
| <div className="flex h-full flex-col overflow-y-auto bg-zinc-950 border-l border-zinc-800 shadow-2xl"> | |
| <div className="px-6 py-5 border-b border-zinc-800 bg-zinc-900/50 flex items-center justify-between sticky top-0 z-10"> | |
| <div> | |
| <DialogTitle className="text-lg font-semibold text-zinc-100"> | |
| {title} | |
| </DialogTitle> | |
| {subtitle && ( | |
| <p className="text-xs text-zinc-400 mt-0.5">{subtitle}</p> | |
| )} | |
| </div> | |
| <button | |
| onClick={onClose} | |
| className="rounded-lg p-2 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 transition-colors" | |
| > | |
| <X className="w-5 h-5" /> | |
| </button> | |
| </div> | |
| <div className="flex-1 px-6 py-6 space-y-6">{children}</div> | |
| </div> | |
| </DialogPanel> | |
| </TransitionChild> | |
| </div> | |
| </div> | |
| </div> | |
| </Dialog> | |
| </Transition> | |
| ); | |
| } | |