From f25124c0de2b87718192c45c3c59d51a42b006fd Mon Sep 17 00:00:00 2001 From: ilyayudovin 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 = () => {
-

Hello, world!

+ ); }; 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 ( + + +
+ + +
+ + + + ); +} \ No newline at end of file -- cgit v1.2.3 From 709fc75cdf91bcabac41573da5c36fe0cf72f869 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 7 Jun 2020 00:40:37 +0300 Subject: refactor: change names and imports --- src/PollCard/PollCard.tsx | 44 +++++++++++++++++++++++++++++++++++ src/index.tsx | 4 ++-- src/poll-component/poll-component.tsx | 43 ---------------------------------- 3 files changed, 46 insertions(+), 45 deletions(-) create mode 100644 src/PollCard/PollCard.tsx delete mode 100644 src/poll-component/poll-component.tsx diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx new file mode 100644 index 0000000..24ad3eb --- /dev/null +++ b/src/PollCard/PollCard.tsx @@ -0,0 +1,44 @@ +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', + } +}); + +const PollCard: React.FC = () =>{ + const classes = useStyles(); + + return ( + + +
+ + +
+ + + + ); +} +export default PollCard; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index e2d631d..0ad62e0 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 MediaCard from './poll-component/poll-component'; +import PollCard from './PollCard/PollCard'; const theme = createMuiTheme({ palette: { @@ -28,7 +28,7 @@ const App: React.FC = () => {
- + ); }; diff --git a/src/poll-component/poll-component.tsx b/src/poll-component/poll-component.tsx deleted file mode 100644 index 13d65c5..0000000 --- a/src/poll-component/poll-component.tsx +++ /dev/null @@ -1,43 +0,0 @@ -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 ( - - -
- - -
- - - - ); -} \ No newline at end of file -- cgit v1.2.3 From e8b723ae4f046c9f0bee667569e08f7a856855f2 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 7 Jun 2020 02:37:23 +0300 Subject: feat:add avatar and nickname --- src/PollCard/PollCard.tsx | 45 +++++++++++++++++++++++++++++++++++++-------- 1 file changed, 37 insertions(+), 8 deletions(-) diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx index 24ad3eb..b514397 100644 --- a/src/PollCard/PollCard.tsx +++ b/src/PollCard/PollCard.tsx @@ -7,6 +7,10 @@ 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'; +import Avatar from '@material-ui/core/Avatar'; +import CardHeader from '@material-ui/core/CardHeader'; + + const useStyles = makeStyles({ root: { @@ -17,27 +21,52 @@ const useStyles = makeStyles({ images: { height: 400, width: 300, - margin:'20px 0', }, imagesBlock: { - display:'flex', + display: 'flex', + }, + percentageLeft:{ + position:'absolute', + color: 'white', + top: '86%', + left:30, + fontSize:20, + }, + percentageRight:{ + position: 'absolute', + color: 'white', + top: '86%', + right:30, + fontSize:20, } + }); -const PollCard: React.FC = () =>{ +const PollCard: React.FC = () => { const classes = useStyles(); return ( - -
+ + R + + } + title="Nick Name" + /> +
+ +
25%
+ + -
- - +
75%
+ +
); } -- cgit v1.2.3 From 4d3e2f0d19c1957feeebda7f476f4d56b377b86e Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 7 Jun 2020 02:58:36 +0300 Subject: fix: fixing all eslint errors --- .eslintrc.json | 2 +- src/Header/Header.tsx | 18 +++++++++--------- src/PollCard/PollCard.tsx | 47 +++++++++++++++++++++++------------------------ src/index.tsx | 10 +++++----- 4 files changed, 38 insertions(+), 39 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 0789840..746c3b9 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -12,7 +12,7 @@ "jsx-quotes": ["error", "prefer-double"], "quotes": ["error", "single"], "no-multiple-empty-lines": [2, { "max": 2, "maxEOF": 1 } ], - "max-len": ["error", { "code": 120 }], + "max-len": ["error", { "code": 140 }], "arrow-parens": [2, "as-needed"], "comma-dangle": ["error", "never"], "arrow-body-style": 0, diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx index fd2620c..8e8a301 100644 --- a/src/Header/Header.tsx +++ b/src/Header/Header.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { +import { AppBar, Toolbar, Tabs, @@ -15,23 +15,23 @@ interface PropTypes { const useStyles = makeStyles(theme => ({ tab: { '& .MuiTab-wrapper': { - padding: theme.spacing(2), - flexDirection: 'row', - fontSize: '0.8125rem' + padding: theme.spacing(2), + flexDirection: 'row', + fontSize: '0.8125rem' } } })); -const tabs = ["Profile", "Feed"]; +const tabs = ['Profile', 'Feed']; -const Header: React.FC = ({ page, setPage }) => { +const Header: React.FC = ({ page /* , setPage */ }) => { const classes = useStyles(); - const handleChange = () => {} + const handleChange = () => {}; return ( - + {tabs.map((tab: string) => ( = ({ page, setPage }) => { - ) + ); }; export default Header; diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx index b514397..a157411 100644 --- a/src/PollCard/PollCard.tsx +++ b/src/PollCard/PollCard.tsx @@ -1,43 +1,38 @@ import React from 'react'; -import {makeStyles} from '@material-ui/core/styles'; +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'; import Avatar from '@material-ui/core/Avatar'; import CardHeader from '@material-ui/core/CardHeader'; - const useStyles = makeStyles({ root: { maxWidth: 600, height: 500, - margin: '20px auto', + margin: '20px auto' }, images: { height: 400, - width: 300, + width: 300 }, imagesBlock: { - display: 'flex', + display: 'flex' }, - percentageLeft:{ - position:'absolute', + percentageLeft: { + position: 'absolute', color: 'white', top: '86%', - left:30, - fontSize:20, + left: 30, + fontSize: 20 }, - percentageRight:{ + percentageRight: { position: 'absolute', color: 'white', top: '86%', - right:30, - fontSize:20, + right: 30, + fontSize: 20 } }); @@ -48,26 +43,30 @@ const PollCard: React.FC = () => { return ( R - } + )} title="Nick Name" />
- +
25%
 - +
75%
); -} -export default PollCard; \ No newline at end of file +}; +export default PollCard; diff --git a/src/index.tsx b/src/index.tsx index 0ad62e0..b59876b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -12,13 +12,13 @@ import PollCard from './PollCard/PollCard'; const theme = createMuiTheme({ palette: { primary: { - main: teal[700], + main: teal[700] }, text: { primary: '#000000', - secondary: 'rgba(255, 255, 255, 0.6)', - }, - }, + secondary: 'rgba(255, 255, 255, 0.6)' + } + } }); const App: React.FC = () => { @@ -28,7 +28,7 @@ const App: React.FC = () => {
- + ); }; -- cgit v1.2.3 From 9f3d7a362a2d15d72afd9852e115fff39b960acb Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 7 Jun 2020 15:26:20 +0300 Subject: fix:fixing imports and max-len eslint --- .eslintrc.json | 2 +- src/PollCard/PollCard.tsx | 20 ++++++++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 746c3b9..0789840 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -12,7 +12,7 @@ "jsx-quotes": ["error", "prefer-double"], "quotes": ["error", "single"], "no-multiple-empty-lines": [2, { "max": 2, "maxEOF": 1 } ], - "max-len": ["error", { "code": 140 }], + "max-len": ["error", { "code": 120 }], "arrow-parens": [2, "as-needed"], "comma-dangle": ["error", "never"], "arrow-body-style": 0, diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx index a157411..353c33c 100644 --- a/src/PollCard/PollCard.tsx +++ b/src/PollCard/PollCard.tsx @@ -1,11 +1,17 @@ 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 CardMedia from '@material-ui/core/CardMedia'; -import Avatar from '@material-ui/core/Avatar'; -import CardHeader from '@material-ui/core/CardHeader'; - +import { + Card, + CardActionArea, + CardMedia, + Avatar, + CardHeader +} from '@material-ui/core/'; +// import Card from '@material-ui/core/Card'; +// import CardActionArea from '@material-ui/core/CardActionArea'; +// import CardMedia from '@material-ui/core/CardMedia'; +// import Avatar from '@material-ui/core/Avatar'; +// import CardHeader from '@material-ui/core/CardHeader'; const useStyles = makeStyles({ root: { @@ -54,6 +60,7 @@ const PollCard: React.FC = () => {
25%
@@ -61,6 +68,7 @@ const PollCard: React.FC = () => {
75%
-- cgit v1.2.3 From 584ca75571a73479ee5379ecf2c0a657de365c53 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 7 Jun 2020 15:27:47 +0300 Subject: fix: deleting comments --- src/PollCard/PollCard.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx index 353c33c..05e941c 100644 --- a/src/PollCard/PollCard.tsx +++ b/src/PollCard/PollCard.tsx @@ -7,11 +7,6 @@ import { Avatar, CardHeader } from '@material-ui/core/'; -// import Card from '@material-ui/core/Card'; -// import CardActionArea from '@material-ui/core/CardActionArea'; -// import CardMedia from '@material-ui/core/CardMedia'; -// import Avatar from '@material-ui/core/Avatar'; -// import CardHeader from '@material-ui/core/CardHeader'; const useStyles = makeStyles({ root: { -- cgit v1.2.3