mirror of
https://github.com/status-im/visual-identity.git
synced 2025-02-08 10:44:33 +00:00
add vote button and slider
This commit is contained in:
parent
70e5c77d91
commit
e99d9b5560
@ -1,22 +1,45 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import React, { Fragment, PureComponent } from 'react';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import CardActions from '@material-ui/core/CardActions';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Slider from '@material-ui/lab/Slider';
|
||||
import Tooltip from '@material-ui/core/Tooltip';
|
||||
|
||||
const Poll = ({ _question, _totalCensus, _voters }) => (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="headline">Proposal: {_question}</Typography>
|
||||
<Typography variant="subheading" color="textSecondary">
|
||||
Total SNT Voted: {_totalCensus}
|
||||
</Typography>
|
||||
<Typography variant="subheading" color="textSecondary">
|
||||
Number of voters: {_voters}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
class Poll extends PureComponent {
|
||||
state = {
|
||||
value: 0,
|
||||
};
|
||||
|
||||
handleChange = (event, value) => {
|
||||
this.setState({ value });
|
||||
};
|
||||
|
||||
render(){
|
||||
const { _question, _totalCensus, _voters } = this.props;
|
||||
const { value } = this.state;
|
||||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="headline">Proposal: {_question}</Typography>
|
||||
<Typography variant="subheading" color="textSecondary">
|
||||
Total SNT Voted: {_totalCensus}
|
||||
</Typography>
|
||||
<Typography variant="subheading" color="textSecondary">
|
||||
Number of voters: {_voters}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<Tooltip id="tooltip-icon" placement="top" title={`${value} SNT`}>
|
||||
<CardActions>
|
||||
<Slider value={value} min={0} max={6} step={1} onChange={this.handleChange} />
|
||||
<Button variant="contained" color="primary">Vote</Button>
|
||||
</CardActions>
|
||||
</Tooltip>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const PollsList = ({ rawPolls }) => (
|
||||
<Fragment>
|
||||
|
@ -19,6 +19,7 @@
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^1.3.0",
|
||||
"@material-ui/icons": "^1.1.0",
|
||||
"@material-ui/lab": "^1.0.0-alpha.5",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"bignumber.js": "^5.0.0",
|
||||
|
Loading…
x
Reference in New Issue
Block a user