DataPage.tsx

import React, { ReactElement } from "react";
import { Container, Row, Col } from "react-bootstrap";
import OrganizationSidebar from "./OrganizationSidebar";
import PageHeader from "../components/global/PageHeader"
import SectionLink from "../components/global/SectionLink";

interface inputProps {
    title: string,
    filter: ReactElement,
    children: ReactElement
}

function DataPage({ title, filter, children }: inputProps): ReactElement {
    return (
        <>
            <OrganizationSidebar />
            <PageHeader type={'data'} header={'Compendium Data'}>
                <SectionLink section={"Reports"} />
            </PageHeader>
            <Container className="grow">
                <Col xs={9}>
                    <Row>
                        <h3 className="m-4">{title}</h3>
                    </Row>
                    <Row>
                        {filter}
                    </Row>
                    <Row>
                        {children}
                    </Row>
                </Col>
            </Container>
        </>
    );
}

export default DataPage;