feat(customerCases): initial customer cases landing page

varianter · Oct 18, 2024 · fd89176 · fd89176
1 parent d964172
commit fd89176
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 35 deletions.
diff --git a/src/components/customerCases/CustomerCases.tsx b/src/components/customerCases/CustomerCases.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 
+import { SanitySharedImage } from "src/components/image/SanityImage";
 import LinkButton from "src/components/linkButton/LinkButton";
 import Text from "src/components/text/Text";
 import { sharedCustomerCasesLink } from "src/components/utils/linkTypes";
@@ -28,27 +29,34 @@ const CustomerCases = async ({ customerCasesPage }: CustomerCasesProps) => {
 
   return (
     <div className={styles.wrapper}>
-      <Text type="h1"> {customerCasesPage.basicTitle} </Text>
-      {sharedCustomerCases && sharedCustomerCases.data.length > 0 ? (
-        sharedCustomerCases.data.map((customerCase) => (
-          <div key={customerCase._id}>
-            <Link href={`${customerCasesPage.slug}/${customerCase.slug}`}>
-              <Text type="h2">{customerCase.basicTitle}</Text>
-            </Link>
-            {customerCase.description && (
-              <Text>{customerCase.description}</Text>
-            )}
+      <div className={styles.content}>
+        <Text type="h1"> {customerCasesPage.basicTitle} </Text>
+        {sharedCustomerCases && sharedCustomerCases.data.length > 0 ? (
+          sharedCustomerCases.data.map((customerCase) => (
+            <div key={customerCase._id} className={styles.caseWrapper}>
+              <div className={styles.caseImageWrapper}>
+                <SanitySharedImage image={customerCase.image} />
+              </div>
+              <div>
+                <Link href={`${customerCasesPage.slug}/${customerCase.slug}`}>
+                  <Text type="h2">{customerCase.basicTitle}</Text>
+                </Link>
+                {customerCase.description && (
+                  <Text>{customerCase.description}</Text>
+                )}
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className={styles.section}>
+            <Text>
+              It looks like you haven&apos;t created any customer cases yet.
+              Please visit the shared studio to add some.
+            </Text>
+            <LinkButton link={sharedCustomerCasesLink} />
           </div>
-        ))
-      ) : (
-        <div className={styles.section}>
-          <Text>
-            It looks like you haven&apos;t created any customer cases yet.
-            Please visit the shared studio to add some.
-          </Text>
-          <LinkButton link={sharedCustomerCasesLink} />
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 };

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -10,7 +10,6 @@ export interface CustomerCaseProps {
 }
 
 export default function CustomerCase({ customerCase }: CustomerCaseProps) {
-  console.log(customerCase.image);
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>

diff --git a/src/components/customerCases/customerCases.module.css b/src/components/customerCases/customerCases.module.css
@@ -1,12 +1,34 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  padding: 10rem 5rem;
+  margin: 8rem 0;
+  align-items: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
   gap: 5rem;
+  max-width: 1200px;
+  padding: 1rem;
 }
 
 .section {
   display: flex;
   flex-direction: column;
   gap: 5rem;
 }
+
+.caseWrapper {
+  display: flex;
+  gap: 3rem;
+}
+
+.caseImageWrapper {
+  min-width: 20rem;
+  max-width: 20rem;
+}
+
+.caseImageWrapper img {
+  border-radius: 12px;
+}
diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts
@@ -18,12 +18,12 @@ export interface CustomerCaseBase {
   slug: string;
   basicTitle: string;
   description: string;
+  image: IImage;
 }
 
 export type CustomerCaseSections = (RichTextBlock | ImageBlock)[];
 
 export interface CustomerCase extends CustomerCaseBase {
-  image: IImage;
   projectInfo: CustomerCaseProjectInfo;
   sections: CustomerCaseSections;
 }
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
@@ -3,12 +3,23 @@ import { groq } from "next-sanity";
 import { LANGUAGE_FIELD_FRAGMENT } from "studio/lib/queries/i18n";
 import { translatedFieldFragment } from "studio/lib/queries/utils/i18n";
 
+const INTERNATIONALIZED_IMAGE_FRAGMENT = groq`
+  asset,
+  "metadata": asset -> metadata {
+    lqip
+  },
+  "alt": ${translatedFieldFragment("alt")}
+`;
+
 const CUSTOMER_CASE_BASE_FRAGMENT = groq`
   _id,
   ${LANGUAGE_FIELD_FRAGMENT},
   "slug": ${translatedFieldFragment("slug")},
   "basicTitle": ${translatedFieldFragment("basicTitle")},
-  "description": ${translatedFieldFragment("description")}
+  "description": ${translatedFieldFragment("description")},
+  "image": image {
+    ${INTERNATIONALIZED_IMAGE_FRAGMENT}
+  }
 `;
 
 export const CUSTOMER_CASES_QUERY = groq`
@@ -17,20 +28,9 @@ export const CUSTOMER_CASES_QUERY = groq`
   }
 `;
 
-const INTERNATIONALIZED_IMAGE_FRAGMENT = groq`
-  asset,
-  "metadata": asset -> metadata {
-    lqip
-  },
-  "alt": ${translatedFieldFragment("alt")}
-`;
-
 export const CUSTOMER_CASE_QUERY = groq`
   *[_type == "customerCase" && ${translatedFieldFragment("slug")} == $slug][0] {
     ${CUSTOMER_CASE_BASE_FRAGMENT},
-    "image": image {
-      ${INTERNATIONALIZED_IMAGE_FRAGMENT}
-    },
     "projectInfo": projectInfo {
       customer,
       "name": ${translatedFieldFragment("name")},