feat(SW-184): added main components for new header

components/Header/TopMenu/Button/button.module.css

@@ -0,0 +1,9 @@
+.button {
+  background-color: transparent;
+  color: var(--Base-Text-High-contrast);
+  border-width: 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--Spacing-x1);
+  align-items: center;
+}

components/Header/TopMenu/Button/button.ts

@@ -0,0 +1,2 @@
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}

components/Header/TopMenu/Button/index.tsx

@@ -0,0 +1,11 @@
+import { ButtonProps } from "./button"
+
+import styles from "./button.module.css"
+
+export default function Button({ children, ...props }: ButtonProps) {
+  return (
+    <button type="button" className={styles.button} {...props}>
+      {children}
+    </button>
+  )
+}

components/Header/TopMenu/LanguageSwitcher/index.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { useState } from "react"
+
+import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
+
+import Button from "../Button"
+
+import styles from "./languageSwitcher.module.css"
+
+export default function LanguageSwitcher() {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  function handleButtonClick() {
+    setIsExpanded((prev) => !prev)
+  }
+
+  return (
+    <Button onClick={handleButtonClick}>
+      <GlobeIcon width={20} height={20} color="burgundy" />
+      <span>English</span>
+      <ChevronDownIcon
+        className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+        width={20}
+        height={20}
+        color="burgundy"
+      />
+    </Button>
+  )
+}

components/Header/TopMenu/LanguageSwitcher/languageSwitcher.module.css

@@ -0,0 +1,17 @@
+.button {
+  background-color: transparent;
+  color: var(--Base-Text-High-contrast);
+  border-width: 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--Spacing-x1);
+  align-items: center;
+}
+
+.chevron {
+  transition: transform 0.2s;
+}
+
+.chevron.isExpanded {
+  transform: rotate(180deg);
+}

components/Header/TopMenu/Search/index.tsx

@@ -0,0 +1,12 @@
+import { SearchIcon } from "@/components/Icons"
+
+import Button from "../Button"
+
+export default function Search() {
+  return (
+    <Button>
+      <SearchIcon width={20} height={20} color="burgundy" />
+      <span>Find Booking</span>
+    </Button>
+  )
+}

components/Header/TopMenu/Search/search.module.css

@@ -0,0 +1,9 @@
+.button {
+  background-color: transparent;
+  color: var(--Base-Text-High-contrast);
+  border-width: 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--Spacing-x1);
+  align-items: center;
+}

components/Header/TopMenu/index.tsx

@@ -0,0 +1,24 @@
+import { GiftIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+
+import LanguageSwitcher from "./LanguageSwitcher"
+import Search from "./Search"
+
+import styles from "./topMenu.module.css"
+
+export default async function TopMenu() {
+  return (
+    <div className={styles.topMenu}>
+      <div className={styles.content}>
+        <Link variant="icon" color="burgundy" href="#" size="small">
+          <GiftIcon width={20} height={20} color="burgundy" />
+          Join Scandic Friends
+        </Link>
+        <div className={styles.right}>
+          <LanguageSwitcher />
+          <Search />
+        </div>
+      </div>
+    </div>
+  )
+}

components/Header/TopMenu/topMenu.module.css

@@ -0,0 +1,18 @@
+.topMenu {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
+}
+
+.content {
+  max-width: 89.5rem;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--Spacing-x3);
+}
+
+.right {
+  display: flex;
+  gap: var(--Spacing-x2);
+  align-items: center;
+}