From 7a820cffb1cd37c521b259a09c545c30d889106a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 7 May 2024 15:33:08 -0700
Subject: [PATCH] Added avatar component

---
 Client/src/Components/Avatar/Avatar.jsx       |  42 ++++++++++++++++++
 Client/src/Components/Avatar/avatar.css       |   0
 Client/src/Pages/Home/index.jsx               |  14 ++++++
 .../src/assets/Images/avatar_placeholder.png  | Bin 0 -> 5546 bytes
 4 files changed, 56 insertions(+)
 create mode 100644 Client/src/Components/Avatar/Avatar.jsx
 create mode 100644 Client/src/Components/Avatar/avatar.css
 create mode 100644 Client/src/assets/Images/avatar_placeholder.png

diff --git a/Client/src/Components/Avatar/Avatar.jsx b/Client/src/Components/Avatar/Avatar.jsx
new file mode 100644
index 000000000..d881de7bb
--- /dev/null
+++ b/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;
diff --git a/Client/src/Components/Avatar/avatar.css b/Client/src/Components/Avatar/avatar.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index f9a7cf14d..58c90ee8e 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -3,6 +3,8 @@ import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
 import Link from "../../Components/Link";
+import Avatar from "../../Components/Avatar/Avatar";
+import avatarImage from "../../assets/Images/avatar_placeholder.png";
 
 const Home = () => {
   return (
@@ -33,6 +35,18 @@ const Home = () => {
             url={"https://www.google.com"}
           />
         </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>
     </>
   );
diff --git a/Client/src/assets/Images/avatar_placeholder.png b/Client/src/assets/Images/avatar_placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..38e896811951f0ccf5799097a774793eddb644c1
GIT binary patch
literal 5546
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

literal 0
HcmV?d00001