aboutsummaryrefslogtreecommitdiff
path: root/src/components/PollCard/PollCard.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/PollCard/PollCard.tsx')
-rw-r--r--src/components/PollCard/PollCard.tsx33
1 files changed, 2 insertions, 31 deletions
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 8995a30..d5c99cc 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -8,16 +8,12 @@ import {
CardHeader
} from '@material-ui/core/';
import { Poll } from '../../types';
+import PercentageBar from './PercentageBar';
interface PropTypes {
poll: Poll;
}
-interface PercentageBarPropTypes {
- value: number;
- which: 'left' | 'right';
-}
-
const useStyles = makeStyles(theme => ({
root: {
maxWidth: theme.spacing(75),
@@ -31,35 +27,9 @@ const useStyles = makeStyles(theme => ({
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;
@@ -96,5 +66,6 @@ const PollCard: React.FC<PropTypes> = ({ poll }) => {
);
};
+
export default PollCard;