feat: adds option to have several links

varianter · Dec 2, 2024 · 0055bc1 · 0055bc1
1 parent 9898947
commit 0055bc1
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/src/components/sections/image-split/ImageSplit.tsx b/src/components/sections/image-split/ImageSplit.tsx
@@ -42,9 +42,16 @@ const ImageSplitComponent = ({ section }: ImageSplitProps) => {
           />
         )}
 
-        {section.link && (
+        {section.actions.length > 0 && (
           <div className={styles.textContainer__link}>
-            <LinkButton isSmall link={section.link} />
+            {section.actions.map((action, index) => (
+              <LinkButton
+                key={action._key}
+                type={index === 0 ? "primary" : "secondary"}
+                isSmall
+                link={action}
+              />
+            ))}
           </div>
         )}
       </div>

diff --git a/src/components/sections/image-split/image-split.module.css b/src/components/sections/image-split/image-split.module.css
@@ -21,6 +21,9 @@
 
 .textContainer__link {
   margin-top: 1.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
 .image {

diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts
@@ -74,7 +74,7 @@ export interface ImageSplitSection {
   basicTitle: string;
   imageExtended: ImageExtendedProps;
   richText?: PortableTextBlock[];
-  link?: ILink;
+  actions: ILink[];
 }
 
 export interface GridSection {

diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts
@@ -29,7 +29,7 @@ const SECTIONS_FRAGMENT = groq`
     },
     _type == "imageSplitSection" => {
       ...,
-      link {
+      actions[] {
         ...,
         ${TRANSLATED_LINK_FRAGMENT}
       }

diff --git a/studio/schemas/objects/sections/imagesplit.ts b/studio/schemas/objects/sections/imagesplit.ts
@@ -10,7 +10,17 @@ export const imageSplitSection = defineField({
   name: imageID,
   title: "Image Split",
   type: "object",
-  fields: [title, richText, imageExtended, link],
+  fields: [
+    title,
+    richText,
+    imageExtended,
+    {
+      name: "actions",
+      title: "Actions (links)",
+      type: "array",
+      of: [link],
+    },
+  ],
   preview: {
     select: {
       title: "basicTitle",
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ const SECTIONS_FRAGMENT = groq` @@
         },
         _type == "imageSplitSection" => {
           ...,
-          link {
+          actions[] {
             ...,
             ${TRANSLATED_LINK_FRAGMENT}
           }
@@ Expand Down @@