Files
web/components/Header/MainMenu/index.tsx
2024-09-03 13:26:15 +02:00

135 lines
3.1 KiB
TypeScript

import Link from "next/link"
import { serverClient } from "@/lib/trpc/server"
import Image from "@/components/Image"
import { getIntl } from "@/i18n"
import Menu from "./Menu"
import MyPages from "./MyPages"
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 intl = await getIntl()
const myPagesNavigation =
await serverClient().contentstack.myPages.navigation.get()
const user = await serverClient().user.name()
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={intl.formatMessage({ id: "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} />
<MyPages myPagesNavigation={myPagesNavigation} user={user} />
</nav>
</div>
)
}