Merge pull request #77 from GSG-G10/53-user-contact-card

53 user contact card

client/package.json

@@ -6,10 +6,12 @@
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.5",
     "@mui/material": "^5.0.4",
     "@mui/styles": "^5.0.2",
     "axios": "^0.23.0",
     "eslint-config-react-app": "^6.0.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",

client/src/App.js

@@ -8,5 +8,4 @@ function App() {
 
   );
 }
-
 export default App;

client/src/components/UserContacatCard/index.js

@@ -0,0 +1,87 @@
+import {
+  Card,
+  CardContent,
+  Typography,
+  Avatar,
+  colors,
+
+} from '@mui/material';
+import MdPhone from '@mui/icons-material/Phone';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import EmailIcon from '@mui/icons-material/Email';
+import { makeStyles } from '@mui/styles';
+import PropTypes from 'prop-types';
+
+const useStyles = makeStyles({
+  card: {
+    backgroundColor: 'secondary',
+    maxWidth: 345,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '10px',
+  },
+  icon: {
+    marginRight: '0.5rem',
+  },
+});
+const contentStyles = { display: 'flex', marginBottom: '15px', alignItems: 'center' };
+
+function UserContactCard({
+  data: {
+    name, phone, image, location, email,
+  },
+}) {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.card} style={{ backgroundColor: '#F1F1F1' }}>
+
+      <Avatar
+        sx={{ bgcolor: colors.green[500], width: 124.02, height: 129.66 }}
+        src={image}
+        variant="rounded"
+      />
+      <CardContent className={classes.card}>
+        <Typography gutterBottom variant="h5" component="div">
+          {name}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Building Owner
+        </Typography>
+        <Typography gutterBottom variant="h6" component="div">
+          Contact Info:
+        </Typography>
+
+        <Typography sx={contentStyles} variant="body2" color="text.secondary">
+          <LocationOnIcon className={classes.icon} />
+          {location}
+        </Typography>
+
+        <Typography sx={contentStyles} variant="body2" color="text.secondary">
+          <MdPhone className={classes.icon} />
+          {phone}
+        </Typography>
+
+        <Typography sx={contentStyles} variant="body2" color="text.secondary">
+          <EmailIcon className={classes.icon} />
+          {email}
+        </Typography>
+
+      </CardContent>
+    </Card>
+  );
+}
+
+UserContactCard.propTypes = {
+  data: PropTypes.shape({
+    image: PropTypes.string,
+    name: PropTypes.string,
+    location: PropTypes.string,
+    phone: PropTypes.string,
+    email: PropTypes.string,
+  }).isRequired,
+};
+
+export default UserContactCard;

package.json

@@ -30,7 +30,7 @@
     "joi": "^17.4.2",
     "jsonwebtoken": "^8.5.1",
     "pg": "^8.7.1"
-  },
+    },
   "devDependencies": {
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",