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