feat(SW-184): implementing mobile design

components/Header/TopMenu/index.tsx

@@ -1,32 +1,29 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import { GiftIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
+import { GiftIcon, SearchIcon } from "@/components/Icons"
+import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { getIntl } from "@/i18n"
 
-import LanguageSwitcher from "./LanguageSwitcher"
-import Search from "./Search"
+import HeaderLink from "../HeaderLink"
 
 import styles from "./topMenu.module.css"
 
-export default async function TopMenu() {
-  const intl = await getIntl()
-  const languages = await serverClient().contentstack.languageSwitcher.get()
+import { TopMenuProps } from "@/types/components/header/topMenu"
 
-  if (!languages) {
-    return null
-  }
+export default async function TopMenu({ languageUrls }: TopMenuProps) {
+  const intl = await getIntl()
 
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
-        <Link variant="icon" color="burgundy" href="#" size="small">
+        <HeaderLink href="#">
           <GiftIcon width={20} height={20} color="burgundy" />
           {intl.formatMessage({ id: "Join Scandic Friends" })}
-        </Link>
+        </HeaderLink>
         <div className={styles.right}>
-          <LanguageSwitcher urls={languages.urls} />
-          <Search />
+          <LanguageSwitcher urls={languageUrls} />
+          <HeaderLink href="#">
+            <SearchIcon width={20} height={20} color="burgundy" />
+            {intl.formatMessage({ id: "Find booking" })}
+          </HeaderLink>
         </div>
       </div>
     </div>