Skip to content
Snippets Groups Projects
Commit ce800ab4 authored by Bodor Máté's avatar Bodor Máté
Browse files

Create member card

parent 350e2de5
No related branches found
No related tags found
2 merge requests!19fix type imports,!16About page
import { Box, Typography } from '@material-ui/core';
import React from 'react';
import { IStaff } from '../types/Profile';
const MemberCard: React.FC<IStaff> = ({ name, email, acceptedPicture, staffMemberText }) => {
return (
<Box
bgcolor="#1A6B97"
width="320px"
height="300px"
display="flex"
flexDirection="column"
alignItems="center"
paddingTop={8}
paddingBottom={4}
borderRadius={2}
position="relative"
>
<Box
width="320px"
height="140px"
bgcolor="#202020"
position="absolute"
top={0}
left={0}
/>
<Box
overflow="hidden"
width={128}
height={128}
bgcolor="white"
borderRadius="50%"
marginBottom={2}
border="solid 2px #202020"
position="relative"
zIndex={1000}
display="flex"
justifyContent="center"
alignItems="center"
>
<img src={acceptedPicture} alt="Profile" height={128} />
</Box>
<Box marginBottom={1}>
<Typography variant="h4" color="textPrimary">
{name}
</Typography>
</Box>
<Box>
<Typography color="textPrimary">{staffMemberText}</Typography>
</Box>
<Box display="flex" flexDirection="column-reverse" flex={1}>
<Typography color="textPrimary">{email}</Typography>
</Box>
</Box>
);
};
export default MemberCard;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment