51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
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';
|
|
|
|
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 * 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>
|
|
{rawPolls.map((poll, idx) => <Poll key={idx} {...poll} />)}
|
|
</Fragment>
|
|
)
|
|
|
|
export default PollsList
|