Blurry load

1 files changed, 15 insertions, 0 deletions

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>
+  );
+};