1import { Typography } from '@mui/material';
 2import makeStyles from '@mui/styles/makeStyles';
 3
 4import Author from 'src/components/Author';
 5import Date from 'src/components/Date';
 6import Label from 'src/components/Label';
 7
 8import { LabelChangeFragment } from './LabelChangeFragment.generated';
 9
10const useStyles = makeStyles((theme) => ({
11  main: {
12    color: theme.palette.text.secondary,
13    marginLeft: theme.spacing(1) + 40,
14  },
15  author: {
16    fontWeight: 'bold',
17    color: theme.palette.text.secondary,
18  },
19  label: {
20    maxWidth: '50ch',
21    marginLeft: theme.spacing(0.25),
22    marginRight: theme.spacing(0.25),
23  },
24}));
25
26type Props = {
27  op: LabelChangeFragment;
28};
29
30function LabelChange({ op }: Props) {
31  const { added, removed } = op;
32  const classes = useStyles();
33  return (
34    <Typography className={classes.main}>
35      <Author author={op.author} className={classes.author} />
36      {added.length > 0 && <span> added the </span>}
37      {added.map((label, index) => (
38        <Label key={index} label={label} className={classes.label} />
39      ))}
40      {added.length > 0 && removed.length > 0 && <span> and</span>}
41      {removed.length > 0 && <span> removed the </span>}
42      {removed.map((label, index) => (
43        <Label key={index} label={label} className={classes.label} />
44      ))}
45      <span>
46        {' '}
47        label
48        {added.length + removed.length > 1 && 's'}{' '}
49      </span>
50      <Date date={op.date} />
51    </Typography>
52  );
53}
54
55export default LabelChange;