1import React from 'react';
 2
 3import { makeStyles } from '@material-ui/core/styles';
 4
 5import Author from 'src/components/Author';
 6import Date from 'src/components/Date';
 7
 8import { SetTitleFragment } from './SetTitleFragment.generated';
 9
10const useStyles = makeStyles(theme => ({
11  main: {
12    ...theme.typography.body1,
13    marginLeft: theme.spacing(1) + 40,
14  },
15  bold: {
16    fontWeight: 'bold',
17  },
18}));
19
20type Props = {
21  op: SetTitleFragment;
22};
23
24function SetTitle({ op }: Props) {
25  const classes = useStyles();
26  return (
27    <div className={classes.main}>
28      <Author author={op.author} className={classes.bold} />
29      <span> changed the title from </span>
30      <span className={classes.bold}>{op.was}</span>
31      <span> to </span>
32      <span className={classes.bold}>{op.title}</span>
33      <Date date={op.date} />
34    </div>
35  );
36}
37
38export default SetTitle;