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.
nx-guitar-school/apps/website/components/footer/footer.tsx

52 lines
1.8 KiB

import delve from "dlv";
export function Footer({items = []}) {
const generateItem = (item, index) => {
const value = delve(item, 'attributes', {});
return (
<li key={value.title + index}
className="my-1 h-10 flex align-middle items-center md:h-auto">
<a href={value.url}
target={value.target}
title={"Accédez à la page " + value.title}
aria-label={"Accédez à la page " + value.title}
className="mr-4 hover:underline md:mr-6 ">
{value.title}
</a>
</li>
);
}
return (
<footer className="p-4 bg-white md:px-6 md:py-8 dark:bg-gray-900">
<div className="sm:flex sm:items-center sm:justify-between">
<a href="/"
aria-label="Page d'accueil MeCP"
title="Page d'accueil MeCP"
className="flex items-center mb-4 sm:mb-0">
<img src="https://flowbite.com/docs/images/logo.svg"
className="h-8 mr-3"
height="auto"
width="auto"
alt="Flowbite Logo" />
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">MeCP</span>
</a>
<ul className="flex flex-wrap items-center justify-end mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
{items.map((item, index: number) => generateItem(item, index))}
</ul>
</div>
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
<span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">©2023
<a href="/"
aria-label="Page d'accueil MeCP"
title="Page d'accueil MeCP"
className="hover:underline"> MeCP</a>. All Rights Reserved.
</span>
</footer>
);
}
export default Footer;