Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | 10x 8x 8x 3x | import React from 'react'
import Image from 'next/image'
import propTypes from 'prop-types'
import Link from 'next/link'
import { useTheme } from 'next-themes'
import ThemeChanger from './ThemeChanger'
import Navbar from './Navbar'
export default function Header(props) {
const t = props.t
const { theme } = useTheme()
return (
<>
<nav
role="navigation"
aria-label={props.t.skipToMainContent}
className="absolute w-px h-px -left-96 focus-within:w-screen focus-within:h-auto focus-within:top-4 focus-within:z-50 focus-within:flex focus-within:justify-center"
>
<a
id="skipToMainContent"
className="bg-blue-800 text-white px-2 focus:outline-black-solid hover:bg-gray-dark"
href="#mainContent"
draggable="false"
>
{props.t.skipToMainContent}
</a>
</nav>
<header>
<div className="px-2 md:px-4 flex-col flex md:flex-row justify-between pt-6">
<div className="flex flex-row justify-between items-center w-full mb-2">
<a className="px-11 py-2" href={t.gocLink}>
<Image
width={200}
height={20}
className="h-5 object-scale-down"
src={
props.language === 'en'
? theme === 'dark'
? '/sig-en.svg'
: '/sig-blk-en.svg'
: theme === 'dark'
? '/sig-fr.svg'
: '/sig-blk-fr.svg'
}
alt={
props.language === 'en'
? 'Government of Canada'
: 'Gouvernement du Canada'
}
/>
</a>
<div className="flex gap-2 md:gap-5 items-center2">
{/* Language selector for small screens */}
<Link
key={props.language}
href={props.langToggleLink || '/'}
locale={props.language === 'en' ? 'fr' : 'en'}
>
<a
className="block md:hidden underline text-periwinkle"
lang={props.language === 'en' ? 'fr' : 'en'}
>
{props.language === 'en' ? 'FR' : 'EN'}
</a>
</Link>
<div className="">
{/* Language selector for mid to larger screens */}
<Link
key={props.language}
href={props.langToggleLink || '/'}
locale={props.language === 'en' ? 'fr' : 'en'}
>
<a
className="md:block hidden underline text-periwinkle"
data-cy="toggle-language-link"
lang={props.language === 'en' ? 'fr' : 'en'}
>
{props.language === 'en' ? 'Français' : 'English'}
</a>
</Link>
</div>
<ThemeChanger />
</div>
</div>
</div>
<Navbar t={t} />
<div className="relative h-0 pb-[40%] md:pb-[25%]">
<Image
className="object-cover"
alt=""
src="/Homepage_header.png"
layout="fill"
/>
<div className="absolute whitespace-nowrap text-center font-medium tracking-[.2em] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<h1 className="text-[4rem] md:text-[8rem] text-white pb-[2.5rem] md:pb-[3.5rem]">
{t.headerTitle}
</h1>
<h2 className="text-[1.3] md:text-[2.6rem] text-white">
{t.headerSubText}
</h2>
</div>
</div>
</header>
</>
)
}
/* istanbul ignore next */
export async function getStaticProps({ locale }) {
return {
props: { locale },
}
}
Header.propTypes = {
// Title of the page
title: propTypes.string,
/**
* 'current' language used to display language links
*/
language: propTypes.string,
/**
* Translated text
*/
t: propTypes.object,
/**
* Link to change locals
*/
langToggleLink: propTypes.string,
}
|