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/BlurryLoadImg.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 client/src/components/BlurryLoadImg.tsx

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

diff --git a/client/src/components/BlurryLoadImg.tsx b/client/src/components/BlurryLoadImg.tsx
new file mode 100644
index 0000000..c28aa45
--- /dev/null
+++ b/client/src/components/BlurryLoadImg.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { ClassAttributes, ImgHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { useBlurryLoad } from '../useBlurryLoad.ts';
+
+export const BlurryLoadImg = (
+  props: JSX.IntrinsicAttributes &
+    ClassAttributes<HTMLImageElement> &
+    ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string }
+) => {
+  useBlurryLoad();
+  return (
+    <img alt="" {...props} className={`blurry-load ${props.className}`}></img>
+  );
+};
-- 
cgit v1.2.3