1import React from 'react';
 2
 3import { Typography } from '@material-ui/core';
 4import { makeStyles } from '@material-ui/core/styles';
 5
 6import { Status } from '../../gqlTypes';
 7import Author from 'src/components/Author';
 8import Date from 'src/components/Date';
 9
10import { SetStatusFragment } from './SetStatusFragment.generated';
11
12const useStyles = makeStyles((theme) => ({
13  main: {
14    color: theme.palette.text.secondary,
15    marginLeft: theme.spacing(1) + 40,
16  },
17  author: {
18    fontWeight: 'bold',
19    color: theme.palette.text.secondary,
20  },
21}));
22
23type Props = {
24  op: SetStatusFragment;
25};
26
27function SetStatus({ op }: Props) {
28  const classes = useStyles();
29  const status = { [Status.Open]: 'reopened', [Status.Closed]: 'closed' }[
30    op.status
31  ];
32
33  return (
34    <Typography className={classes.main}>
35      <Author author={op.author} className={classes.author} />
36      <span> {status} this </span>
37      <Date date={op.date} />
38    </Typography>
39  );
40}
41
42export default SetStatus;