PageHeader.tsx

import { ReactElement } from "react";
import { Container, Row, Col } from "react-bootstrap";
import { Link } from "react-router-dom";
import SectionLink from "compendium/components/global/SectionLink";

interface inputProps {
    type: string
}

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

            <Container>
                <Row>
                    <Col sm={8}>
                        <h1 className={'bold-caps-30pt'} style={{ 'marginTop': '0.5rem' }}>
                            <Link to={type === 'data' ? "/data" : "/"} style={{ textDecoration: 'none', color: 'white' }}>
                                <span>Compendium {type === 'data' ? 'Data' : 'Reports'}</span>
                            </Link>
                        </h1>
                    </Col>
                    <Col sm={4}>
                        <a style={{ color: 'inherit' }} href="https://resources.geant.org/geant-compendia/" target="_blank" rel="noreferrer">
                            <SectionLink section={"Reports"} />
                        </a>
                    </Col>
                </Row>
            </Container>
        </div>
    );
}

export default CompendiumHeader;