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 | 9x 66x 40x 3x | import PropTypes from 'prop-types'
import DateModified from '../components/DateModified'
/**
* footer element for all pages
*/
export default function Footer(props) {
return (
<footer>
<h2 className="sr-only">siteFooter</h2>
<div className="container mx-auto px-6 mt-5 text-sm">
{props.t.reportProblem}
</div>
<DateModified text={props.t.dateModified} />
<div className="w-full">
<div className="w-full h-auto bg-footer-parliament-image bg-no-repeat bg-right-bottom bg-[#173451]">
<div
className="py-7 container mx-auto px-6"
role="navigation"
aria-labelledby="footerNav1"
>
<h3 className="sr-only" id="footerNav1">
{props.footerNav1}
</h3>
<ul className="flex flex-col text-sm sm:grid sm:grid-cols-2 xl:grid xl:grid-cols-3 sm:gap-1">
{' '}
{props.footerBoxLinks.map((value, index) => {
return (
<li
key={index}
className="text-white w-64 md:w-56 lg:w-80 my-2.5 hover:underline"
>
<a className="font-body" href={value.footerBoxlink}>
{value.footerBoxLinkText}
</a>
</li>
)
})}
</ul>
</div>
</div>
<div className="w-full h-full pb-4">
<div className="h-auto pt-5 container mx-auto px-6 flex flex-col xl:flex xl:flex-row md:justify-between">
<div
className="mt-3.5 xl:mt-5"
role="navigation"
aria-labelledby="footerNav2"
>
<h3 className="sr-only" id="footerNav2">
{props.footerNav2}
</h3>
<ul className="flex flex-col md:grid md:grid-cols-2 xl:flex lg:flex-row">
{props.links.map((value, index) => {
return (
<li
key={index}
className={
index === 0
? 'lg:mb-4 mb-5 mr-2.5 list-inside list-disc xl:list-none text-sm'
: 'lg:mb-4 mb-5 mr-2.5 list-inside list-disc text-sm'
}
>
<a
className="text-sm font-body text-[#21303F] hover:text-[#5E8EBD]"
data-cy="social-media-link"
href={value.link}
>
{value.linkText}
</a>
</li>
)
})}
</ul>
</div>
<div>
<img
className="mb-2.5 mt-8 xl:mt-0 h-6 md:h-10 w-auto float-right"
src={props.footerLogoImage}
alt={props.footerLogoAltText}
/>
</div>
</div>
</div>
</div>
</footer>
)
}
Footer.propTypes = {
/**
* Screenreader section indicator
*/
footerNav1: PropTypes.string,
/**
* Screenreader section indicator
*/
footerNav2: PropTypes.string,
/**
* array of objects containing the link text and link
*/
footerBoxLinks: PropTypes.arrayOf(
PropTypes.shape({
footerBoxlink: PropTypes.string.isRequired,
footerBoxLinkText: PropTypes.string.isRequired,
})
),
/**
* array of objects containing the link text and link
*/
links: PropTypes.arrayOf(
PropTypes.shape({
link: PropTypes.string.isRequired,
linkText: PropTypes.string.isRequired,
})
),
/**
* alt text for footer canada-ca logo
*/
footerLogoAltText: PropTypes.string.isRequired,
/**
* image path for footer logo
*/
footerLogoImage: PropTypes.string.isRequired,
}
|