import React from 'react'; import Typography from '@material-ui/core/Typography/Typography'; import { makeStyles } from '@material-ui/core/styles'; import Author from 'src/components/Author'; import Date from 'src/components/Date'; import Label from 'src/components/Label'; import { BugFragment } from './Bug.generated'; import CommentForm from './CommentForm'; import TimelineQuery from './TimelineQuery'; const useStyles = makeStyles(theme => ({ main: { maxWidth: 1000, margin: 'auto', marginTop: theme.spacing(4), }, header: { marginLeft: theme.spacing(1) + 40, }, title: { ...theme.typography.h5, }, id: { ...theme.typography.subtitle1, marginLeft: theme.spacing(1), }, container: { display: 'flex', marginBottom: theme.spacing(1), }, timeline: { flex: 1, marginTop: theme.spacing(2), marginRight: theme.spacing(2), minWidth: 0, }, sidebar: { marginTop: theme.spacing(2), flex: '0 0 200px', }, sidebarTitle: { fontWeight: 'bold', }, labelList: { listStyle: 'none', padding: 0, margin: 0, }, label: { marginTop: theme.spacing(1), marginBottom: theme.spacing(1), '& > *': { display: 'block', }, }, noLabel: { ...theme.typography.body2, }, commentForm: { marginLeft: 48, }, })); type Props = { bug: BugFragment; }; function Bug({ bug }: Props) { const classes = useStyles(); return (
{bug.title} {bug.humanId} {' opened this bug '}
Labels
    {bug.labels.length === 0 && ( None yet )} {bug.labels.map(l => (
  • ))}
); } export default Bug;