diff options
author | eug-vs <eug-vs@keemail.me> | 2020-08-12 03:27:24 +0300 |
---|---|---|
committer | eug-vs <eug-vs@keemail.me> | 2020-08-12 03:27:24 +0300 |
commit | e8b66d8fcea497be8b1820cde8ec187383b70c60 (patch) | |
tree | 0c4550178a0d84c9e1ed9c99770a447c098e314b /src/components/Drawer/UserInfo.tsx | |
parent | c0ffa44a3438c15a40f41b3e732cab993005ec58 (diff) | |
download | which-ui-e8b66d8fcea497be8b1820cde8ec187383b70c60.tar.gz |
feat: create basic drawer
Diffstat (limited to 'src/components/Drawer/UserInfo.tsx')
-rw-r--r-- | src/components/Drawer/UserInfo.tsx | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/src/components/Drawer/UserInfo.tsx b/src/components/Drawer/UserInfo.tsx new file mode 100644 index 0000000..027f076 --- /dev/null +++ b/src/components/Drawer/UserInfo.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Typography } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import { User } from 'which-types'; + +import Avatar from '../Avatar/Avatar'; + +interface PropTypes { + user: User; +} + +const useStyles = makeStyles(theme => ({ + root: { + padding: theme.spacing(4, 10), + textAlign: 'center' + }, + avatar: { + width: theme.spacing(14), + height: theme.spacing(14) + } +})); + + +const UserInfo: React.FC<PropTypes> = React.memo(({ user }) => { + const classes = useStyles(); + + return ( + <div className={classes.root}> + <Avatar user={user} className={classes.avatar} /> + <Typography variant="h5"> + {user.username} + </Typography> + </div> + ); +}); + +export default UserInfo; + |