From 0e84386fe75578bbbf2ac7854467070fe8608cde Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 8 Jun 2020 14:39:13 +0300 Subject: feat: add profile design and functionality to hide and show profile --- src/ProfileInfo/ProfileInfo.tsx | 65 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/ProfileInfo/ProfileInfo.tsx (limited to 'src/ProfileInfo/ProfileInfo.tsx') diff --git a/src/ProfileInfo/ProfileInfo.tsx b/src/ProfileInfo/ProfileInfo.tsx new file mode 100644 index 0000000..233411f --- /dev/null +++ b/src/ProfileInfo/ProfileInfo.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { + Card, + CardActionArea, + CardMedia, + Avatar, + CardHeader +} from '@material-ui/core/'; +import {makeStyles} from "@material-ui/core"; +import { Poll } from '../types'; + +interface propTypes { + profile: Poll; +} +const useStyles = makeStyles({ + avatar: { + margin: '0 auto', + width: 150, + height: 150, + marginBottom: 10, + }, + name: { + fontSize:20, + textAlign: 'center', + }, + profileMenu: { + display: 'flex', + width: '100%', + height: 50, + borderBottom: '1px solid lightgray', + margin: '50px 0', + }, + menuButton: { + width: 200, + height: 50, + paddingTop: 15, + textAlign: 'center', + } +}); + +const ProfileInfo: React.FC=({profile})=>{ + const classes = useStyles(); + + return ( +
+ +
+ Nick Name +
+
+
+ Polls +
+
+ Followers +
+
+ Following +
+
+
+ ); +} + +export default ProfileInfo; \ No newline at end of file -- cgit v1.2.3 From 77fe6ac371160ffc385b1378093f34d0b1f2a8c9 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 8 Jun 2020 14:55:52 +0300 Subject: fix: fix eslint errors --- src/ProfileInfo/ProfileInfo.tsx | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) (limited to 'src/ProfileInfo/ProfileInfo.tsx') diff --git a/src/ProfileInfo/ProfileInfo.tsx b/src/ProfileInfo/ProfileInfo.tsx index 233411f..ac8ef26 100644 --- a/src/ProfileInfo/ProfileInfo.tsx +++ b/src/ProfileInfo/ProfileInfo.tsx @@ -1,44 +1,39 @@ import React from 'react'; -import { - Card, - CardActionArea, - CardMedia, - Avatar, - CardHeader -} from '@material-ui/core/'; -import {makeStyles} from "@material-ui/core"; +import { Avatar } from '@material-ui/core/'; +import { makeStyles } from '@material-ui/core/styles'; import { Poll } from '../types'; -interface propTypes { +interface PropTypes { profile: Poll; } + const useStyles = makeStyles({ avatar: { margin: '0 auto', width: 150, height: 150, - marginBottom: 10, + marginBottom: 10 }, name: { - fontSize:20, - textAlign: 'center', + fontSize: 20, + textAlign: 'center' }, profileMenu: { display: 'flex', width: '100%', height: 50, borderBottom: '1px solid lightgray', - margin: '50px 0', + margin: '50px 0' }, menuButton: { width: 200, height: 50, paddingTop: 15, - textAlign: 'center', + textAlign: 'center' } }); -const ProfileInfo: React.FC=({profile})=>{ +const ProfileInfo: React.FC = ({ profile }) => { const classes = useStyles(); return ( @@ -48,7 +43,7 @@ const ProfileInfo: React.FC=({profile})=>{ Nick Name
-
+
Polls
@@ -60,6 +55,6 @@ const ProfileInfo: React.FC=({profile})=>{
); -} +}; -export default ProfileInfo; \ No newline at end of file +export default ProfileInfo; -- cgit v1.2.3