Merge pull request #10 from ilyayudovin/poll-component

Create poll-component

3 files changed, 90 insertions, 14 deletions

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
index fd2620c..8e8a301 100644
--- a/src/Header/Header.tsx
+++ b/src/Header/Header.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { 
+import {
   AppBar,
   Toolbar,
   Tabs,
@@ -15,23 +15,23 @@ interface PropTypes {
 const useStyles = makeStyles(theme => ({
   tab: {
     '& .MuiTab-wrapper': {
-        padding: theme.spacing(2),
-        flexDirection: 'row',
-        fontSize: '0.8125rem'
+      padding: theme.spacing(2),
+      flexDirection: 'row',
+      fontSize: '0.8125rem'
     }
   }
 }));
 
-const tabs = ["Profile", "Feed"];
+const tabs = ['Profile', 'Feed'];
 
-const Header: React.FC<PropTypes> = ({ page, setPage }) => {
+const Header: React.FC<PropTypes> = ({ page /* , setPage */ }) => {
   const classes = useStyles();
 
-  const handleChange = () => {}
+  const handleChange = () => {};
 
   return (
     <AppBar position="static">
-      <Toolbar> 
+      <Toolbar>
         <Tabs onChange={handleChange} value={page}>
           {tabs.map((tab: string) => (
             <Tab
@@ -43,7 +43,7 @@ const Header: React.FC<PropTypes> = ({ page, setPage }) => {
         </Tabs>
       </Toolbar>
     </AppBar>
-  )
+  );
 };
 
 export default Header;
diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx
new file mode 100644
index 0000000..05e941c
--- /dev/null
+++ b/src/PollCard/PollCard.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  Card,
+  CardActionArea,
+  CardMedia,
+  Avatar,
+  CardHeader
+} from '@material-ui/core/';
+
+const useStyles = makeStyles({
+  root: {
+    maxWidth: 600,
+    height: 500,
+    margin: '20px auto'
+  },
+  images: {
+    height: 400,
+    width: 300
+  },
+  imagesBlock: {
+    display: 'flex'
+  },
+  percentageLeft: {
+    position: 'absolute',
+    color: 'white',
+    top: '86%',
+    left: 30,
+    fontSize: 20
+  },
+  percentageRight: {
+    position: 'absolute',
+    color: 'white',
+    top: '86%',
+    right: 30,
+    fontSize: 20
+  }
+
+});
+
+const PollCard: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.root}>
+      <CardHeader
+        avatar={(
+          <Avatar aria-label="avatar">
+            R
+          </Avatar>
+        )}
+        title="Nick Name"
+      />
+      <div className={classes.imagesBlock}>
+        <CardActionArea>
+          <CardMedia
+            className={classes.images}
+            // eslint-disable-next-line max-len
+            image="https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
+          />
+          <div className={classes.percentageLeft}>25%</div>
+        </CardActionArea>
+        <CardActionArea>
+          <CardMedia
+            className={classes.images}
+            // eslint-disable-next-line max-len
+            image="https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/2019-06/pexels-photo-556667.jpeg"
+          />
+          <div className={classes.percentageRight}>75%</div>
+        </CardActionArea>
+      </div>
+    </Card>
+  );
+};
+export default PollCard;
diff --git a/src/index.tsx b/src/index.tsx
index 9225909..b59876b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,17 +7,18 @@ import teal from '@material-ui/core/colors/teal';
 import 'typeface-roboto';
 
 import Header from './Header/Header';
+import PollCard from './PollCard/PollCard';
 
 const theme = createMuiTheme({
   palette: {
     primary: {
-      main: teal[700],
+      main: teal[700]
     },
     text: {
       primary: '#000000',
-      secondary: 'rgba(255, 255, 255, 0.6)',
-    },
-  },
+      secondary: 'rgba(255, 255, 255, 0.6)'
+    }
+  }
 });
 
 const App: React.FC = () => {
@@ -27,7 +28,7 @@ const App: React.FC = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Header page={page} setPage={setPage} />
-      <h1> Hello, world! </h1>
+      <PollCard />
     </ThemeProvider>
   );
 };