feat(gallery): Добавить для мобильной версии заголовок с датой отправки + отступ между медиа

.changeset/plenty-maps-build.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-gallery': minor
+---
+
+Для мобильной версии добавлен заголовок и дата отправки + отступ между медиа

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),

packages/gallery/src/components/info-bar/Component.tsx

@@ -7,13 +7,16 @@ 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 = () => {
     const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo } =
         useContext(GalleryContext);
 
     const image = getCurrentImage();
+    const createdAt = formatDate(image?.createdAt ?? '');
 
     const handleMuteVideo = useCallback(() => {
         if (image) {
@@ -37,22 +40,34 @@ export const InfoBar = () => {
             ) : (
                 <Buttons.Play onClick={handlePlayVideo} />
             )}
-            <TypographyText
-                className={styles.description}
-                tag='div'
-                view='component-primary'
-                color='static-primary-light'
-            >
-                {image?.name}
-            </TypographyText>
+            <div className={styles.infoBlock}>
+                <TypographyText
+                    className={styles.description}
+                    tag='div'
+                    view='component-primary'
+                    color='static-primary-light'
+                >
+                    {image?.name}
+                </TypographyText>
+                {image?.createdAt && (
+                    <TypographyText
+                        className={styles.description}
+                        tag='div'
+                        view='primary-small'
+                        color='secondary-inverted'
+                    >
+                        {createdAt}
+                    </TypographyText>
+                )}
+            </div>
             {mutedVideo ? (
                 <Buttons.UnmuteVideo onClick={handleMuteVideo} />
             ) : (
                 <Buttons.MuteVideo onClick={handleMuteVideo} />
             )}
         </section>
     ) : (
-        <section className={styles.infoWrapper}>
+        <section className={cn(styles.infoWrapper, styles.infoBlock)}>
             <TypographyText
                 className={styles.description}
                 tag='div'
@@ -61,6 +76,16 @@ export const InfoBar = () => {
             >
                 {image?.name}
             </TypographyText>
+            {image?.createdAt && (
+                <TypographyText
+                    className={styles.description}
+                    tag='div'
+                    view='primary-small'
+                    color='secondary-inverted'
+                >
+                    {createdAt}
+                </TypographyText>
+            )}
         </section>
     );
 };

packages/gallery/src/components/info-bar/index.module.css

@@ -18,3 +18,8 @@
         justify-content: space-between;
     }
 }
+
+.infoBlock {
+    display: flex;
+    flex-direction: column;
+}

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

packages/gallery/src/docs/Component.stories.tsx

@@ -84,6 +84,7 @@ export const gallery: Story = {
                         {
                             name: 'Горизонтальное изображение.jpg',
                             src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMDAwIDUwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEwMDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNDU0Nzc4Ii8+Cjwvc3ZnPgo=',
+                            createdAt: '2026-01-22T11:47:30.189083270+0000',
                         },
                         {
                             name: 'Вертикальное изображение.jpg',
@@ -105,6 +106,7 @@ export const gallery: Story = {
                                 onClick: () => {},
                                 timeout: 2,
                             },
+                            createdAt: '2026-01-22T11:47:30.189083270+0000',
                         },
                         {
                             name: 'Битое изображение.jpg',

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',

packages/gallery/src/types.ts

@@ -16,6 +16,10 @@ export type GalleryImage = {
     alt?: string;
     canDownload?: boolean;
     canShare?: boolean;
+    /**
+     * дата создания
+     */
+    createdAt?: string;
     /**
      * Нижняя кнопка, есть только у видео
      */