import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm'; import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import Label from 'src/components/Label'; import { BugFragment } from './Bug.generated'; import CommentForm from './CommentForm'; import TimelineQuery from './TimelineQuery'; /** * Css in JS Styles */ const useStyles = makeStyles((theme) => ({ main: { maxWidth: 1000, margin: 'auto', marginTop: theme.spacing(4), }, header: { marginRight: theme.spacing(2), marginLeft: theme.spacing(3) + 40, }, title: { ...theme.typography.h5, }, id: { ...theme.typography.subtitle1, marginLeft: theme.spacing(1), }, container: { display: 'flex', marginBottom: theme.spacing(1), marginRight: theme.spacing(2), marginLeft: theme.spacing(2), }, timeline: { flex: 1, marginTop: theme.spacing(2), marginRight: theme.spacing(2), minWidth: 400, }, rightSidebar: { marginTop: theme.spacing(2), flex: '0 0 200px', }, rightSidebarTitle: { 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: { marginTop: theme.spacing(2), marginLeft: 48, }, })); type Props = { bug: BugFragment; }; function Bug({ bug }: Props) { const classes = useStyles(); return (
{() => (
)}
Labels
    {bug.labels.length === 0 && ( None yet )} {bug.labels.map((l) => (
  • ))}
); } export default Bug;