diff options
author | ilyayudovin <ilyayudovin123@gmail.com> | 2020-06-14 15:56:29 +0300 |
---|---|---|
committer | ilyayudovin <ilyayudovin123@gmail.com> | 2020-06-14 16:03:35 +0300 |
commit | 3c3223c3b41411639ff19ebd58df569cf17999ca (patch) | |
tree | 0cdf433d3b718e5f87a286dd01159da431189a9e /src/PollCard | |
parent | 99b44bc80fa3228131a05fccb13f75ff8a46b116 (diff) | |
download | which-ui-3c3223c3b41411639ff19ebd58df569cf17999ca.tar.gz |
divide src into Pages and Components directories
Diffstat (limited to 'src/PollCard')
-rw-r--r-- | src/PollCard/PollCard.tsx | 100 |
1 files changed, 0 insertions, 100 deletions
diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx deleted file mode 100644 index b639f25..0000000 --- a/src/PollCard/PollCard.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import { - Card, - CardActionArea, - CardMedia, - Avatar, - CardHeader -} from '@material-ui/core/'; -import { Poll } from '../types'; - -interface PropTypes { - poll: Poll; -} - -interface PercentageBarPropTypes { - value: number; - which: 'left' | 'right'; -} - -const useStyles = makeStyles(theme => ({ - root: { - maxWidth: theme.spacing(75), - height: theme.spacing(63), - margin: '20px auto' - }, - images: { - height: theme.spacing(50), - width: theme.spacing(38) - }, - imagesBlock: { - display: 'flex' - }, - percentage: { - position: 'absolute', - color: 'white', - top: '86%', - fontSize: 20, - textShadow: '0 0 3px black' - }, - percentageLeft: { - left: 30 - }, - percentageRight: { - right: 30 - } -})); - - -const PercentageBar: React.FC<PercentageBarPropTypes> = ({ value, which }) => { - const classes = useStyles(); - const positionClassName = which === 'left' ? 'percentageLeft' : 'percentageRight'; - - return ( - <div className={`${classes.percentage} ${classes[positionClassName]}`}> - {value} - % - </div> - ); -}; - - -const PollCard: React.FC<PropTypes> = ({ poll }) => { - const classes = useStyles(); - const { author, contents } = poll; - - const leftPercentage = Math.round(100 * (contents.left.votes / (contents.left.votes + contents.right.votes))); - const rightPercentage = 100 - leftPercentage; - - - return ( - <Card className={classes.root}> - <CardHeader - avatar={( - <Avatar aria-label="avatar" src={author.avatarUrl} alt={author.name[0].toUpperCase()} /> - )} - title={author.name} - /> - <div className={classes.imagesBlock}> - <CardActionArea> - <CardMedia - className={classes.images} - image={contents.left.url} - /> - <PercentageBar value={leftPercentage} which="left" /> - </CardActionArea> - <CardActionArea> - <CardMedia - className={classes.images} - image={contents.right.url} - /> - <PercentageBar value={rightPercentage} which="right" /> - </CardActionArea> - </div> - </Card> - ); -}; - -export default PollCard; - |