From 78509673cc643a55bf805744bc1f4805fdbc4a4a Mon Sep 17 00:00:00 2001
From: darkicewolf50 <brock.tomlinson@ucalgary.ca>
Date: Wed, 13 Mar 2024 14:27:07 -0600
Subject: [PATCH] change openpage to OpenPageButton

---
 src/Header/OpenPageButton.css |  3 +++
 src/Header/OpenPageButton.js  | 27 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/Header/OpenPageButton.css
 create mode 100644 src/Header/OpenPageButton.js

diff --git a/src/Header/OpenPageButton.css b/src/Header/OpenPageButton.css
new file mode 100644
index 0000000..342874f
--- /dev/null
+++ b/src/Header/OpenPageButton.css
@@ -0,0 +1,3 @@
+#navigateButton {
+	text-decoration: none;
+}
diff --git a/src/Header/OpenPageButton.js b/src/Header/OpenPageButton.js
new file mode 100644
index 0000000..025bd90
--- /dev/null
+++ b/src/Header/OpenPageButton.js
@@ -0,0 +1,27 @@
+import { useNavigate } from "react-router-dom";
+import "./OpenPageButton.css";
+
+/**
+ * @param {String} pageToGoTo -  The page that the button goes to
+ * @param {String} textOnButton - The Text tht will be on the button
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Button Template that moves you to the
+ * @author Brock <darkicewolf50@gmail.com>
+ * @todo refactor so that name is OpenPageButton, add css to the button
+ */
+const OpenPageButton = ({ pageToGoTo, textOnButton }) => {
+	const navigate = useNavigate();
+	const navigateTo = (param) => {
+		navigate(param);
+	};
+
+	return (
+		<button
+			id="navigateButton"
+			onClick={() => navigateTo(pageToGoTo)}>
+			{textOnButton}
+		</button>
+	);
+};
+
+export default OpenPageButton;