From d355b556346606a105314a2e0f725d31aa889ac6 Mon Sep 17 00:00:00 2001
From: Mattias <mattias.rasmusson.1032@student.lu.se>
Date: Tue, 19 Mar 2024 21:59:37 +0100
Subject: [PATCH] Add UserProjectMenu component and refactor UserProjectPage

---
 frontend/src/Components/UserProjectMenu.tsx   | 25 +++++++++++++++++++
 .../src/Pages/UserPages/UserProjectPage.tsx   | 18 ++-----------
 2 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/Components/UserProjectMenu.tsx

diff --git a/frontend/src/Components/UserProjectMenu.tsx b/frontend/src/Components/UserProjectMenu.tsx
new file mode 100644
index 0000000..986b6e6
--- /dev/null
+++ b/frontend/src/Components/UserProjectMenu.tsx
@@ -0,0 +1,25 @@
+import { useParams, Link } from "react-router-dom";
+import { JSX } from "react/jsx-runtime";
+
+function UserProjectMenu(): JSX.Element {
+  const { projectName } = useParams();
+
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">{projectName}</h1>
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
+        <Link to={`/timeReports/${projectName}/`}>
+          <h1 className="font-bold underline text-[30px] cursor-pointer">
+            Your Time Reports
+          </h1>
+        </Link>
+        <Link to={`/newTimeReport/${projectName}`}>
+          <h1 className="font-bold underline text-[30px] cursor-pointer">
+            New Time Report
+          </h1>
+        </Link>
+      </div>
+    </>
+  );
+}
+export default UserProjectMenu;
diff --git a/frontend/src/Pages/UserPages/UserProjectPage.tsx b/frontend/src/Pages/UserPages/UserProjectPage.tsx
index 596c37d..b9578b4 100644
--- a/frontend/src/Pages/UserPages/UserProjectPage.tsx
+++ b/frontend/src/Pages/UserPages/UserProjectPage.tsx
@@ -1,25 +1,11 @@
-import { Link, useParams } from "react-router-dom";
 import BasicWindow from "../../Components/BasicWindow";
 import BackButton from "../../Components/BackButton";
+import UserProjectMenu from "../../Components/UserProjectMenu";
 
 function UserProjectPage(): JSX.Element {
-  const { projectName } = useParams();
-
   const content = (
     <>
-      <h1 className="font-bold text-[40px] mb-[20px]">{projectName}</h1>
-      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
-        <Link to={`/timeReports/${projectName}/`}>
-          <h1 className="font-bold underline text-[30px] cursor-pointer">
-            Your Time Reports
-          </h1>
-        </Link>
-        <Link to={`/newTimeReport/${projectName}`}>
-          <h1 className="font-bold underline text-[30px] cursor-pointer">
-            New Time Report
-          </h1>
-        </Link>
-      </div>
+      <UserProjectMenu />
     </>
   );