add: menu filter modal

src/components/icons/CloseIcon.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface CloseIconProps {
+  className?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  size?: number;
+}
+
+const CloseIcon: React.FC<CloseIconProps> = ({
+  className = '',
+  stroke = '#8C90A3',
+  strokeWidth = 1.5,
+  size = 20,
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 15L15 5"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15 15L5 5"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CloseIcon;

src/components/menu/Menu.tsx

@@ -76,8 +76,7 @@ function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState
 
     return (
         <div className='w-full h-dvh'>
-            <BlurredOverlayContainer bgOpacity='40' visible={menuStateMemo} changeDelay='300'>
-                <div className='w-full h-dvh overflow-hidden' onClick={toggleMenuState}></div>
+            <BlurredOverlayContainer bgOpacity='40' visible={menuStateMemo} onClick={toggleMenuState} changeDelay='300'>
                 <div
                     data-isvisible={menuStateMemo}
                     onClick={(e) => { e.stopPropagation(); }}

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>
   )
 }