Banner.tsx

import React, { ReactElement } from "react";
import { Container, Row, Col } from "react-bootstrap";
import SectionDataLogo from "../../images/section_data_large.png";


interface inputProps {
    type: string,
    children: ReactElement
}

function Banner({ children, type }: inputProps): ReactElement {
    let className = ''
    if (type == 'data') {
        className += ' compendium-data-banner'
    } else if (type == 'reports') {
        className = ' compendium-reports-banner'
    }
    return (
        <div className={className}>

            <Container>
                <Row>
                    <Col sm={8}>
                        <Row>
                            <Col sm={2}>
                                <img src={SectionDataLogo} style={{ maxWidth: '80%' }} />
                            </Col>

                            <Col sm={8}>
                                <div className="center-text">
                                    {children}
                                </div>

                            </Col>
                        </Row>
                    </Col>

                </Row>
            </Container>
        </div>
    );
}

export default Banner;