Merge pull request #10 from bluewave-labs/feat/button

feat/button

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, label, disabled }) => {
+  const { variant, color } = levelConfig[level];
+  return (
+    <MuiButton variant={variant} color={color} disabled={disabled}>
+      {label}
+    </MuiButton>
+  );
+};
+
+Button.propTypes = {
+  level: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+export default Button;

Client/src/Pages/Home/index.jsx

@@ -1,15 +1,33 @@
-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: "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>
+    </>
+  );
+};
 
-export default Home
+export default Home;

Client/src/index.css

@@ -70,4 +70,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+}