WIP

src/components/generic/Modal.tsx

@@ -3,13 +3,21 @@ import type React from 'react';
 import { useAppSelector } from '@app/hooks/redux';
 import { Dialog } from '@headlessui/react';
 
-export interface ModalProps {
+type DefaultDivProps = JSX.IntrinsicElements['div'];
+
+export interface ModalProps extends DefaultDivProps {
   children: React.ReactNode;
   open: boolean;
   onClose: () => void;
 }
 
-export const Modal = ({ children, open, onClose }: ModalProps): JSX.Element => {
+export const Modal = ({
+  children,
+  open,
+  onClose,
+  className,
+  ...props
+}: ModalProps): JSX.Element => {
   const darkMode = useAppSelector((state) => state.app.darkMode);
   return (
     <>
@@ -27,7 +35,7 @@ export const Modal = ({ children, open, onClose }: ModalProps): JSX.Element => {
           >
             &#8203;
           </span>
-          <div className="inline-block w-full max-w-3xl align-middle">
+          <div className={`inline-block align-middle ${className}`} {...props}>
             {children}
           </div>
         </div>