diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/Feed/Feed.tsx | 29 | ||||
-rw-r--r-- | src/index.tsx | 25 |
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> ); }; |