feat(SW-572): Added support for logged in and logged out variants of the top link inside the header

components/Header/TopMenu/index.tsx

@@ -1,21 +1,27 @@
-import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
+import {
+  getHeader,
+  getLanguageSwitcher,
+  getName,
+} from "@/lib/trpc/memoizedRequests"
 
-import { GiftIcon, SearchIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
-import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
 
 import HeaderLink from "../HeaderLink"
+import TopLink from "../TopLink"
 
 import styles from "./topMenu.module.css"
 
+import { IconName } from "@/types/components/icon"
+
 export default async function TopMenu() {
   // cached
   const intl = await getIntl()
   // both preloaded
   const languages = await getLanguageSwitcher()
   const header = await getHeader()
+  const user = await getName()
 
   if (!languages || !header) {
     return null
@@ -24,28 +30,15 @@ export default async function TopMenu() {
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
-        {header.data.topLink.link ? (
-          <Caption type="regular" color="textMediumContrast" asChild>
-            <Link
-              href={header.data.topLink.link.url}
-              color="peach80"
-              variant="icon"
-            >
-              <GiftIcon width={20} height={20} />
-              {header.data.topLink.title}
-            </Link>
-          </Caption>
-        ) : null}
+        <TopLink isLoggedIn={!!user} topLink={header.data.topLink} />
         <div className={styles.options}>
           <LanguageSwitcher type="desktopHeader" urls={languages.urls} />
 
           <Caption type="regular" color="textMediumContrast" asChild>
-            <Link href="#" color="peach80" variant="icon">
-              <SearchIcon width={20} height={20} />
+            <HeaderLink href="#" iconName={IconName.Search}>
               {intl.formatMessage({ id: "Find booking" })}
-            </Link>
+            </HeaderLink>
           </Caption>
-          <HeaderLink href="#"></HeaderLink>
         </div>
       </div>
     </div>