Replaced empty text with picture

front/src/components/StoriesPreview.tsx

@@ -17,6 +17,7 @@ type StoriesPreviewProps = {
 }
 
 const StoriesPreview = ({ announcements, category }: StoriesPreviewProps) => (
+    announcements.length > 0 ? (
         announcements.map((ann, i) => (
             <li key={`${category}${i}`}>
                 <Link to={'/?' + new URLSearchParams({
@@ -37,6 +38,20 @@ const StoriesPreview = ({ announcements, category }: StoriesPreviewProps) => (
                 </Link>
             </li>
         ))
+    ) : (
+        <li>
+            <Link to={'/?' + new URLSearchParams({
+                ...URLEncodeFilters(composeUserCategoriesFilters[category]()),
+                storyIndex: '0',
+            }).toString()} className={styles.link}>
+                <img
+                    src='/static/empty.png'
+                    alt='Здесь ничего нет'
+                    className={styles.image}
+                />
+            </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}>
             <StoriesPreview announcements={announcements} category={category} />
         </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 {