Replaced empty text with picture

front/src/components/StoriesPreview.tsx

@@ -17,26 +17,41 @@ type StoriesPreviewProps = {
 }
 
 const StoriesPreview = ({ announcements, category }: StoriesPreviewProps) => (
-    announcements.map((ann, i) => (
+    announcements.length > 0 ? (
-        <li key={`${category}${i}`}>
+        announcements.map((ann, i) => (
+            <li key={`${category}${i}`}>
+                <Link to={'/?' + new URLSearchParams({
+                    ...URLEncodeFilters(composeUserCategoriesFilters[category]()),
+                    storyIndex: i.toString(),
+                }).toString()} className={styles.link}>
+                    {ann.src?.endsWith('mp4') ? (
+                        <video src={ann.src} className={styles.image} />
+                    ) : (
+                        <img
+                            src={ann.src || categoryGraphics[ann.category]}
+                            alt={'Изображение' + (ann.src ? 'предмета' : categoryNames[ann.category])}
+                            className={styles.image}
+                        />
+                    )}
+                    <p className={styles.title}>{ann.name}</p>
+                    <p className={styles.title}>{userCategoriesInfos[category](ann)}</p>
+                </Link>
+            </li>
+        ))
+    ) : (
+        <li>
             <Link to={'/?' + new URLSearchParams({
                 ...URLEncodeFilters(composeUserCategoriesFilters[category]()),
-                storyIndex: i.toString(),
+                storyIndex: '0',
             }).toString()} className={styles.link}>
-                {ann.src?.endsWith('mp4') ? (
+                <img
-                    <video src={ann.src} className={styles.image} />
+                    src='/static/empty.png'
-                ) : (
+                    alt='Здесь ничего нет'
-                    <img
+                    className={styles.image}
-                        src={ann.src || categoryGraphics[ann.category]}
+                />
-                        alt={'Изображение' + (ann.src ? 'предмета' : categoryNames[ann.category])}
-                        className={styles.image}
-                    />
-                )}
-                <p className={styles.title}>{ann.name}</p>
-                <p className={styles.title}>{userCategoriesInfos[category](ann)}</p>
             </Link>
         </li>
-    ))
+    )
 )
 
 function StoriesPreviewCarousel({ announcements, category }: StoriesPreviewProps) {
@@ -86,13 +101,10 @@ function StoriesPreviewCarousel({ announcements, category }: StoriesPreviewProps
             </Button>
         }
 
-        {announcements.length > 0 ? (
+        <ul className={styles.list} ref={ulElement}>
-            <ul className={styles.list} ref={ulElement}>
+            <StoriesPreview announcements={announcements} category={category} />
-                <StoriesPreview announcements={announcements} category={category} />
+        </ul>
-            </ul>
+
-        ) : (
-            <p>Здесь пока пусто</p>
-        )}
         {showScrollButtons.right &&
             <Button onClick={doScroll(true)} className={`${styles.scrollButton} ${styles.rightScrollButton}`}>
                 <img src={rightAngleIcon} alt='Показать ещё' />

front/src/pages/HomePage.tsx

@@ -36,7 +36,7 @@ function fallbackGenerateStories(announcements: UseFetchReturn<Announcement[]>)
     const stories = generateStories(announcements.data, announcements.refetch)
 
     if (stories.length === 0) {
-        return fallbackStory('Здесь пока пусто')
+        return [{ url: '/static/empty.png' }]
     }
 
     return stories

front/src/styles/StoriesPreview.module.css

@@ -22,14 +22,18 @@
     height: 25vh;
     object-fit: contain;
     border-radius: 12px;
-    margin-bottom: 5px;
+    margin-bottom: .5rem;
     max-width: inherit;
 }
 
 .title {
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-bottom: 5px;
+    margin-bottom: .5rem;
+}
+
+.title:last-child {
+    margin-bottom: 0;
 }
 
 .scrollButton {