aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Feed/Feed.tsx29
-rw-r--r--src/index.tsx25
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>
);
};