Merge pull request #15 from bluewave-labs/feat/avatar

Feat/avatar

Client/src/Components/Avatar/Avatar.jsx

@@ -0,0 +1,42 @@
+import { Avatar as MuiAvatar } from "@mui/material";
+import PropTypes from "prop-types";
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.src - Path to image for avatar
+ * @param {string} props.firstName - The users first name
+ * @param {string} props.lastName - The users last name
+ * @param {boolean} props.small - Specifies if avatar should be large
+ * @returns {JSX.Element}
+ * @example
+ * // Render a red label
+ * <Avatar src="assets/img" first="Alex" last="Holliday" small />
+ */
+
+const Avatar = ({ src, firstName, lastName, small }) => {
+  const borderColor = "#F0F2F4";
+  const smallStyle = small ? { width: 32, height: 32 } : {};
+  return (
+    <MuiAvatar
+      alt={`${firstName} ${lastName}`}
+      src={src}
+      sx={{
+        display: "inline-flex",
+        border: `0.2rem solid ${borderColor}`,
+        ...smallStyle,
+      }}
+    >
+      {src === undefined ? `${firstName[0]}${lastName[0]}` : null}
+    </MuiAvatar>
+  );
+};
+
+Avatar.propTypes = {
+  src: PropTypes.string,
+  firstName: PropTypes.string.isRequired,
+  lastName: PropTypes.string.isRequired,
+  small: PropTypes.bool,
+};
+
+export default Avatar;

Client/src/Pages/Home/index.jsx

@@ -5,6 +5,8 @@ import Link from "../../Components/Link";
 import ColoredLabel from "../../Components/Label/ColoredLabel";
 import { useTheme } from "@mui/material";
 import StatusLabel from "../../Components/Label/StautsLabel";
+import Avatar from "../../Components/Avatar/Avatar";
+import avatarImage from "../../assets/Images/avatar_placeholder.png";
 
 const Home = () => {
   const theme = useTheme();
@@ -49,6 +51,18 @@ const Home = () => {
           <StatusLabel status="New" />
           <StatusLabel status="Active" />
         </div>
+        <h4>Avatar</h4>
+        <div style={{ display: "flex" }}>
+          <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" />
+          <Avatar firstName="Alex" lastName="Holliday" />
+          <Avatar
+            src={avatarImage}
+            firstName="Alex"
+            lastName="Holliday"
+            small
+          />
+          <Avatar firstName="Alex" lastName="Holliday" small />
+        </div>
       </div>
     </>
   );