3 files changed, 66 insertions, 14 deletions

diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx
new file mode 100644
index 0000000..e5bc9aa
--- /dev/null
+++ b/src/Feed/Feed.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Poll } from '../types';
+import PollCard from '../PollCard/PollCard';
+
+interface PropTypes {
+  polls: Poll[],
+}
+
+const usedStyles = makeStyles(theme => ({
+  feed: {
+    maxWidth: theme.spacing(75),
+    margin: '0 auto'
+  }
+}));
+
+const Feed: React.FC<PropTypes> = ({ polls }) => {
+  const classes = usedStyles();
+
+  return (
+    <div className={classes.feed}>
+      {
+        polls.map(poll => <PollCard poll={poll} />)
+      }
+    </div>
+  );
+};
+
+export default Feed;
diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx
index 07449fb..588714a 100644
--- a/src/PollCard/PollCard.tsx
+++ b/src/PollCard/PollCard.tsx
@@ -9,20 +9,24 @@ import {
 } from '@material-ui/core/';
 import { Poll } from '../types';
 
+interface PropTypes {
+  poll: Poll;
+}
+
 interface PercentageBarPropTypes {
   value: number;
   which: 'left' | 'right';
 }
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   root: {
-    maxWidth: 600,
-    height: 500,
+    maxWidth: theme.spacing(75),
+    height: theme.spacing(63),
     margin: '20px auto'
   },
   images: {
-    height: 400,
-    width: 300
+    height: theme.spacing(50),
+    width: theme.spacing(38)
   },
   imagesBlock: {
     display: 'flex'
@@ -39,7 +43,7 @@ const useStyles = makeStyles({
   percentageRight: {
     right: 30
   }
-});
+}));
 
 
 const PercentageBar: React.FC<PercentageBarPropTypes> = ({ value, which }) => {
@@ -55,12 +59,14 @@ const PercentageBar: React.FC<PercentageBarPropTypes> = ({ value, which }) => {
 };
 
 
-const PollCard: React.FC<Poll> = ({ author, contents: { left, right } }) => {
+const PollCard: React.FC<PropTypes> = ({ poll }) => {
   const classes = useStyles();
+  const { author, contents } = poll;
 
-  const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
+  const leftPercentage = Math.round(100 * (contents.left.votes / (contents.left.votes + contents.right.votes)));
   const rightPercentage = 100 - leftPercentage;
 
+
   return (
     <Card className={classes.root}>
       <CardHeader
@@ -75,14 +81,14 @@ const PollCard: React.FC<Poll> = ({ author, contents: { left, right } }) => {
         <CardActionArea>
           <CardMedia
             className={classes.images}
-            image={left.url}
+            image={contents.left.url}
           />
           <PercentageBar value={leftPercentage} which="left" />
         </CardActionArea>
         <CardActionArea>
           <CardMedia
             className={classes.images}
-            image={right.url}
+            image={contents.right.url}
           />
           <PercentageBar value={rightPercentage} which="right" />
         </CardActionArea>
diff --git a/src/index.tsx b/src/index.tsx
index 48bad48..775c514 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,7 +7,7 @@ import teal from '@material-ui/core/colors/teal';
 import 'typeface-roboto';
 
 import Header from './Header/Header';
-import PollCard from './PollCard/PollCard';
+import Feed from './Feed/Feed';
 
 const theme = createMuiTheme({
   palette: {
@@ -17,7 +17,7 @@ const theme = createMuiTheme({
   }
 });
 
-const pollProps = {
+const polls = [{
   author: {
     name: 'John Doe',
     avatarUrl: ''
@@ -34,7 +34,24 @@ const pollProps = {
       votes: 17
     }
   }
-};
+}, {
+  author: {
+    name: 'John Doe',
+    avatarUrl: ''
+  },
+  contents: {
+    left: {
+      // eslint-disable-next-line max-len
+      url: 'https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
+      votes: 15
+    },
+    right: {
+      // eslint-disable-next-line max-len
+      url: 'https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/2019-06/pexels-photo-556667.jpeg',
+      votes: 17
+    }
+  }
+}];
 
 
 const App: React.FC = () => {
@@ -44,7 +61,7 @@ const App: React.FC = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Header setPage={setPage} />
-      <PollCard author={pollProps.author} contents={pollProps.contents} />
+      <Feed polls={polls} />
       <h1> We are on page {page}! </h1>
     </ThemeProvider>
   );