From ce800ab433568acff3b8e6c7f9670e5cf83ff44b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bodor=20M=C3=A1t=C3=A9?= <bmate711@gmail.com>
Date: Sun, 7 Feb 2021 19:12:31 +0100
Subject: [PATCH] Create member card
---
src/components/MemberCard.tsx | 58 +++++++++++++++++++++++++++++++++++
1 file changed, 58 insertions(+)
create mode 100644 src/components/MemberCard.tsx
diff --git a/src/components/MemberCard.tsx b/src/components/MemberCard.tsx
new file mode 100644
index 0000000..e315489
--- /dev/null
+++ b/src/components/MemberCard.tsx
@@ -0,0 +1,58 @@
+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;
--
GitLab