aboutsummaryrefslogtreecommitdiff
path: root/src/PollCard
diff options
context:
space:
mode:
authorilyayudovin <ilyayudovin123@gmail.com>2020-06-14 15:56:29 +0300
committerilyayudovin <ilyayudovin123@gmail.com>2020-06-14 16:03:35 +0300
commit3c3223c3b41411639ff19ebd58df569cf17999ca (patch)
tree0cdf433d3b718e5f87a286dd01159da431189a9e /src/PollCard
parent99b44bc80fa3228131a05fccb13f75ff8a46b116 (diff)
downloadwhich-ui-3c3223c3b41411639ff19ebd58df569cf17999ca.tar.gz
divide src into Pages and Components directories
Diffstat (limited to 'src/PollCard')
-rw-r--r--src/PollCard/PollCard.tsx100
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;
-