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

components/Header/MainMenu/index.tsx

@@ -0,0 +1,125 @@
+import Link from "next/link"
+
+import Image from "@/components/Image"
+
+import Menu from "./Menu"
+import User from "./User"
+
+import styles from "./mainMenu.module.css"
+
+export interface MenuItem {
+  id: string
+  title: string
+  href: string
+  children?: {
+    groupTitle: string
+    children: {
+      id: string
+      title: string
+      href: string
+    }[]
+  }[]
+  seeAllLinkText?: string
+  infoCard?: {
+    scriptedTitle: string
+    title: string
+    description: string
+    ctaLink: string
+  }
+}
+
+export default async function MainMenu() {
+  const menuItems: MenuItem[] = [
+    {
+      id: "hotels",
+      title: "Hotels",
+      href: "/hotels",
+      children: [],
+    },
+    {
+      id: "business",
+      title: "Business",
+      href: "/business",
+      children: [
+        {
+          groupTitle: "Top conference venues",
+          children: [
+            {
+              id: "stockholm",
+              title: "Stockholm",
+              href: "/stockholm",
+            },
+            {
+              id: "bergen",
+              title: "Bergen",
+              href: "/bergen",
+            },
+            {
+              id: "copenhagen",
+              title: "Copenhagen",
+              href: "/copenhagen",
+            },
+          ],
+        },
+        {
+          groupTitle: "Scandic for business",
+          children: [
+            {
+              id: "book-a-venue",
+              title: "Book a venue",
+              href: "/book-a-venue",
+            },
+            {
+              id: "conference-packages",
+              title: "Conference packages",
+              href: "/conference-packages",
+            },
+            {
+              id: "co-working",
+              title: "Co-working",
+              href: "/co-working",
+            },
+          ],
+        },
+      ],
+      seeAllLinkText: "See all conference & meeting venues",
+      infoCard: {
+        scriptedTitle: "Stockholm",
+        title: "Meeting venues in Stockholm",
+        description:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et felis metus. Sed et felis metus.",
+        ctaLink: "/stockholm",
+      },
+    },
+    {
+      id: "offers",
+      title: "Offers",
+      href: "/offers",
+    },
+    {
+      id: "restaurants",
+      title: "Restaurants",
+      href: "/restaurants",
+    },
+  ]
+  return (
+    <div className={styles.mainMenu}>
+      <nav className={styles.content}>
+        <Link className={styles.logoLink} href="/">
+          <Image
+            alt="Back to scandichotels.com"
+            className={styles.logo}
+            data-js="scandiclogoimg"
+            data-nosvgsrc="/_static/img/scandic-logotype.png"
+            itemProp="logo"
+            height={24}
+            src="/_static/img/scandic-logotype.svg"
+            width={113}
+          />
+        </Link>
+        <Menu items={menuItems} />
+        <User />
+      </nav>
+    </div>
+  )
+}