From f25124c0de2b87718192c45c3c59d51a42b006fd Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123.@mail.com>
Date: Sun, 7 Jun 2020 00:25:53 +0300
Subject: feat:create initial poll-component
---
src/index.tsx | 3 ++-
src/poll-component/poll-component.tsx | 43 +++++++++++++++++++++++++++++++++++
2 files changed, 45 insertions(+), 1 deletion(-)
create mode 100644 src/poll-component/poll-component.tsx
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
--
cgit v1.2.3