From 731cb8424480649084a2d4d8ac4bcaa3e138e101 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 6 May 2024 14:58:26 -0700
Subject: [PATCH] Added a link component, currently only have tertiary style

---
 Client/src/Components/Link/index.css |  0
 Client/src/Components/Link/index.jsx | 47 ++++++++++++++++++++++++++++
 Client/src/Pages/Home/index.jsx      |  8 +++++
 Client/src/Utils/Theme.js            |  2 ++
 4 files changed, 57 insertions(+)
 create mode 100644 Client/src/Components/Link/index.css
 create mode 100644 Client/src/Components/Link/index.jsx

diff --git a/Client/src/Components/Link/index.css b/Client/src/Components/Link/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/Link/index.jsx b/Client/src/Components/Link/index.jsx
new file mode 100644
index 000000000..e8d26a7c7
--- /dev/null
+++ b/Client/src/Components/Link/index.jsx
@@ -0,0 +1,47 @@
+import { Link as MuiLink, useTheme } from "@mui/material";
+import PropTypes from "prop-types";
+
+const Link = ({ level, label, url }) => {
+  const theme = useTheme();
+
+  const levelConfig = {
+    primary: {},
+    secondary: {},
+    tertiary: {
+      color: theme.palette.tertiary.main,
+      sx: {
+        textDecoration: "underline",
+        textDecorationStyle: "dashed",
+        textDecorationColor: theme.palette.primary.main,
+        ":hover": {
+          color: theme.palette.tertiary.main,
+          textDecorationColor: theme.palette.primary.main,
+          backgroundColor: theme.palette.tertiary.linkHover,
+        },
+      },
+    },
+    error: {},
+  };
+
+  /**
+   * @typedef {Object} Props
+   * @property {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the link
+   * @property {string} label - The label of the link
+   * @property {string} url - The URL of the link
+   */
+
+  const { sx, color } = levelConfig[level];
+  return (
+    <MuiLink href={url} sx={sx} color={color}>
+      {label}
+    </MuiLink>
+  );
+};
+
+Link.propTypes = {
+  url: PropTypes.string.isRequired,
+  level: PropTypes.oneOf(["primary", "secondary", "tertiary", "error"]),
+  label: PropTypes.string.isRequired,
+};
+
+export default Link;
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index 849489ff8..f9a7cf14d 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
+import Link from "../../Components/Link";
 
 const Home = () => {
   return (
@@ -25,6 +26,13 @@ const Home = () => {
           <Button level="tertiary" label="Tertiary" disabled />
           <Button level="error" label="Error" disabled />
         </div>
+        <div>
+          <Link
+            level="tertiary"
+            label="Tertiary Link"
+            url={"https://www.google.com"}
+          />
+        </div>
       </div>
     </>
   );
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index 5ad9df5c8..60e6da3ad 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -3,6 +3,7 @@ import { createTheme } from "@mui/material";
 // Colors for MUI theme
 const secondaryMain = "#475467";
 const tertiaryMain = "#475467";
+const tertiaryLinkHover = "#eff8ff";
 
 const theme = createTheme({
   palette: {
@@ -11,6 +12,7 @@ const theme = createTheme({
     },
     tertiary: {
       main: tertiaryMain,
+      linkHover: tertiaryLinkHover,
     },
   },
 });