feat: add side menu

src/components/overlays/BlurredOverlayContainer.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import PingAnimation from './animations/PingAnimation';
+
+type Props = {
+  visible?: boolean;
+  bgOpacity?: number;
+  delay?: number;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+
+const BlurredOverlayContainer = ({ visible = true, bgOpacity = 30, delay = 0, children = <PingAnimation /> }: Props) => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    // Trigger fade-in after mount
+    const timeout = setTimeout(() => setLoaded(visible), 300);
+    return () => clearTimeout(timeout);
+  }, [visible]);
+
+  return (
+    <div
+      data-visible={visible}
+      data-loaded={loaded}
+      className={`absolute inset-0 flex items-center justify-center
+                 backdrop-blur-sm bg-black/${bgOpacity}
+                 opacity-0 transition-opacity duration-300 ease-in-out delay-${delay}
+                 data-[loaded=false]:-z-50
+                 data-[visible=true]:z-50
+                 data-[visible=true]:opacity-100`}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default BlurredOverlayContainer