From 7ff010ef5cc872a1640231ee45631523b22404dd Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 6 May 2024 12:24:03 -0700
Subject: [PATCH 1/3] Added button component

---
 Client/src/Components/Button/index.css |  0
 Client/src/Components/Button/index.jsx | 45 ++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 Client/src/Components/Button/index.css
 create mode 100644 Client/src/Components/Button/index.jsx

diff --git a/Client/src/Components/Button/index.css b/Client/src/Components/Button/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
new file mode 100644
index 000000000..b9a4d7e14
--- /dev/null
+++ b/Client/src/Components/Button/index.jsx
@@ -0,0 +1,45 @@
+import { Button as MuiButton } from "@mui/material";
+import PropTypes from "prop-types";
+
+const levelConfig = {
+  primary: {
+    variant: "contained",
+    color: "primary",
+  },
+  secondary: {
+    variant: "outlined",
+    color: "secondary",
+  },
+  tertiary: {
+    variant: "text",
+    color: "tertiary",
+  },
+  error: {
+    variant: "contained",
+    color: "error",
+  },
+};
+
+/**
+ * @typedef {Object} Props
+ * @property {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the button
+ * @property {string} label - The label of the button
+ * @property {boolean} [disabled] - Whether the button is disabled
+ */
+
+const Button = ({ level, value, disabled }) => {
+  const { variant, color } = levelConfig[level];
+  return (
+    <MuiButton variant={variant} color={color} disabled={disabled}>
+      {value}
+    </MuiButton>
+  );
+};
+
+Button.propTypes = {
+  level: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+export default Button;

From 6533dd1132e1d12d6a7469c1016a687d1248e7de Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 6 May 2024 12:27:48 -0700
Subject: [PATCH 2/3] Added button examples to home page

---
 Client/src/Pages/Home/index.jsx | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index f1c6a947c..d6874d5ea 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -1,15 +1,23 @@
-import React from 'react'
-import DropdownTeamMember from '../../Components/DropdownTeamMember'
-import './index.css'
-
+import React from "react";
+import DropdownTeamMember from "../../Components/DropdownTeamMember";
+import "./index.css";
+import Button from "../../Components/Button";
 
 const Home = () => {
-    return (
-        <>
-            <div>Home</div>
-            <DropdownTeamMember />
-        </>
-    )
-}
+  return (
+    <>
+      <div>Home</div>
+      <DropdownTeamMember />
+      <div style={{ display: "flex", flexDirection: "flex-column" }}>
+        <div>
+          <Button level="primary" label="Primary" />
+          <Button level="secondary" label="Secondary" />
+          <Button level="tertiary" label="Tertiary" />
+          <Button level="error" label="Error" />
+        </div>
+      </div>
+    </>
+  );
+};
 
-export default Home
\ No newline at end of file
+export default Home;

From e333a8fdc88ac553a4cc69e0cb7f08288c15569a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 6 May 2024 12:34:36 -0700
Subject: [PATCH 3/3] Changed value prop name to label for button label.  Added
 sample buttons to home page

---
 Client/src/Components/Button/index.jsx |  6 +++---
 Client/src/Pages/Home/index.jsx        | 12 +++++++++++-
 Client/src/index.css                   |  2 +-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index b9a4d7e14..f357e1dd2 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -27,18 +27,18 @@ const levelConfig = {
  * @property {boolean} [disabled] - Whether the button is disabled
  */
 
-const Button = ({ level, value, disabled }) => {
+const Button = ({ level, label, disabled }) => {
   const { variant, color } = levelConfig[level];
   return (
     <MuiButton variant={variant} color={color} disabled={disabled}>
-      {value}
+      {label}
     </MuiButton>
   );
 };
 
 Button.propTypes = {
   level: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
 };
 
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index d6874d5ea..849489ff8 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -8,13 +8,23 @@ const Home = () => {
     <>
       <div>Home</div>
       <DropdownTeamMember />
-      <div style={{ display: "flex", flexDirection: "flex-column" }}>
+      <div
+        style={{ display: "flex", flexDirection: "column", marginTop: "2rem" }}
+      >
+        <h4>Buttons</h4>
         <div>
           <Button level="primary" label="Primary" />
           <Button level="secondary" label="Secondary" />
           <Button level="tertiary" label="Tertiary" />
           <Button level="error" label="Error" />
         </div>
+        <h4>Disabled Buttons</h4>
+        <div>
+          <Button level="primary" label="Primary" disabled />
+          <Button level="secondary" label="Secondary" disabled />
+          <Button level="tertiary" label="Tertiary" disabled />
+          <Button level="error" label="Error" disabled />
+        </div>
       </div>
     </>
   );
diff --git a/Client/src/index.css b/Client/src/index.css
index d761fd0ba..18aa9a223 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -70,4 +70,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
\ No newline at end of file
+}