scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB-38, WEB-9, WEB-19): add static page for sponsoring, add Header and add Footer

Browse Source
This commit is contained in:
Christel Westerberg
2024-01-12 16:03:50 +01:00
parent 0a208923f8
commit bb90e2bf50
69 changed files with 3739 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
components/Current/Header/En.tsx Normal file
View File

@@ -0,0 +1,187 @@
/* eslint-disable @next/next/no-img-element */
import { currentAboutLinks, currentSponsoringLinks, currentWifiLinks } from "@/constants/current/links"
import Desktop from "./LanguageSwitcher/Desktop"
import Mobile from "./LanguageSwitcher/Mobile"
import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher"
import type { HeaderProps } from "@/types/components/current/header"
const paths: Record<string, LanguageSwitcherLink[]> = {
"/customer-service/frequently-asked-questions/using-the-website": currentAboutLinks,
"/explore-scandic/wifi": currentWifiLinks,
"/sponsoring": currentSponsoringLinks,
}
const currentLanguage = "English"
export default function EnHeader({ pathname }: HeaderProps) {
const links = paths?.[pathname] ?? null
return (
<header className="header" role="banner">
<div className="offline-banner hidden">
You are offline, some content may be out of date.
<button type="button" className="reload">
Reload
</button>
</div>
<div
className="l-section main-header navigation-bar"
data-js="main-nav-bar"
>
<div className="navigation-bar__top navigation-bar__top--ghostwhite-light">
<div className="l-section__inner">
<a
href="https://www.scandichotels.com"
className="scandic-main-page-link"
>
Back to scandichotels.com
</a>
<ul className="nav-secondary navbar-login">
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
{links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a
className="nav-secondary__item__link"
href="/hotelreservation/get-booking"
>
View/Cancel booking
</a>
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a className="nav-secondary__item__link" href="/work-with-us">
Work with us
</a>
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a
className="nav-secondary__item__link"
href="/corporate-travel"
>
Corporate Travel
</a>
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a
className="nav-secondary__item__link"
href="/scandic-friends"
>
About Scandic Friends
</a>
</li>
</ul>
</div>
</div>
<div className="navigation-bar__main">
<div
className="l-section__inner l-section__inner--small-no-padding"
itemScope
itemType="http://schema.org/Organization"
>
<meta itemProp="name" content="Scandic" />
<button
type="button"
className="navigation-bar__main__expander"
data-js="main-nav-toggler"
data-target="#main-menu"
aria-pressed="false"
>
<span className="icon-bars"></span>
<span className="hidden--accessible">Menu</span>
</button>
<a
id="scandic-logo"
className="navigation-bar__main__logo hidden-medium "
href="https://www.scandichotels.com"
itemProp="url"
>
<span className="hidden--accessible">
Back to scandichotels.com
</span>
<img
src="/Static/img/scandic-logotype.svg"
data-js="scandiclogoimg"
alt="Scandic Hotels logo"
height="22"
data-nosvgsrc="/Static/img/scandic-logotype.png"
itemProp="logo"
/>
</a>
<nav>
<ul
id="main-menu"
className="nav-primary is-collapsed"
data-collapsable="main-menu"
>
<li
className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall"
aria-hidden="true"
>
<a
className="navigation-bar__main__logo"
href="https://www.scandichotels.com"
>
<img
src="/Static/img/scandic-logotype.svg"
data-js="scandiclogoimg"
alt="Scandic Hotels logo"
height="22"
data-nosvgsrc="/Static/img/scandic-logotype.png"
/>
<span className="hidden--accessible">
Back to scandichotels.com
</span>
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.com/hotels">
Hotels &amp; Destinations
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.com/travel-guides">
Travel guides
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.com/conferences-meetings">
Conferences &amp; Meetings
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.com/explore-scandic">
Explore Scandic
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.com/weekend-packages-and-offers">
Offers
</a>
</li>
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
<a href="https://www.scandichotels.com/scandic-friends">
About Scandic Friends
</a>
</li>
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
<a href="https://www.scandichotels.com/corporate-travel">
Corporate Travel
</a>
</li>
<li className="nav-primary__item hidden-medium hidden-large">
{links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
);
}