image and title in sanity

varianter · Dec 11, 2024 · c669b01 · c669b01
1 parent 05f0807
commit c669b01
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 33 deletions.
diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx
@@ -24,47 +24,49 @@ const CustomerCaseList = ({
   customerCasePageSlug,
 }: CustomerCasesProps) => {
   const [selectedCustomerCase, setSelectedCustomerCase] =
-    useState<CustomerCaseEntry>(customerCases[0] || null);
+    useState<CustomerCaseEntry>(customerCases[0]);
 
   const deliveryNames = [
-    selectedCustomerCase.projectInfo.deliveries.projectManagement &&
+    selectedCustomerCase?.projectInfo.deliveries.projectManagement &&
       "Project Management",
-    selectedCustomerCase.projectInfo.deliveries.design && "Design",
-    selectedCustomerCase.projectInfo.deliveries.development && "Development",
+    selectedCustomerCase?.projectInfo.deliveries.design && "Design",
+    selectedCustomerCase?.projectInfo.deliveries.development && "Development",
   ].filter(Boolean);
 
   return (
-    <div className={styles.container}>
-      <div className={styles.wrapper}>
-        <div className={styles.info}>
-          <div className={styles.infoInnerMaxWidth}>
-            <TagRow
-              customerCases={customerCases}
-              selectedCustomerCase={selectedCustomerCase}
-              setSelectedCustomerCase={setSelectedCustomerCase}
-            />
-            <Link
-              className={styles.link}
-              href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`}
-            >
-              <CardInfo
+    selectedCustomerCase && (
+      <div className={styles.container}>
+        <div className={styles.wrapper}>
+          <div className={styles.info}>
+            <div className={styles.infoInnerMaxWidth}>
+              <TagRow
+                customerCases={customerCases}
                 selectedCustomerCase={selectedCustomerCase}
-                deliveryNames={deliveryNames}
+                setSelectedCustomerCase={setSelectedCustomerCase}
               />
-            </Link>
+              <Link
+                className={styles.link}
+                href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`}
+              >
+                <CardInfo
+                  selectedCustomerCase={selectedCustomerCase}
+                  deliveryNames={deliveryNames}
+                />
+              </Link>
+            </div>
           </div>
+          <Link
+            tabIndex={-1}
+            className={styles.imageWrapper}
+            href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`}
+          >
+            {selectedCustomerCase.image && (
+              <SanitySharedImage image={selectedCustomerCase.image} />
+            )}
+          </Link>
         </div>
-        <Link
-          tabIndex={-1}
-          className={styles.imageWrapper}
-          href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`}
-        >
-          {selectedCustomerCase.image && (
-            <SanitySharedImage image={selectedCustomerCase.image} />
-          )}
-        </Link>
       </div>
-    </div>
+    )
   );
 };
 export default CustomerCaseList;

diff --git a/src/components/sections/hero/Hero.tsx b/src/components/sections/hero/Hero.tsx
@@ -1,3 +1,4 @@
+import { SanityImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
 import { HeroSection } from "studio/lib/interfaces/pages";
 
@@ -16,7 +17,11 @@ export const Hero = ({ hero, isLanding = false }: HeroProps) => {
     <div className={styles.wrapper}>
       {isLanding ? (
         <div className={styles.secondary}>
+          <Text type="bodyBig"> {hero.title}</Text>
           <Text type="h1">{hero.description}</Text>
+          <div className={styles.img}>
+            <SanityImage image={hero.image} />
+          </div>
         </div>
       ) : (
         // If splashy segments are added to the hero section in the landing page, this serves as a great fallback option.

diff --git a/src/components/sections/hero/hero.module.css b/src/components/sections/hero/hero.module.css
@@ -24,6 +24,7 @@
   composes: shared;
   align-self: center;
   padding: var(--padding-xl) var(--padding-rem);
+  gap: var(--padding-rem); 
 
   @media (max-width: 834px) {
     padding: var(--padding-l) var(--padding-s);
@@ -34,6 +35,13 @@
   }
 }
 
+.img{
+  width: 100%;
+  max-width: 60rem;
+  justify-content: flex-end;
+  display: flex !important; 
+}
+
 .primary {
   composes: shared;
 }
diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts
@@ -10,7 +10,9 @@ import { ILink } from "./navigation";
 export interface HeroSection {
   _type: "hero";
   _key: string;
+  title: string;
   description: string;
+  image: IImage;
 }
 
 export interface LogoSaladSection {

diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts
@@ -8,6 +8,7 @@ const SECTIONS_FRAGMENT = groq`
     ...,
     _type == "hero" => {
       ...,
+      "title": ${translatedFieldFragment("title")},
       "description": ${translatedFieldFragment("description")},
     },
     _type == "article" => {

diff --git a/studio/schemas/objects/sections/hero.ts b/studio/schemas/objects/sections/hero.ts
@@ -9,6 +9,31 @@ export const hero = defineField({
   title: "Hero Section",
   type: "object",
   fields: [
+    {
+      name: "title",
+      title: "title",
+      type: "internationalizedArrayString",
+      validation: (rule) =>
+        rule.custom<{ value: string; _type: string; _key: string }[]>(
+          (value) => {
+            if (!value) return true;
+
+            const invalidItems = value.filter(
+              (item) =>
+                typeof item.value === "string" && item.value.length > 200,
+            );
+
+            if (invalidItems.length > 0) {
+              return invalidItems.map((item) => ({
+                message: "title cannot be more than 200 characters long.",
+                path: [{ _key: item._key }, "value"],
+              }));
+            }
+
+            return true;
+          },
+        ),
+    },
     {
       name: "description",
       title: "Description",
@@ -34,15 +59,23 @@ export const hero = defineField({
           },
         ),
     },
+    {
+      name: "image",
+      title: "Image",
+      type: "image",
+      options: {
+        hotspot: true,
+      },
+    },
   ],
   preview: {
     select: {
-      description: "description",
+      title: "title",
     },
     prepare(selection) {
-      const { description } = selection;
+      const { title } = selection;
       return {
-        title: allTranslation(description) ?? undefined,
+        title: allTranslation(title) ?? undefined,
         subtitle: "Hero Section",
       };
     },