Refactor modal to use headlessui Dialog

src/components/modal/modal.tsx

@@ -1,83 +1,67 @@
+import { Dialog, Transition } from "@headlessui/react";
 import { useToggle } from "@uidotdev/usehooks";
-import React from "react";
-
 import classNames from "classnames";
+import React, { Fragment } from "react";
 import { Icon, IconIdentifier } from "../icon";
-import { ModalComponents, ModalProps } from "./type";
+import { ModalProps } from "./type";
 
-export const Modal: React.FC<ModalProps> & ModalComponents = ({
+export const Modal: React.FC<ModalProps> = ({
   title,
   children,
   className,
-  size = "sm",
+  position = "top-right",
   ...rest
 }) => {
   // States.
   const [show, toggle] = useToggle(true);
 
   // Constants.
-  const customClassNames = classNames(
-    "relative my-6 mx-auto max-w-3xl",
-    className,
-    {
-      "w-3/12": size === "sm",
-      "w-6/12": size === "md",
-      "w-8/12": size === "lg",
-    }
-  );
+  const customClassNames = classNames("flex p-2", className, {
+    "items-center justify-center h-full": position === "center",
+    "justify-center": position === "top-center",
+    "justify-end": position === "top-right",
+  });
 
   return (
-    <>
-      {show && (
-        <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
+    <Transition appear show={show} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={() => {}}>
+        <div className="fixed inset-0 overflow-y-auto below-header">
           <div className={customClassNames} {...rest}>
-            <div className="flex flex-col bg-gray-800 border shadow-sm rounded-xl pointer-events-auto border-gray-700 shadow-gray-700/70">
-              {/* Header */}
-              <div className="flex justify-between items-center py-3 px-4 border-b border-gray-700">
-                <h3 className="font-bold  text-gray-50">{title}</h3>
+            <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"
+            >
+              <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-xl lex flex-col bg-gray-800 border pointer-events-auto border-gray-700 shadow-gray-700/70 shadow-xl transition-all">
+                {/* Header */}
+                <Dialog.Title className="flex justify-between items-center h-12 px-4 border-b border-gray-700">
+                  <h3 className="font-bold text-gray-50">{title}</h3>
 
-                <button
-                  type="button"
-                  className="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent  disabled:opacity-50 disabled:pointer-events-none text-white hover:bg-gray-700"
-                  onClick={() => toggle()}
-                >
-                  <Icon identifier={IconIdentifier.Close} className="size-6" />
-                </button>
-              </div>
+                  <button
+                    type="button"
+                    className="flex justify-center items-center size-7 rounded-full border-none outline-none text-white hover:bg-gray-700"
+                    onClick={() => toggle()}
+                  >
+                    <Icon
+                      identifier={IconIdentifier.Close}
+                      className="size-6"
+                    />
+                  </button>
+                </Dialog.Title>
 
-              {children}
-            </div>
+                {/* Body */}
+                <div className="p-4 overflow-y-auto text-gray-50">
+                  {children}
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
           </div>
         </div>
-      )}
-    </>
+      </Dialog>
+    </Transition>
   );
 };
-
-Modal.Body = React.forwardRef(({ children, className, ...rest }, ref) => {
-  // Constants.
-  const customClassNames = classNames(
-    "p-4 overflow-y-auto text-gray-50",
-    className
-  );
-
-  return (
-    <div ref={ref} className={customClassNames} {...rest}>
-      {children}
-    </div>
-  );
-});
-
-Modal.Footer = React.forwardRef(({ children, className, ...rest }, ref) => {
-  // Constants.
-  const customClassNames = classNames(
-    "flex justify-end items-center gap-x-2 py-3 px-4 border-t border-gray-700",
-    className
-  );
-
-  return (
-    <div ref={ref} className={customClassNames}>
-      {children}
-    </div>
-  );
-});

src/components/modal/type.ts

@@ -5,10 +5,5 @@ export type ModalBaseProps = HTMLProps<HTMLDivElement>;
 
 export type ModalProps = ModalBaseProps & {
   title: string;
-  size?: "sm" | "md" | "lg";
-};
-
-export type ModalComponents = {
-  Body: ForwardRef<HTMLDivElement, ModalBaseProps>;
-  Footer: ForwardRef<HTMLDivElement, ModalBaseProps>;
+  position?: "center" | "top-center" | "top-right";
 };

src/map-container/helpers.ts

@@ -33,7 +33,7 @@ export const setupMapControls = (map: Map) => {
     "bottom-right"
   );
 
-  map.addControl(new FullscreenControl({}), "top-right");
+  map.addControl(new FullscreenControl({}), "bottom-right");
 
   map.addControl(new ScaleControl({}), "bottom-left");
 };