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