Footer

Preview

Code

"use client"

export type Logo = {
	id: number
	alt: string
	name: string
	focus: string
	title: string
	source: string
	filename: string
	copyright: string
	fieldtype: string
	meta_data: Record<string, any>
	is_external_url: boolean
}

export type Footer = {
	_uid: string
	header: string
	component: string
	footer_children: Array<{
		_uid: string
		link: string
		title: string
		component: string
		_editable: string
	}>
}

type FooterProps = {
	logo: Logo
	footerMenu: Array<Footer>
	footerCopyrightNotice: string
	footerSocials: Array<any>
}

const Footer = ({ logo, footerMenu, footerCopyrightNotice, footerSocials }: FooterProps) => {
	return (
		<footer className="bg-white" aria-labelledby="footer-heading">
			<h2 id="footer-heading" className="sr-only">
				Footer
			</h2>
			<div className="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
				<div className="xl:grid xl:grid-cols-3 xl:gap-8">
					<div className="space-y-8">
						<img className="h-7" src={logo.filename} alt="Core" />
						<div className="flex space-x-6">
							{footerSocials.map((social, index) => (
								<a href="#" className="text-gray-400 hover:text-gray-500" key={index}>
									<span className="sr-only">{social.title}</span>
									<span dangerouslySetInnerHTML={{ __html: social.icon }} />
								</a>
							))}
						</div>
					</div>
					<div className="mt-16 grid grid-cols-2 lg:grid-cols-4 gap-8 xl:col-span-2 xl:mt-0">
						{footerMenu.map((footerItem, index) => (
							<div key={index}>
								<h3 className="text-sm font-semibold leading-6 text-gray-900">{footerItem.header}</h3>
								<ul role="list" className="mt-6 space-y-4">
									{footerItem.footer_children.map((child, i) => (
										<li key={i}>
											<a href={child.link} className="text-sm leading-6 text-gray-600 hover:text-gray-900">
												{child.title}
											</a>
										</li>
									))}
								</ul>
							</div>
						))}
					</div>
				</div>
				<div className="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24">
					<p className="text-xs leading-5 text-gray-500">&copy; {footerCopyrightNotice}</p>
				</div>
			</div>
		</footer>
	)
}

export default Footer