Make entire block clickable

Add border radius and hover state
varianter · Dec 12, 2024 · eb96603 · eb96603
1 parent b7aeb7f
commit eb96603
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/src/components/sections/learning/Learning.tsx b/src/components/sections/learning/Learning.tsx
@@ -27,21 +27,21 @@ export default function Learning({ section }: LearningProps) {
         <div className={styles.image}>
           <SanityImage image={section.image} />
         </div>
-        <div className={styles.textContainer}>
-          <div className={styles.textContent}>
-            <Text type="labelLarge" className={styles.text}>
-              {section.articleTag}
-            </Text>
-            <Link href={section.articleLink}>
+        <Link href={section.articleLink}>
+          <div className={styles.textContainer}>
+            <div className={styles.textContent}>
+              <Text type="labelLarge" className={styles.text}>
+                {section.articleTag}
+              </Text>
               <Text type="h3" className={styles.text}>
                 {section.articleTitle}
               </Text>
-            </Link>
-            <Text type="bodyBig" className={styles.text}>
-              {section.articleSubtitle}
-            </Text>
+              <Text type="bodyBig" className={styles.text}>
+                {section.articleSubtitle}
+              </Text>
+            </div>
           </div>
-        </div>
+        </Link>
       </div>
     </div>
   );

diff --git a/src/components/sections/learning/learning.module.css b/src/components/sections/learning/learning.module.css
@@ -63,6 +63,12 @@
   gap: 0.75rem;
   background-color: var(--surface-blue);
   color: var(--text-primary-light);
+  border-radius: 6px;
+
+  &:hover {
+    background-color: var(--Blue-700);
+    border-radius: 24px;
+  }
 }
 
 .textContent {

diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts
@@ -120,9 +120,9 @@ const SECTIONS_FRAGMENT = groq`
       }
     },
     _type == "learningSection" => {
+      ...,
       "basicTitle": ${translatedFieldFragment("basicTitle")},
       "description": ${translatedFieldFragment("description")},
-      "articleLink": ${translatedFieldFragment("articleLink")},
       "articleTag": ${translatedFieldFragment("articleTag")},
       "articleTitle": ${translatedFieldFragment("articleTitle")},
       "articleSubtitle": ${translatedFieldFragment("articleSubtitle")},

diff --git a/studio/schemas/objects/sections/learning.ts b/studio/schemas/objects/sections/learning.ts
@@ -1,6 +1,7 @@
 import { defineField } from "sanity";
 
 import { titleID } from "studio/schemas/fields/text";
+
 export const learningID = "learningSection";
 
 export const learningSection = defineField({
@@ -37,7 +38,7 @@ export const learningSection = defineField({
     {
       name: "articleLink",
       title: "Article link",
-      type: "internationalizedArrayString",
+      type: "string",
       validation: (rule) => rule.required(),
     },
     {