remove text component from sanity image and add it those places where…

… we want figure description
varianter · Dec 12, 2024 · 9dc4450 · 9dc4450
1 parent 9996dcd
commit 9dc4450
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 44 deletions.
diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -44,10 +44,12 @@ export default async function CustomerCase({
           />
         </div>
         <div className={styles.mainImageWrapper}>
-          <SanitySharedImage
-            image={customerCase.image}
-            showFigureDescription={true}
-          />
+          <SanitySharedImage image={customerCase.image} />
+          {customerCase.image.figureDescription && (
+            <Text type="imageLabel">
+              {customerCase.image.figureDescription}
+            </Text>
+          )}
         </div>
         <div className={styles.sectionsWrapper}>
           {customerCase.sections.map((section) => (

diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
@@ -40,7 +40,7 @@
   height: 36.5rem;
   overflow: hidden;
   padding-top: 1.5rem;
-  padding-bottom: 2rem;
+  padding-bottom: var(--padding-xl);
 }
 
 .mainImageWrapper img {

diff --git a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
@@ -1,4 +1,5 @@
 import { SanitySharedImage } from "src/components/image/SanityImage";
+import Text from "src/components/text/Text";
 import { ImageBlock } from "studioShared/lib/interfaces/imageBlock";
 
 import styles from "./imageSection.module.css";
@@ -15,6 +16,9 @@ export default function ImageSection({ section }: ImageSectionProps) {
       >
         <div className={styles.imageContent}>
           <SanitySharedImage image={section.image} />
+          {section.image.figureDescription && (
+            <Text type="imageLabel">{section.image.figureDescription}</Text>
+          )}
         </div>
       </div>
     </div>

diff --git a/src/components/image/SanityImage.tsx b/src/components/image/SanityImage.tsx
@@ -5,7 +5,6 @@ import Image from "next/image";
 import { UseNextSanityImageProps, useNextSanityImage } from "next-sanity-image";
 import { useEffect, useState } from "react";
 
-import Text from "src/components/text/Text";
 import { client } from "studio/lib/client";
 import { IImage } from "studio/lib/interfaces/media";
 import { sharedClient } from "studioShared/lib/client";
@@ -41,7 +40,6 @@ const SanityAssetImage = ({
   image,
   imageProps,
   objectFit = "cover",
-  showFigureDescription,
 }: {
   image: IImage;
   imageProps?: UseNextSanityImageProps;
@@ -55,28 +53,23 @@ const SanityAssetImage = ({
     return null;
   }
   return (
-    <div>
-      <Image
-        alt={image?.alt || ""}
-        {...imageProps}
-        width={imageProps.width}
-        height={imageProps.height}
-        blurDataURL={image.metadata?.lqip}
-        style={
-          objectFit === "none"
-            ? {}
-            : {
-                objectFit: "cover",
-                objectPosition,
-                maxWidth: "100%",
-                maxHeight: "100%",
-              }
-        }
-      />
-      {showFigureDescription && (
-        <Text type="imageLabel"> {image.figureDescription}</Text>
-      )}
-    </div>
+    <Image
+      alt={image?.alt || ""}
+      {...imageProps}
+      width={imageProps.width}
+      height={imageProps.height}
+      blurDataURL={image.metadata?.lqip}
+      style={
+        objectFit === "none"
+          ? {}
+          : {
+              objectFit: "cover",
+              objectPosition,
+              maxWidth: "100%",
+              maxHeight: "100%",
+            }
+      }
+    />
   );
 };
 
@@ -85,21 +78,9 @@ export function SanityStudioImage({ image }: { image: IImage }) {
   return <SanityAssetImage image={image} imageProps={imageProps} />;
 }
 
-export function SanitySharedImage({
-  image,
-  showFigureDescription,
-}: {
-  image: IImage;
-  showFigureDescription?: boolean;
-}) {
+export function SanitySharedImage({ image }: { image: IImage }) {
   const imageProps = useNextSanityImage(sharedClient, image);
-  return (
-    <SanityAssetImage
-      image={image}
-      imageProps={imageProps}
-      showFigureDescription={showFigureDescription}
-    />
-  );
+  return <SanityAssetImage image={image} imageProps={imageProps} />;
 }
 
 function SanityGlobalImage({

diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
@@ -190,5 +190,5 @@
   font-weight: 400;
   line-height: 150%;
   letter-spacing: 0.05rem;
-  padding: 0rem 9.25rem 0rem 4rem;
+  padding: 0rem 0.5rem;
 }