Add reusable component

2024-01-31 04:18:12 +03:00
parent c3b5d50313
commit cc87ba3859
16 changed files with 512 additions and 5 deletions
@@ -0,0 +1,67 @@
+import React, { FC, useCallback, useState } from 'react';
+import { BlurhashCanvas } from 'react-blurhash';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
+const imageStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 0
+};
+
+interface ImageProps {
+    imgUrl: string;
+    blurhash?: string;
+    containImage: boolean;
+}
+
+const Image: FC<ImageProps> = ({
+    imgUrl,
+    blurhash,
+    containImage
+}) => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [isLoadStarted, setIsLoadStarted] = useState(false);
+    const handleLoad = useCallback(() => {
+        setIsLoaded(true);
+    }, []);
+
+    const handleLoadStarted = useCallback(() => {
+        setIsLoadStarted(true);
+    }, []);
+
+    return (
+        <div>
+            {!isLoaded && isLoadStarted && blurhash && (
+                <BlurhashCanvas
+                    hash={blurhash}
+                    width= {20}
+                    height={20}
+                    punch={1}
+                    style={{
+                        ...imageStyle,
+                        borderRadius: '0.2em',
+                        pointerEvents: 'none'
+                    }}
+                />
+            )}
+            <LazyLoadImage
+                key={imgUrl}
+                src={imgUrl}
+                style={{
+                    ...imageStyle,
+                    objectFit: containImage ? 'contain' : 'cover'
+                }}
+                onLoad={handleLoad}
+                beforeLoad={handleLoadStarted}
+            />
+
+        </div>
+    );
+};
+
+export default Image;