refactor: use proper component for header links

varianter · Dec 13, 2024 · dd4438f · dd4438f
1 parent 794dceb
commit dd4438f
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 35 deletions.
diff --git a/src/components/link/CustomLink.tsx b/src/components/link/CustomLink.tsx
@@ -56,6 +56,7 @@ const CustomLink = ({
               target={target}
               rel={rel}
               aria-label={link.ariaLabel}
+              scroll={scroll}
             >
               <span className={styles.span}>{link.linkTitle}</span>
             </Link>
@@ -87,6 +88,7 @@ const CustomLink = ({
             target={target}
             rel={rel}
             aria-label={link.ariaLabel}
+            scroll={scroll}
           >
             {link.linkTitle}
           </Link>
@@ -101,6 +103,7 @@ const CustomLink = ({
             target={target}
             rel={rel}
             aria-label={link.ariaLabel}
+            scroll={scroll}
           >
             {link.linkTitle}
           </Link>

diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
@@ -99,8 +99,8 @@ export const Header = ({
                 className={styles.logo}
                 scroll={false}
               />
-              {renderPageLinks(links, false, pathname)}
-              {renderPageCTAs(ctas, false)}
+              <PageLinks links={links} isMobile={false} pathname={pathname} />
+              <PageCTAs ctas={ctas} isMobile={false} />
               <div className={styles.languageSwitcher}>
                 {defaultLanguage && (
                   <LanguageSwitcher
@@ -136,7 +136,11 @@ export const Header = ({
                 aria-label="Mobile Menu"
                 onClick={() => setIsOpen(false)}
               >
-                {renderPageLinks(sidebarLinks, true, pathname)}
+                <PageLinks
+                  links={sidebarLinks}
+                  isMobile={true}
+                  pathname={pathname}
+                />
                 <hr className={styles.divider} />
                 <div className={styles.mobileButtons}>
                   {defaultLanguage && (
@@ -182,39 +186,47 @@ export const Header = ({
   );
 };
 
-export const renderPageLinks = (
-  links: ILink[],
-  isMobile: boolean,
-  pathname: string,
-) => (
-  <ul className={isMobile ? styles.listMobile : styles.desktopLinks}>
-    {links?.map((link: ILink) => {
-      const linkUrl = getHref(link);
-      const isSelected = pathname === `${linkUrl}`;
-      return (
+function PageLinks({
+  links,
+  isMobile,
+  pathname,
+}: {
+  links: ILink[];
+  isMobile: boolean;
+  pathname: string;
+}) {
+  return (
+    <ul className={isMobile ? styles.listMobile : styles.desktopLinks}>
+      {links?.map((link: ILink) => {
+        const linkUrl = getHref(link);
+        const isSelected = pathname === `${linkUrl}`;
+        return (
+          <li key={link._key}>
+            <CustomLink
+              link={link}
+              type="headerLink"
+              isSelected={isSelected}
+              scroll={false}
+            />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+function PageCTAs({ ctas, isMobile }: { ctas: ILink[]; isMobile: boolean }) {
+  return (
+    <ul className={isMobile ? styles.listMobile : styles.desktopCtas}>
+      {ctas?.map((link: ILink, index) => (
         <li key={link._key}>
-          <CustomLink
+          <LinkButton
             link={link}
-            type="headerLink"
-            isSelected={isSelected}
-            scroll={false}
+            size="S"
+            type={ctas.length < 2 || index === 1 ? "primary" : "secondary"}
           />
         </li>
-      );
-    })}
-  </ul>
-);
-
-export const renderPageCTAs = (ctas: ILink[], isMobile: boolean) => (
-  <ul className={isMobile ? styles.listMobile : styles.desktopCtas}>
-    {ctas?.map((link: ILink, index) => (
-      <li key={link._key}>
-        <LinkButton
-          link={link}
-          size="S"
-          type={ctas.length < 2 || index === 1 ? "primary" : "secondary"}
-        />
-      </li>
-    ))}
-  </ul>
-);
+      ))}
+    </ul>
+  );
+}