You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.8 KiB
61 lines
1.8 KiB
2 years ago
|
import PropTypes from "prop-types"
|
||
|
|
import { linkPropTypes, mediaPropTypes } from "utils/types"
|
||
|
|
import NextImage from "./image"
|
||
|
|
import CustomLink from "./custom-link"
|
||
|
|
|
||
|
|
const Footer = ({ footer }) => {
|
||
|
|
return (
|
||
|
|
<footer className="pt-12 bg-gray-100">
|
||
|
|
<div className="container flex flex-col lg:flex-row lg:justify-between">
|
||
|
|
<div>
|
||
|
|
{footer.logo && (
|
||
|
|
<NextImage width="120" height="33" media={footer.logo} />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<nav className="flex flex-wrap flex-row lg:gap-20 items-start lg:justify-end mb-10">
|
||
|
|
{footer.columns.map((footerColumn) => (
|
||
|
|
<div
|
||
|
|
key={footerColumn.id}
|
||
|
|
className="mt-10 lg:mt-0 w-6/12 lg:w-auto"
|
||
|
|
>
|
||
|
|
<p className="uppercase tracking-wide font-semibold">
|
||
|
|
{footerColumn.title}
|
||
|
|
</p>
|
||
|
|
<ul className="mt-2">
|
||
|
|
{footerColumn.links.map((link) => (
|
||
|
|
<li
|
||
|
|
key={link.id}
|
||
|
|
className="text-gray-700 py-1 px-1 -mx-1 hover:text-gray-900"
|
||
|
|
>
|
||
|
|
<CustomLink link={link}>{link.text}</CustomLink>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<div className="text-sm bg-gray-200 py-6 text-gray-700">
|
||
|
|
<div className="container">{footer.smallText}</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
Footer.propTypes = {
|
||
|
|
footer: PropTypes.shape({
|
||
|
|
logo: mediaPropTypes.isRequired,
|
||
|
|
columns: PropTypes.arrayOf(
|
||
|
|
PropTypes.shape({
|
||
|
|
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
||
|
|
.isRequired,
|
||
|
|
title: PropTypes.string.isRequired,
|
||
|
|
links: PropTypes.arrayOf(linkPropTypes),
|
||
|
|
})
|
||
|
|
),
|
||
|
|
smallText: PropTypes.string.isRequired,
|
||
|
|
}),
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Footer
|