feat: add Feed and fucntionality for creating polls

2 files changed, 50 insertions, 4 deletions

diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx
new file mode 100644
index 0000000..03ba6c0
--- /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(() => ({
+  feed: {
+    maxWidth: 600,
+    margin: '0 auto'
+  }
+}));
+
+const Feed: React.FC<PropTypes> = ({ polls }) => {
+  const classes = usedStyles();
+
+  return (
+    <div className={classes.feed}>
+      {
+        polls.map(poll => <PollCard author={poll.author} contents={poll.contents} />)
+      }
+    </div>
+  );
+};
+
+export default Feed;
diff --git a/src/index.tsx b/src/index.tsx
index d7efbf7..9811de2 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: {
@@ -21,7 +21,7 @@ const theme = createMuiTheme({
   }
 });
 
-const pollProps = {
+const polls = [{
   author: {
     name: 'John Doe',
     avatarUrl: ''
@@ -38,7 +38,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 = () => {
@@ -48,7 +65,7 @@ const App: React.FC = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Header page={page} setPage={setPage} />
-      <PollCard author={pollProps.author} contents={pollProps.contents} />
+      <Feed polls={polls} />
     </ThemeProvider>
   );
 };