Blurry load

1 files changed, 21 insertions, 0 deletions

diff --git a/client/src/components/BlurryLoadDiv.tsx b/client/src/components/BlurryLoadDiv.tsx
new file mode 100644
index 0000000..1dfe07e
--- /dev/null
+++ b/client/src/components/BlurryLoadDiv.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ClassAttributes, ImgHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { useBlurryLoad } from '../useBlurryLoad.ts';
+import { useMediaQuery } from '@mui/material';
+
+export const BlurryLoadDiv = (
+  props: JSX.IntrinsicAttributes &
+    ClassAttributes<HTMLImageElement> &
+    ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string }
+) => {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  let blurry = '';
+  if (!isMobile) {
+    useBlurryLoad();
+    blurry = 'blurry-load';
+  }
+  return (
+    <div alt="" {...props} className={`${blurry} ${props.className}`}></div>
+  );
+};