WIP

src/components/generic/Blur.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+type DefaultDivProps = JSX.IntrinsicElements['div'];
+
+interface LocalBlurProps {
+  disableOnMd?: boolean;
+}
+
+export type BlurProps = LocalBlurProps & DefaultDivProps;
+
+export const Blur = ({
+  disableOnMd,
+  className,
+  onClick,
+  ...props
+}: BlurProps): JSX.Element => {
+  return (
+    <div
+      className={`absolute inset-0 z-10 w-full h-full transition-opacity ${
+        disableOnMd ? 'md:hidden' : 'test'
+      } ${className}`}
+      {...props}
+    >
+      <div
+        onClick={onClick}
+        className={`absolute inset-0 w-full h-full backdrop-filter backdrop-blur-sm ${
+          disableOnMd ? 'md:hidden' : 'test'
+        }`}
+        tabIndex={0}
+      ></div>
+    </div>
+  );
+};