added srcsets to images for comments

src/components/comment/CommentContent/index.tsx

@@ -10,7 +10,6 @@ import React, {
 } from 'react';
 
 import classnames from 'classnames';
-import classNames from 'classnames';
 
 import { CommentForm } from '~/components/comment/CommentForm';
 import { Authorized } from '~/components/containers/Authorized';
@@ -23,6 +22,7 @@ import { IComment, IFile } from '~/types';
 import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
 import { append, assocPath, path, reduce } from '~/utils/ramda';
 
+import { CommentImageGrid } from '../CommentImageGrid';
 import { CommentMenu } from '../CommentMenu';
 
 import styles from './styles.module.scss';
@@ -130,23 +130,7 @@ const CommentContent: FC<IProps> = memo(
           <div className={classnames(styles.block, styles.block_image)}>
             {menu}
 
-            <div
+            <CommentImageGrid files={groupped.image} />
-              className={classNames(styles.images, {
-                [styles.multiple]: groupped.image.length > 1,
-              })}
-            >
-              {groupped.image.map((file, index) => (
-                <div
-                  key={file.id}
-                  onClick={() => onShowImageModal(groupped.image, index)}
-                >
-                  <img
-                    src={getURL(file, imagePresets['600'])}
-                    alt={file.name}
-                  />
-                </div>
-              ))}
-            </div>
 
             <div className={styles.date}>
               {getPrettyDate(comment.created_at)}

src/components/comment/CommentContent/styles.module.scss

@@ -117,35 +117,6 @@
   touch-action: none;
 }
 
-.images {
-  cursor: pointer;
-
-  img {
-    max-height: 400px;
-    border-radius: $radius;
-    max-width: 100%;
-  }
-
-  &.multiple {
-    img {
-      max-height: none;
-    }
-
-    // Desktop devices
-    @include flexbin(25vh, $flexbin-space);
-
-    // Tablet devices
-    @media (max-width: $flexbin-tablet-max) {
-      @include flexbin($flexbin-row-height-tablet, $flexbin-space-tablet);
-    }
-
-    // Phone devices
-    @media (max-width: $flexbin-phone-max) {
-      @include flexbin($flexbin-row-height-phone, $flexbin-space-phone);
-    }
-  }
-}
-
 .audios {
   & > div {
     height: $comment_height;

src/components/comment/CommentImageGrid/index.tsx

@@ -0,0 +1,46 @@
+import React, { FC, useMemo } from 'react';
+
+import classNames from 'classnames';
+import Image from 'next/future/image';
+import Gallery, { ImageWithSize } from 'react-easy-image-gallery';
+
+import { imagePresets } from '~/constants/urls';
+import { IFile } from '~/types';
+import { getURL } from '~/utils/dom';
+import { getFileSrcSet } from '~/utils/srcset';
+
+import styles from './styles.module.scss';
+
+interface CommentImageGridProps {
+  files: IFile[];
+}
+
+const singleSrcSet = '(max-width: 1024px) 40vw, 20vw';
+const multipleSrcSet = '(max-width: 1024px) 50vw, 20vw';
+
+const CommentImageGrid: FC<CommentImageGridProps> = ({ files }) => {
+  return (
+    <div
+      className={classNames(styles.images, {
+        [styles.multiple]: files.length > 1,
+      })}
+    >
+      {files.map((file, index) => (
+        <div
+          key={file.id}
+          // onClick={() => onShowImageModal(groupped.image, index)}
+        >
+          <img
+            srcSet={getFileSrcSet(file)}
+            src={getURL(file, imagePresets['300'])}
+            alt={file.name}
+            className={styles.image}
+            sizes={files.length > 1 ? singleSrcSet : multipleSrcSet}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export { CommentImageGrid };

src/components/comment/CommentImageGrid/styles.module.scss

@@ -0,0 +1,32 @@
+@import 'src/styles/variables';
+@import '~flexbin/flexbin';
+
+.images {
+  cursor: pointer;
+
+  &.multiple {
+    // Desktop devices
+    @include flexbin(25vh, $flexbin-space);
+
+    // Tablet devices
+    @media (max-width: $flexbin-tablet-max) {
+      @include flexbin($flexbin-row-height-tablet, $flexbin-space-tablet);
+    }
+
+    // Phone devices
+    @media (max-width: $flexbin-phone-max) {
+      @include flexbin($flexbin-row-height-phone, $flexbin-space-phone);
+    }
+  }
+}
+
+.image {
+  max-height: 400px;
+  border-radius: $radius;
+  max-width: 100%;
+
+  .multiple & {
+    max-height: 250px;
+    max-inline-size: 250px;
+  }
+}