Add themeStyle option to modal

apideck-libraries · Dec 21, 2023 · 87c628d · 87c628d
1 parent 17f6934
commit 87c628d
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -12,6 +12,7 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement> {
   preventBackdropClick?: boolean
   backdropClassName?: string
   style?: CSSProperties
+  themeStyle?: 1 | 2 | 3
 }
 
 export const Modal = React.forwardRef<HTMLDivElement, Props>(function Modal(props, ref) {
@@ -23,6 +24,7 @@ export const Modal = React.forwardRef<HTMLDivElement, Props>(function Modal(prop
     preventBackdropClick,
     className = '',
     backdropClassName = '',
+    themeStyle = 1,
     style = {},
     ...other
   } = props
@@ -62,7 +64,16 @@ export const Modal = React.forwardRef<HTMLDivElement, Props>(function Modal(prop
             leave="transition ease-in duration-150"
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0  transform translate-y-1/4 scale-95"
-            className={`relative w-full p-5 overflow-y-auto bg-white dark:bg-gray-800 dark:text-gray-400 shadow-lg rounded-t-lg sm:p-6 no-scrollbar sm:rounded-lg sm:m-4 sm:max-w-xl ${className}`}
+            className={classNames(
+              'relative w-full p-5 overflow-y-auto bg-white dark:text-gray-400 rounded-t-lg sm:p-6 no-scrollbar sm:rounded-lg sm:m-4 sm:max-w-xl',
+              className,
+              {
+                'dark:bg-gray-800 shadow-lg': themeStyle === 1,
+                'dark:bg-gray-900 shadow-lg': themeStyle === 2,
+                'ring-1 ring-black ring-opacity-5 dark:bg-gray-900/90 dark:backdrop-blur dark:ring-gray-800/70':
+                  themeStyle === 3
+              }
+            )}
             style={{ maxHeight: '90%', ...style }}
             ref={ref}
             role="dialog"