From 130f9108150abcb1e728cc080ace6e0799117bad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=BA=D0=B8=D0=BC=D0=B5=D0=BD=D0=BA=D0=BE=20=D0=9A?= =?UTF-8?q?=D0=BE=D0=BD=D1=81=D1=82=D0=B0=D0=BD=D1=82=D0=B8=D0=BD=20=D0=90?= =?UTF-8?q?=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=D0=BE=D0=B2?= =?UTF-8?q?=D0=B8=D1=87?= Date: Thu, 16 Apr 2026 13:08:16 +0300 Subject: [PATCH 1/3] feat(gallery): update swiperProps & added infoBlock --- .changeset/plenty-maps-build.md | 5 +++ .../src/components/image-viewer/component.tsx | 1 + .../src/components/info-bar/Component.tsx | 43 +++++++++++++++---- .../src/components/info-bar/index.module.css | 5 +++ .../src/components/info-bar/utils/index.ts | 5 +++ .../gallery/src/docs/Component.stories.tsx | 6 +++ packages/gallery/src/types.ts | 4 ++ 7 files changed, 60 insertions(+), 9 deletions(-) create mode 100644 .changeset/plenty-maps-build.md create mode 100644 packages/gallery/src/components/info-bar/utils/index.ts diff --git a/.changeset/plenty-maps-build.md b/.changeset/plenty-maps-build.md new file mode 100644 index 0000000000..f44969bd7d --- /dev/null +++ b/.changeset/plenty-maps-build.md @@ -0,0 +1,5 @@ +--- +'@alfalab/core-components-gallery': minor +--- + +Для мобильной версии добавлен заголовок и дата отправки + отступ между медиа diff --git a/packages/gallery/src/components/image-viewer/component.tsx b/packages/gallery/src/components/image-viewer/component.tsx index d684c66dd1..23908f9f19 100644 --- a/packages/gallery/src/components/image-viewer/component.tsx +++ b/packages/gallery/src/components/image-viewer/component.tsx @@ -66,6 +66,7 @@ export const ImageViewer: FC = () => { () => ({ slidesPerView: 1, effect: 'slide', + spaceBetween: 16, className: cn(styles.swiper, { [styles.hidden]: fullScreen && !isVideo(currentImage?.src), [styles.fullScreenVideo]: fullScreen && isVideo(currentImage?.src), diff --git a/packages/gallery/src/components/info-bar/Component.tsx b/packages/gallery/src/components/info-bar/Component.tsx index 081f2b3565..5de11797c5 100644 --- a/packages/gallery/src/components/info-bar/Component.tsx +++ b/packages/gallery/src/components/info-bar/Component.tsx @@ -7,6 +7,8 @@ import { GalleryContext } from '../../context'; import { isVideo } from '../../utils'; import * as Buttons from '../buttons'; +import { formatDate } from './utils'; + import styles from './index.module.css'; export const InfoBar = () => { @@ -14,6 +16,7 @@ export const InfoBar = () => { useContext(GalleryContext); const image = getCurrentImage(); + const createdAt = formatDate(image?.createdAt ?? ''); const handleMuteVideo = useCallback(() => { if (image) { @@ -37,14 +40,26 @@ export const InfoBar = () => { ) : ( )} - - {image?.name} - +
+ + {image?.name} + + {image?.createdAt && ( + + {createdAt} + + )} +
{mutedVideo ? ( ) : ( @@ -52,7 +67,7 @@ export const InfoBar = () => { )} ) : ( -
+
{ > {image?.name} + {image?.createdAt && ( + + {createdAt} + + )}
); }; diff --git a/packages/gallery/src/components/info-bar/index.module.css b/packages/gallery/src/components/info-bar/index.module.css index 30aa22ff56..bd392ec738 100644 --- a/packages/gallery/src/components/info-bar/index.module.css +++ b/packages/gallery/src/components/info-bar/index.module.css @@ -18,3 +18,8 @@ justify-content: space-between; } } + +.infoBlock { + display: flex; + flex-direction: column; +} diff --git a/packages/gallery/src/components/info-bar/utils/index.ts b/packages/gallery/src/components/info-bar/utils/index.ts new file mode 100644 index 0000000000..06863706df --- /dev/null +++ b/packages/gallery/src/components/info-bar/utils/index.ts @@ -0,0 +1,5 @@ +export const formatDate = (isoString: string) => { + const date = new Date(isoString); + + return date.toLocaleDateString('ru-RU'); +}; diff --git a/packages/gallery/src/docs/Component.stories.tsx b/packages/gallery/src/docs/Component.stories.tsx index de954b98f2..b3ffd8eb8f 100644 --- a/packages/gallery/src/docs/Component.stories.tsx +++ b/packages/gallery/src/docs/Component.stories.tsx @@ -81,6 +81,11 @@ export const gallery: Story = { setOpenMultiple(false); }} images={[ + { + name: 'Горизонтальное изображение.jpg', + src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMDAwIDUwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEwMDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNDU0Nzc4Ii8+Cjwvc3ZnPgo=', + createdAt: '2026-01-22T11:47:30.189083270+0000', + }, { name: 'Горизонтальное изображение.jpg', src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMDAwIDUwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEwMDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNDU0Nzc4Ii8+Cjwvc3ZnPgo=', @@ -105,6 +110,7 @@ export const gallery: Story = { onClick: () => {}, timeout: 2, }, + createdAt: '2026-01-22T11:47:30.189083270+0000', }, { name: 'Битое изображение.jpg', diff --git a/packages/gallery/src/types.ts b/packages/gallery/src/types.ts index 6d847214be..f858bd3e65 100644 --- a/packages/gallery/src/types.ts +++ b/packages/gallery/src/types.ts @@ -16,6 +16,10 @@ export type GalleryImage = { alt?: string; canDownload?: boolean; canShare?: boolean; + /** + * дата создания + */ + createdAt?: string; /** * Нижняя кнопка, есть только у видео */ From 712fe08addd2f16f06a1ed2533a8b65ffaf4ac6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=BA=D0=B8=D0=BC=D0=B5=D0=BD=D0=BA=D0=BE=20=D0=9A?= =?UTF-8?q?=D0=BE=D0=BD=D1=81=D1=82=D0=B0=D0=BD=D1=82=D0=B8=D0=BD=20=D0=90?= =?UTF-8?q?=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=D0=BE=D0=B2?= =?UTF-8?q?=D0=B8=D1=87?= Date: Thu, 16 Apr 2026 13:33:13 +0300 Subject: [PATCH 2/3] feat(gallery): update stories --- packages/gallery/src/docs/Component.stories.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/gallery/src/docs/Component.stories.tsx b/packages/gallery/src/docs/Component.stories.tsx index b3ffd8eb8f..e37629d387 100644 --- a/packages/gallery/src/docs/Component.stories.tsx +++ b/packages/gallery/src/docs/Component.stories.tsx @@ -86,10 +86,6 @@ export const gallery: Story = { src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMDAwIDUwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEwMDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNDU0Nzc4Ii8+Cjwvc3ZnPgo=', createdAt: '2026-01-22T11:47:30.189083270+0000', }, - { - name: 'Горизонтальное изображение.jpg', - src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMDAwIDUwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEwMDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNDU0Nzc4Ii8+Cjwvc3ZnPgo=', - }, { name: 'Вертикальное изображение.jpg', src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjEwMDAiIHZpZXdCb3g9IjAgMCA1MDAgMTAwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSIxMDAwIiBmaWxsPSIjNDU0Nzc4Ii8+Cjwvc3ZnPgo=', From 8615f047995428307e53282a03882768a4cab2c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=BA=D0=B8=D0=BC=D0=B5=D0=BD=D0=BA=D0=BE=20=D0=9A?= =?UTF-8?q?=D0=BE=D0=BD=D1=81=D1=82=D0=B0=D0=BD=D1=82=D0=B8=D0=BD=20=D0=90?= =?UTF-8?q?=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=D0=BE=D0=B2?= =?UTF-8?q?=D0=B8=D1=87?= Date: Thu, 16 Apr 2026 15:03:26 +0300 Subject: [PATCH 3/3] feat(gallery): update mock media --- packages/gallery/src/docs/description.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/gallery/src/docs/description.mdx b/packages/gallery/src/docs/description.mdx index bc9c9de818..8da38025e8 100644 --- a/packages/gallery/src/docs/description.mdx +++ b/packages/gallery/src/docs/description.mdx @@ -5,6 +5,8 @@ const images = [ { name: 'Вертикальное изображение', src: './images/gallery_1.jpg', + createdAt: '2026-01-22T11:47:30.189083270+0000', + }, { name: 'Горизонтальное изображение', @@ -21,6 +23,7 @@ const images = [ { name: 'Alfa promo.m3u8', src: 'https://alfavideo.servicecdn.ru/videos/101064_31s0hnwZaamhbwE/master.m3u8', + createdAt: '2026-01-22T11:47:30.189083270+0000', }, { name: 'Битое изображение.jpg',