From fab698d676d43a46b0fd5df592915ca12111dbcb Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Fri, 1 Nov 2024 14:10:11 -0700
Subject: Blurry load

---
 client/src/components/BlurryLoadDiv.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 client/src/components/BlurryLoadDiv.tsx

(limited to 'client/src/components/BlurryLoadDiv.tsx')

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>
+  );
+};
-- 
cgit v1.2.3