diff options
author | Quentin Gliech <quentingliech@gmail.com> | 2018-07-22 00:42:19 +0200 |
---|---|---|
committer | Quentin Gliech <quentingliech@gmail.com> | 2018-07-22 00:42:19 +0200 |
commit | 4901bdadd3918833fc2cf0ad47d73aeeb061af0d (patch) | |
tree | 2f5ae5a753286295fe07120050ef7625d194dd57 /webui/src/BugSummary.js | |
parent | 62c422fa96d9751903e8eeb8ff6bccc45eb5995a (diff) | |
download | git-bug-4901bdadd3918833fc2cf0ad47d73aeeb061af0d.tar.gz |
webui: Split into multiple, smaller components
Diffstat (limited to 'webui/src/BugSummary.js')
-rw-r--r-- | webui/src/BugSummary.js | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/webui/src/BugSummary.js b/webui/src/BugSummary.js new file mode 100644 index 00000000..461fe2d0 --- /dev/null +++ b/webui/src/BugSummary.js @@ -0,0 +1,51 @@ +import React from "react"; +import gql from "graphql-tag"; +import { withStyles } from "@material-ui/core/styles"; + +import Card from "@material-ui/core/Card"; +import CardContent from "@material-ui/core/CardContent"; +import Chip from "@material-ui/core/Chip"; +import Typography from "@material-ui/core/Typography"; + +const styles = theme => ({ + labelList: { + display: "flex", + flexWrap: "wrap", + marginTop: theme.spacing.unit + }, + label: { + marginRight: theme.spacing.unit + }, + summary: { + marginBottom: theme.spacing.unit * 2 + } +}); + +const BugSummary = ({ bug, classes }) => ( + <Card className={classes.summary}> + <CardContent> + <Typography variant="headline" component="h2"> + {bug.title} + </Typography> + <Typography variant="subheading" component="h3" title={bug.id}> + #{bug.id.slice(0, 8)} • {bug.status.toUpperCase()} + </Typography> + <div className={classes.labelList}> + {bug.labels.map(label => ( + <Chip key={label} label={label} className={classes.label} /> + ))} + </div> + </CardContent> + </Card> +); + +BugSummary.fragment = gql` + fragment BugSummary on Bug { + id + title + status + labels + } +`; + +export default withStyles(styles)(BugSummary); |