hotfix-onecard-swiper

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

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;