v3 - images block as row

src/components/customerCases/customerCase/CustomerCase.tsx

@@ -3,15 +3,35 @@ import { RichText } from "src/components/richText/RichText";
 import Text from "src/components/text/Text";
 import {
   CustomerCase as CustomerCaseDocument,
+  CustomerCaseSection,
   Delivery,
 } from "studioShared/lib/interfaces/customerCases";
 
 import styles from "./customerCase.module.css";
+import ImageSection from "./sections/image/ImageSection";
 
 export interface CustomerCaseProps {
   customerCase: CustomerCaseDocument;
 }
 
+function renderCustomerCaseSection(section: CustomerCaseSection) {
+  switch (section._type) {
+    case "richTextBlock":
+      return <RichText value={section.richText} />;
+    case "quoteBlock":
+      return (
+        section.quote && (
+          <div>
+            <Text>{section.quote}</Text>
+            {section.author && <Text>- {section.author}</Text>}
+          </div>
+        )
+      );
+    case "imageBlock":
+      return <ImageSection section={section} />;
+  }
+}
+
 export default function CustomerCase({ customerCase }: CustomerCaseProps) {
   return (
     <div className={styles.wrapper}>
@@ -102,31 +122,7 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
         </div>
         <div className={styles.sectionsWrapper}>
           {customerCase.sections.map((section) => (
-            <div key={section._key}>
-              {section._type === "richTextBlock" ? (
-                <RichText value={section.richText} />
-              ) : section._type === "quoteBlock" ? (
-                section.quote && (
-                  <div>
-                    <Text>{section.quote}</Text>
-                    {section.author && <Text>- {section.author}</Text>}
-                  </div>
-                )
-              ) : (
-                <div className={styles.imageBlockWrapper}>
-                  {section.images?.map((image) => (
-                    <div
-                      key={image._key ?? `${section._key}-${image.alt}`}
-                      className={styles.imageBlockImageWrapper}
-                    >
-                      <div className={styles.imageBlockImageContent}>
-                        <SanitySharedImage image={image} />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
+            <div key={section._key}>{renderCustomerCaseSection(section)}</div>
           ))}
         </div>
       </div>

src/components/customerCases/customerCase/customerCase.module.css

@@ -10,9 +10,15 @@
 }
 
 .content {
+  width: 100%;
   display: flex;
   flex-direction: column;
   max-width: 1400px;
+  padding: 0 2rem;
+
+  @media (max-width: 1024px) {
+    padding: 0 1rem;
+  }
 }
 
 .mainTitle {
@@ -103,23 +109,3 @@
   flex-direction: column;
   gap: 4.5rem;
 }
-
-.imageBlockWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.imageBlockImageWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.imageBlockImageContent {
-  max-width: 800px;
-}
-
-.imageBlockImageContent img {
-  border-radius: 12px;
-}

src/components/customerCases/customerCase/sections/image/ImageSection.tsx

@@ -0,0 +1,25 @@
+import { SanitySharedImage } from "src/components/image/SanityImage";
+import { ImageBlock } from "studioShared/lib/interfaces/imageBlock";
+
+import styles from "./imageSection.module.css";
+
+export interface ImageSectionProps {
+  section: ImageBlock;
+}
+
+export default function ImageSection({ section }: ImageSectionProps) {
+  return (
+    <div className={styles.wrapper}>
+      {section.images?.map((image) => (
+        <div
+          key={image._key ?? `${section._key}-${image.alt}`}
+          className={styles.imageWrapper}
+        >
+          <div className={styles.imageContent}>
+            <SanitySharedImage image={image} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/customerCases/customerCase/sections/image/imageSection.module.css

@@ -0,0 +1,26 @@
+.wrapper {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
+
+.imageWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.imageContent {
+  max-width: 800px;
+  height: 100%;
+}
+
+.imageContent img {
+  border-radius: 12px;
+  object-fit: cover;
+  height: 100% !important;
+}

studioShared/lib/interfaces/customerCases.ts

@@ -27,9 +27,9 @@ export interface CustomerCaseBase {
   image: IImage;
 }
 
-export type CustomerCaseSections = (RichTextBlock | ImageBlock | QuoteBlock)[];
+export type CustomerCaseSection = RichTextBlock | ImageBlock | QuoteBlock;
 
 export interface CustomerCase extends CustomerCaseBase {
   projectInfo: CustomerCaseProjectInfo;
-  sections: CustomerCaseSections;
+  sections: CustomerCaseSection[];
 }