76 lines
1.5 KiB
TypeScript
76 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import Link from './Link';
|
|
|
|
interface Link {
|
|
to: string;
|
|
text: string;
|
|
}
|
|
|
|
interface BannerProps {
|
|
title: string;
|
|
description: string;
|
|
links: Array<Link>;
|
|
image: string;
|
|
}
|
|
|
|
/**
|
|
* @return {jsx} The root component
|
|
*/
|
|
export default function Banner(
|
|
{title, description, links, image}: BannerProps) {
|
|
let imgUrl;
|
|
if (image.startsWith('/static/images/')) {
|
|
imgUrl = image;
|
|
} else {
|
|
imgUrl = '/static/images/' + image;
|
|
}
|
|
|
|
const containerStyle = {
|
|
backgroundImage: `url('` + imgUrl + `')`,
|
|
backgroundPosition: '64% 78%',
|
|
backgroundSize: 'cover',
|
|
};
|
|
|
|
const jumbotronStyle = {
|
|
backgroundColor: 'transparent',
|
|
};
|
|
|
|
const colorLayer = {
|
|
backgroundColor: '#1279be70',
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<div
|
|
className='container-fluid p-0'
|
|
style={containerStyle}>
|
|
<div
|
|
className='container-fluid p-0'
|
|
style={colorLayer}>
|
|
<div
|
|
className='jumbotron container text-white px-0'
|
|
id='banner'
|
|
style={jumbotronStyle}>
|
|
<h1 className='display-4 font-weight-bold'>{title}</h1>
|
|
<div className='h5'>
|
|
{description.split('\n').map((elem, index) =>
|
|
<p key={index}>
|
|
{elem}
|
|
</p>)}
|
|
</div>
|
|
<br />
|
|
{links.map((elem, index) =>
|
|
<p key={index} className='lead mt-2'>
|
|
<Link
|
|
className='btn btn-info btn-lg
|
|
font-weight-bold'
|
|
to={elem.to}
|
|
text={elem.text} />
|
|
</p>)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|