feat: adds bottom link to compensation block

varianter · Dec 4, 2024 · 55d8203 · 55d8203
1 parent c8331d1
commit 55d8203
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 3 deletions.
diff --git a/src/components/sections/compensation-calculator/CompensationCalculator.tsx b/src/components/sections/compensation-calculator/CompensationCalculator.tsx
@@ -1,7 +1,9 @@
+import Link from "next/link";
 import { Suspense } from "react";
 
 import LinkButton from "src/components/linkButton/LinkButton";
 import Text from "src/components/text/Text";
+import { getHref } from "src/utils/link";
 import { LocaleDocument } from "studio/lib/interfaces/locale";
 import { CompensationCalculatorSection } from "studio/lib/interfaces/pages";
 import { LOCALE_QUERY } from "studio/lib/queries/locale";
@@ -59,6 +61,15 @@ export default async function CompensationCalculator({
           {section.calculatorBlock.calculatorLink && (
             <LinkButton link={section.calculatorBlock.calculatorLink} />
           )}
+
+          {section.calculatorBlock.calculatorLink && (
+            <div className={styles.calculatorLink}>
+              <LinkButton
+                type="secondary"
+                link={section.calculatorBlock.calculatorLink}
+              />
+            </div>
+          )}
         </div>
         <div className={handbookBgClassname}>
           <Text type="h3">{section.handbookBlock.handbookTitle}</Text>
@@ -69,13 +80,24 @@ export default async function CompensationCalculator({
           {handbookLinksRes.ok && (
             <div className={styles.handbookLinks}>
               {handbookLinksRes.value.map((link) => (
-                <LinkButton key={link.url} link={link} />
+                <Link
+                  key={link._key}
+                  className={styles.handbookLink}
+                  href={getHref(link)}
+                >
+                  {link.linkTitle}
+                </Link>
               ))}
             </div>
           )}
 
           {section.handbookBlock.handbookLink && (
-            <LinkButton link={section.handbookBlock.handbookLink} />
+            <div className={styles.handbookLink}>
+              <LinkButton
+                type="secondary"
+                link={section.handbookBlock.handbookLink}
+              />
+            </div>
           )}
         </div>
       </div>

diff --git a/src/components/sections/compensation-calculator/compensation-calculator.module.css b/src/components/sections/compensation-calculator/compensation-calculator.module.css
@@ -13,6 +13,10 @@
 
   background-color: var(--_calcBg);
   color: var(--_calcColor);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 .calculator {
   --_calcBg: var(--background-bg-dark);
@@ -26,3 +30,26 @@
   --_calcBg: var(--surface-violet);
   --_calcColor: var(--text-primary-light);
 }
+
+.calculatorLink,
+.handbookLink {
+  margin-top: auto;
+}
+
+.handbookLinks {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.handbookLink {
+  font-size: 2rem;
+  color: currentColor;
+}
+.handbookLink:hover {
+  text-decoration: underline;
+}
+.handbookLink:not(:last-child)::after {
+  content: "·";
+  margin-left: 0.5rem;
+}
diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts
@@ -51,11 +51,19 @@ const SECTIONS_FRAGMENT = groq`
         ...,
         "calculatorTitle": ${translatedFieldFragment("calculatorTitle")},
         "calculatorDescription": ${translatedFieldFragment("calculatorDescription")},
+        "calculatorLink": calculatorLink {
+          ...,
+          ${TRANSLATED_LINK_FRAGMENT}
+        }
       },
       "handbookBlock": handbookBlock {
         ...,
         "handbookTitle": ${translatedFieldFragment("handbookTitle")},
-        "handbookDescription": ${translatedFieldFragment("handbookDescription")}
+        "handbookDescription": ${translatedFieldFragment("handbookDescription")},
+        "handbookLink": handbookLink {
+          ...,
+          ${TRANSLATED_LINK_FRAGMENT}
+        }
       }
     },
     _type == "employees" => {

diff --git a/studio/schemas/objects/sections/compensation-calculator.ts b/studio/schemas/objects/sections/compensation-calculator.ts
@@ -82,6 +82,8 @@ export const compensationCalculator = defineField({
         {
           ...link,
           name: "calculatorLink",
+          description:
+            "Bottom link that will be displayed inside the handbook section.",
         },
       ],
     },
@@ -126,6 +128,8 @@ export const compensationCalculator = defineField({
         {
           ...link,
           name: "handbookLink",
+          description:
+            "Bottom link that will be displayed inside the handbook section.",
         },
       ],
     },