ActivityDetails.jsx

import React, { Fragment } from 'react'
import { H2, Button } from '@pubsweet/ui'
// import { th } from '@pubsweet/ui-toolkit'
// import styled from 'styled-components'
import { Table } from '../ui'

const ActivityList = props =>
  props.audits.map(({ id, created, user, action }) => (
    <tr key={id}>
      <td>{created}</td>
      <td>{`${user.givenNames} ${user.surname}`}</td>
      <td>{action}</td>
    </tr>
  ))

const ActivityDetails = props => (
  <Fragment>
    <H2>Details</H2>
    <Button primary>New message</Button>
    <Table>
      <tbody>
        <tr>
          <th>Date</th>
          <th>Person</th>
          <th>Event</th>
        </tr>
        <ActivityList audits={props.manuscript.audits} />
      </tbody>
    </Table>
  </Fragment>
)

export default ActivityDetails