diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.tsx | 3 | ||||
| -rw-r--r-- | src/poll-component/poll-component.tsx | 43 |
2 files changed, 45 insertions, 1 deletions
diff --git a/src/index.tsx b/src/index.tsx index 9225909..e2d631d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,6 +7,7 @@ import teal from '@material-ui/core/colors/teal'; import 'typeface-roboto'; import Header from './Header/Header'; +import MediaCard from './poll-component/poll-component'; const theme = createMuiTheme({ palette: { @@ -27,7 +28,7 @@ const App: React.FC = () => { <ThemeProvider theme={theme}> <CssBaseline /> <Header page={page} setPage={setPage} /> - <h1> Hello, world! </h1> + <MediaCard/> </ThemeProvider> ); }; diff --git a/src/poll-component/poll-component.tsx b/src/poll-component/poll-component.tsx new file mode 100644 index 0000000..13d65c5 --- /dev/null +++ b/src/poll-component/poll-component.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import {makeStyles} from '@material-ui/core/styles'; +import Card from '@material-ui/core/Card'; +import CardActionArea from '@material-ui/core/CardActionArea'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; +import CardMedia from '@material-ui/core/CardMedia'; +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; + +const useStyles = makeStyles({ + root: { + maxWidth: 600, + height: 500, + margin: '20px auto', + }, + images: { + height: 400, + width: 300, + margin:'20px 0', + }, + imagesBlock: { + display:'flex', + } +}); + +export default function MediaCard() { + const classes = useStyles(); + + return ( + <Card className={classes.root}> + <CardActionArea> + <div className={classes.imagesBlock}> + <CardMedia className={classes.images} + image='https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'/> + <CardMedia className={classes.images} + image='https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/2019-06/pexels-photo-556667.jpeg'/> + </div> + </CardActionArea> + + </Card> + ); +}
\ No newline at end of file |