src/components/project-list/project-list.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Theme } from "@material-ui/core";
   7 import { StyleRulesCallback, WithStyles } from "@material-ui/core/styles";
   8 import Paper from "@material-ui/core/Paper/Paper";
   9 import withStyles from "@material-ui/core/es/styles/withStyles";
  10 import Table from "@material-ui/core/Table/Table";
  11 import TableHead from "@material-ui/core/TableHead/TableHead";
  12 import TableRow from "@material-ui/core/TableRow/TableRow";
  13 import TableCell from "@material-ui/core/TableCell/TableCell";
  14 import TableBody from "@material-ui/core/TableBody/TableBody";
  15
  16 type CssRules = 'root' | 'table';
  17
  18 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  19     root: {
  20         width: '100%',
  21         marginTop: theme.spacing.unit * 3,
  22         overflowX: 'auto',
  23     },
  24     table: {
  25         minWidth: 700,
  26     },
  27 });
  28
  29 interface ProjectListProps {
  30 }
  31
  32 class ProjectList extends React.Component<ProjectListProps & WithStyles<CssRules>, {}> {
  33     render() {
  34         const {classes} = this.props;
  35         return <Paper className={classes.root}>
  36             <Table className={classes.table}>
  37                 <TableHead>
  38                     <TableRow>
  39                         <TableCell>Name</TableCell>
  40                         <TableCell>Status</TableCell>
  41                         <TableCell>Type</TableCell>
  42                         <TableCell>Shared by</TableCell>
  43                         <TableCell>File size</TableCell>
  44                         <TableCell>Last modified</TableCell>
  45                     </TableRow>
  46                 </TableHead>
  47                 <TableBody>
  48                     <TableRow>
  49                         <TableCell>Project 1</TableCell>
  50                         <TableCell>Complete</TableCell>
  51                         <TableCell>Project</TableCell>
  52                         <TableCell>John Doe</TableCell>
  53                         <TableCell>1.5 GB</TableCell>
  54                         <TableCell>9:22 PM</TableCell>
  55                     </TableRow>
  56                 </TableBody>
  57             </Table>
  58         </Paper>
  59     }
  60 }
  61
  62 export default withStyles(styles)(ProjectList);