Upload src\components\FormDrawer.tsx with huggingface_hub

src//components//FormDrawer.tsx

@@ -0,0 +1,78 @@
+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>
+  );
+}