DataPage.tsx

import React, { ReactElement } from "react";
import { Container, Row } from "react-bootstrap";
import { Link } from "react-router-dom";

import OrganizationSidebar from "./OrganizationSidebar";
import PageHeader from "../components/global/PageHeader"
import SectionLink from "../components/global/SectionLink";
import SectionNavigation from "./SectionNavigation";
import { Sections } from "../helpers/constants";
import PolicySidebar from "./PolicySidebar";

import { Chart as ChartJS } from 'chart.js';

ChartJS.defaults.font.size = 16;
ChartJS.defaults.font.family = 'Open Sans';
ChartJS.defaults.font.weight = '700';

interface inputProps {
    title: string,
    description?: string,
    filter: ReactElement,
    children: ReactElement,
    category: Sections
}

function DataPage({ title, description, filter, children, category }: inputProps): ReactElement {
    return (
        <>
            {category === Sections.Organisation && <OrganizationSidebar />}
            {category === Sections.Policy && <PolicySidebar />}
            <PageHeader type={'data'} header={<h1 className={'bold-caps-30pt'}>
                <Link to="/data" style={{ textDecoration: 'none', color: 'white' }}>
                    <span>Compendium Data</span>
                </Link>
            </h1>}>
                <SectionLink section={"Reports"} />
            </PageHeader>
            <SectionNavigation activeCategory={category} />
            <Container className="grow">
                <Row>
                    <h3 className="m-4">{title}</h3>
                </Row>
                <Row>
                    <p className="p-md-4">{description}</p>
                </Row>
                <Row>
                    {filter}
                </Row>
                <Row>
                    {children}
                </Row>
            </Container>
        </>
    );
}

export default DataPage;