curiousroamers/src/client/Footer.tsx

49 lines
890 B
TypeScript

import React from 'react';
interface Link {
to: string;
text: string;
}
interface Card {
title: string;
description: string;
links: Array<Link>;
}
interface FooterProps {
elements: Array<Card>;
}
/**
* @return {jsx} The root component
*/
export default function Footer(
{elements}: FooterProps) {
return (
<React.Fragment>
<div className='container w-50 py-5 d-flex justify-content-between'>
{elements.map((elem, index) =>
<div
key={index}
id='imagewithdescription'
className='align-top'>
<h3 className='font-weight-bold'>
{elem.title}
</h3>
<p
dangerouslySetInnerHTML=
{{__html: elem.description}}></p>
{elem.links.map((link, i) =>
<div key={i}>
<a href={link.to}>
{link.text}
</a>
<br/>
</div>)}
</div>)}
</div>
</React.Fragment>
);
}