feat: initial customer case detail page

varianter · Oct 17, 2024 · d964172 · d964172
1 parent ccd2fe5
commit d964172
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 6 deletions.
diff --git a/src/app/(main)/[lang]/[...path]/page.tsx b/src/app/(main)/[lang]/[...path]/page.tsx
@@ -2,6 +2,7 @@ import { Metadata } from "next";
 
 import Compensations from "src/components/compensations/Compensations";
 import CompensationsPreview from "src/components/compensations/CompensationsPreview";
+import CustomerCase from "src/components/customerCases/customerCase/CustomerCase";
 import CustomerCases from "src/components/customerCases/CustomerCases";
 import CustomerCasesPreview from "src/components/customerCases/CustomerCasesPreview";
 import CustomErrorMessage from "src/components/customErrorMessage/CustomErrorMessage";
@@ -122,12 +123,7 @@ async function Page({ params }: Props) {
                 <CustomerCases customerCasesPage={queryResponse.data} />
               );
             case "customerCase":
-              return (
-                // TODO: implement customer case detail page
-                <pre style={{ background: "hotpink", marginTop: "8rem" }}>
-                  {JSON.stringify(pageData, null, 2)}
-                </pre>
-              );
+              return <CustomerCase customerCase={queryResponse.data} />;
             case "legalDocument":
               return isDraftMode ? (
                 <LegalPreview initialDocument={queryResponse} />

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -0,0 +1,91 @@
+import { SanitySharedImage } from "src/components/image/SanityImage";
+import { RichText } from "src/components/richText/RichText";
+import Text from "src/components/text/Text";
+import { CustomerCase as CustomerCaseDocument } from "studioShared/lib/interfaces/customerCases";
+
+import styles from "./customerCase.module.css";
+
+export interface CustomerCaseProps {
+  customerCase: CustomerCaseDocument;
+}
+
+export default function CustomerCase({ customerCase }: CustomerCaseProps) {
+  console.log(customerCase.image);
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.content}>
+        <Text type={"h1"} className={styles.mainTitle}>
+          {customerCase.basicTitle}
+        </Text>
+        <div className={styles.mainImageWrapper}>
+          <SanitySharedImage image={customerCase.image} />
+        </div>
+        <div className={styles.ingress}>
+          <Text type={"bodyLarge"}>{customerCase.description}</Text>
+          <div className={styles.projectInfo}>
+            <div className={styles.projectInfoItem}>
+              <Text>Kunde</Text>
+              <Text className={styles.projectInfoItemValue}>
+                {customerCase.projectInfo.customer}
+              </Text>
+            </div>
+            <div className={styles.projectInfoItem}>
+              <Text>Prosjekt</Text>
+              <Text className={styles.projectInfoItemValue}>
+                {customerCase.projectInfo.name}
+              </Text>
+            </div>
+            <div className={styles.projectInfoItem}>
+              <Text>Varighet</Text>
+              <Text className={styles.projectInfoItemValue}>
+                {customerCase.projectInfo.duration}
+              </Text>
+            </div>
+          </div>
+          <div className={styles.projectInfo}>
+            <div className={styles.projectInfoItem}>
+              <Text>Bransje</Text>
+              <Text className={styles.projectInfoItemValue}>
+                {customerCase.projectInfo.sector}
+              </Text>
+            </div>
+            <div className={styles.projectInfoItem}>
+              <Text>Leveranse</Text>
+              <Text className={styles.projectInfoItemValue}>
+                {customerCase.projectInfo.delivery}
+              </Text>
+            </div>
+            <div className={styles.projectInfoItem}>
+              <Text>Konsulenter</Text>
+              <Text className={styles.projectInfoItemValue}>
+                {customerCase.projectInfo.consultants.join(", ")}
+              </Text>
+            </div>
+          </div>
+        </div>
+        <div className={styles.sectionsWrapper}>
+          {customerCase.sections.map((section) => (
+            <div key={section._key}>
+              {section._type === "richTextBlock" ? (
+                <RichText value={section.richText} />
+              ) : (
+                <div className={styles.imageBlockWrapper}>
+                  {section.images.map((image) => (
+                    <div
+                      key={image._key}
+                      className={styles.imageBlockImageWrapper}
+                    >
+                      <div className={styles.imageBlockImageContent}>
+                        <SanitySharedImage image={image} />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
@@ -0,0 +1,70 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 8rem 0;
+  align-items: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  max-width: 1200px;
+  gap: 2rem;
+  padding: 1rem;
+}
+
+.mainTitle {
+  font-weight: 600;
+}
+
+.mainImageWrapper img {
+  border-radius: 12px;
+}
+
+.ingress {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.projectInfo {
+  display: flex;
+  gap: 1rem;
+  flex-grow: 1;
+}
+
+.projectInfoItem {
+  display: flex;
+  gap: 1rem;
+}
+
+.projectInfoItemValue {
+  font-weight: 300;
+  white-space: nowrap;
+}
+
+.sectionsWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.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;
+}
diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts
@@ -1,5 +1,8 @@
 import { IImage } from "studio/lib/interfaces/media";
 
+import { ImageBlock } from "./imageBlock";
+import { RichTextBlock } from "./richTextBlock";
+
 export interface CustomerCaseProjectInfo {
   customer: string;
   name: string;
@@ -17,7 +20,10 @@ export interface CustomerCaseBase {
   description: string;
 }
 
+export type CustomerCaseSections = (RichTextBlock | ImageBlock)[];
+
 export interface CustomerCase extends CustomerCaseBase {
   image: IImage;
   projectInfo: CustomerCaseProjectInfo;
+  sections: CustomerCaseSections;
 }
diff --git a/studioShared/lib/interfaces/imageBlock.ts b/studioShared/lib/interfaces/imageBlock.ts
@@ -0,0 +1,7 @@
+import { IImage } from "studio/lib/interfaces/media";
+
+export interface ImageBlock {
+  _key: string;
+  _type: "imageBlock";
+  images: IImage[];
+}
diff --git a/studioShared/lib/interfaces/richTextBlock.ts b/studioShared/lib/interfaces/richTextBlock.ts
@@ -0,0 +1,7 @@
+import { PortableTextBlock } from "sanity";
+
+export interface RichTextBlock {
+  _key: string;
+  _type: "richTextBlock";
+  richText: PortableTextBlock[];
+}
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
@@ -19,6 +19,9 @@ export const CUSTOMER_CASES_QUERY = groq`
 
 const INTERNATIONALIZED_IMAGE_FRAGMENT = groq`
   asset,
+  "metadata": asset -> metadata {
+    lqip
+  },
   "alt": ${translatedFieldFragment("alt")}
 `;
 
@@ -37,6 +40,7 @@ export const CUSTOMER_CASE_QUERY = groq`
       consultants
     },
     "sections": sections[] {
+      _key,
       _type,
       _type == "richTextBlock" => {
         "richText": ${translatedFieldFragment("richText")},