1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-05-18 16:14:46 +07:00

added srcsets to images for comments

This commit is contained in:
Fedor Katurov 2022-12-08 15:35:35 +06:00
parent 02763fb8d4
commit f55665c981
4 changed files with 80 additions and 47 deletions
src/components/comment/CommentImageGrid

View file

@ -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 };

View file

@ -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;
}
}