add: menu filter modal

src/components/overlays/BlurredOverlayContainer.tsx

@@ -7,7 +7,7 @@ type Props = {
   bgOpacity?: string
   changeDelay?: string
   effectdelay?: string
-} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 
 const BlurredOverlayContainer = ({
   visible = true,
@@ -15,6 +15,7 @@ const BlurredOverlayContainer = ({
   changeDelay = '0',
   effectdelay = '0',
   children,
+  onClick,
   ...props
 }: Props) => {
   const [loaded, setLoaded] = useState(visible)
@@ -35,11 +36,11 @@ const BlurredOverlayContainer = ({
     visible || loaded ? 'z-50' : !visible && !loaded ? '-z-50' : 'z-0'
 
   return (
-    <button
+    <div
       data-visible={visible}
       data-loaded={loaded}
       className={props.className + `
-        absolute inset-0 flex items-center justify-center h-dvh w-full
+        fixed inset-0 flex items-center justify-center h-dvh w-full
         backdrop-blur-sm 
         opacity-0 transition-opacity duration-300 ease-in-out delay-${effectdelay}
         ${zClass}
@@ -47,8 +48,9 @@ const BlurredOverlayContainer = ({
         style={{ backgroundColor: `rgba(0, 0, 0, ${+bgOpacity / 100})` }}
       {...props}
     >
+      <div className='w-full h-dvh overflow-hidden' onClick={onClick}></div>
       {children}
-    </button>
+    </div>
   )
 }