1import { makeStyles } from '@material-ui/core/styles';
 2import Typography from '@material-ui/core/Typography/Typography';
 3import React from 'react';
 4import Author from '../Author';
 5import Date from '../Date';
 6import TimelineQuery from './TimelineQuery';
 7import Label from '../Label';
 8import { BugFragment } from './Bug.generated';
 9
10const useStyles = makeStyles(theme => ({
11  main: {
12    maxWidth: 800,
13    margin: 'auto',
14    marginTop: theme.spacing(4),
15  },
16  header: {
17    marginLeft: theme.spacing(1) + 40,
18  },
19  title: {
20    ...theme.typography.h5,
21  },
22  id: {
23    ...theme.typography.subtitle1,
24    marginLeft: theme.spacing(1),
25  },
26  container: {
27    display: 'flex',
28    marginBottom: theme.spacing(1),
29  },
30  timeline: {
31    flex: 1,
32    marginTop: theme.spacing(2),
33    marginRight: theme.spacing(2),
34    minWidth: 0,
35  },
36  sidebar: {
37    marginTop: theme.spacing(2),
38    flex: '0 0 200px',
39  },
40  labelList: {
41    listStyle: 'none',
42    padding: 0,
43    margin: 0,
44  },
45  label: {
46    marginTop: theme.spacing(1),
47    marginBottom: theme.spacing(1),
48    '& > *': {
49      display: 'block',
50    },
51  },
52}));
53
54type Props = {
55  bug: BugFragment;
56};
57
58function Bug({ bug }: Props) {
59  const classes = useStyles();
60  return (
61    <main className={classes.main}>
62      <div className={classes.header}>
63        <span className={classes.title}>{bug.title}</span>
64        <span className={classes.id}>{bug.humanId}</span>
65
66        <Typography color={'textSecondary'}>
67          <Author author={bug.author} />
68          {' opened this bug '}
69          <Date date={bug.createdAt} />
70        </Typography>
71      </div>
72
73      <div className={classes.container}>
74        <div className={classes.timeline}>
75          <TimelineQuery id={bug.id} />
76        </div>
77        <div className={classes.sidebar}>
78          <Typography variant={'subtitle1'}>Labels</Typography>
79          <ul className={classes.labelList}>
80            {bug.labels.map(l => (
81              <li className={classes.label} key={l.name}>
82                <Label label={l} key={l.name} />
83              </li>
84            ))}
85          </ul>
86        </div>
87      </div>
88    </main>
89  );
90}
91
92export default Bug;