curiousroamers/src/client/ImagesWithDescription.tsx

39 lines
792 B
TypeScript

import React from 'react';
interface Image {
image: string;
title: string;
description: string;
}
interface imagesWithDescriptionProps {
images: Array<Image>;
}
/**
* @return {jsx} The root component
*/
export default function ImagesWithDescription(
{images}: imagesWithDescriptionProps) {
return (
<React.Fragment>
<div className='container w-50 d-flex justify-content-between'>
{images.map((elem, index) =>
<div
key={index}
id='imagewithdescription'
className='align-top'>
<img
src={'/static/images/' + elem.image}
className='rounded mb-3'
id='smallimage'></img>
<h3 className='font-weight-bold'>
{elem.title}
</h3>
<p>{elem.description}</p>
</div>)}
</div>
</React.Fragment>
);
}