appendices.js

import React from 'react';
import { map } from 'ramda';
import { H1, Table, Row, Cell, TableColHeading } from './document/common-components';

const defaultDate = () => new Date().toLocaleDateString('en-NZ');

const getAppendices = () => {
  return [
    { id: 'A', name: 'Site Pre-Check', author: 'Rico', date: defaultDate() },
    { id: 'B', name: 'Proposal Checklist', author: 'Rico', date: defaultDate() }
  ];
};

export function Appendices({ context }) {
  const appendixToRow = appendix => (
      <Row>
        <Cell>{appendix.id}</Cell>
        <Cell>{appendix.name}</Cell>
        <Cell>{appendix.author}</Cell>
        <Cell>{appendix.date}</Cell>
      </Row>
    );

  return (
    <>
      <H1>Appendices</H1>
      <Table columnWidths={[15, 40, 30, 15]}>
        <Row>
          <Cell><TableColHeading>Appendix</TableColHeading></Cell>
          <Cell><TableColHeading>Document</TableColHeading></Cell>
          <Cell><TableColHeading>Author</TableColHeading></Cell>
          <Cell><TableColHeading>Date</TableColHeading></Cell>
        </Row>
        {map(appendixToRow, getAppendices())}
      </Table>
    </>
  );
}