From 52ef17dc6de163bbda4d9cf7413a1d7a448f2031 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Tue, 7 May 2024 00:51:07 +0300
Subject: [PATCH] hotfix-onecard-swiper

---
 .../_shared/SolidSwiper/ArticleCardSwiper.tsx | 24 +++++++++++++++++--
 .../_shared/SolidSwiper/Swiper.module.scss    | 14 ++++++++++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
index e8f76d6a..35105dca 100644
--- a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
@@ -28,12 +28,32 @@ export const ArticleCardSwiper = (props: Props) => {
 
   return (
     <ShowOnlyOnClient>
-      <div class={clsx(styles.Swiper, styles.articleMode, styles.ArticleCardSwiper)}>
+      <div
+        class={clsx({
+          [styles.Swiper]: props.slides.length > 1,
+          [styles.articleMode]: true,
+          [styles.ArticleCardSwiper]: props.slides.length > 1,
+          [styles.unswiped]: props.slides.length === 1,
+        })}
+      >
         <Show when={props.title}>
           <h2 class={styles.sliderTitle}>{props.title}</h2>
         </Show>
         <div class={styles.container}>
-          <Show when={props.slides.length > 0}>
+          <Show
+            when={props.slides.length > 1}
+            fallback={
+              <ArticleCard
+                article={props.slides[0]}
+                settings={{
+                  isFloorImportant: true,
+                  isWithCover: true,
+                  nodate: true,
+                }}
+                desktopCoverSize="L"
+              />
+            }
+          >
             <div class={styles.holder}>
               <swiper-container
                 ref={(el) => (mainSwipeRef.current = el)}
diff --git a/src/components/_shared/SolidSwiper/Swiper.module.scss b/src/components/_shared/SolidSwiper/Swiper.module.scss
index f3f182e8..78d205e2 100644
--- a/src/components/_shared/SolidSwiper/Swiper.module.scss
+++ b/src/components/_shared/SolidSwiper/Swiper.module.scss
@@ -8,6 +8,18 @@
   }
 }
 
+.unswiped {
+  width: 100%;
+  margin: 2rem 0;
+  margin-bottom: 6rem;
+  padding-bottom: 2rem;
+  display: block;
+
+  h2 {
+    text-align: center;
+  }
+}
+
 .Swiper {
   display: block;
   margin: 2rem 0;
@@ -57,7 +69,7 @@
         margin: 0;
         position: relative;
 
-        & > swiper-container {
+        &>swiper-container {
           display: flex;
           flex-direction: row;
           gap: 10px;