Vf 90 mine soknader (#263)

* Lag routing til profilside

* Lag profil komponent og legg til under /profil/:id

* lint errors

* fiks index.ts feil

* fiks bildelink

* Lag mine søknaderside og profilinfo

* Lag søknaderkomponent

* fiks linterrors

* Fiks header posisjon

* fiks merge

---------

Co-authored-by: mauricew <[email protected]>

src/App.tsx

@@ -12,6 +12,7 @@ import MainPage from "pages/public";
 import ControlPanel from "pages/controlpanel";
 import Profil from "pages/public/Profil/components/Profil";
 import Utlegg from "pages/public/User/Utlegg";
+import MineSoknader from "pages/public/MineSoknader";
 import appRoutes from "./pages/public/routes";
 import controlPanelRoutes from "./pages/controlpanel/routes";
 
@@ -46,9 +47,14 @@ const routes = createBrowserRouter([
             path: "profil/:id",
             element: <Profil />,
           },
+          {
+            path: "mine-soknader/:id",
+            element: <MineSoknader />,
+          },
         ],
       },
-      { path: "/utlegg", element: <Utlegg /> }],
+      { path: "/utlegg", element: <Utlegg /> },
+    ],
   },
 ]);
 

src/components/Header/UserAvatar.tsx

@@ -21,10 +21,14 @@ const UserAvatar = () => {
           </Link>
         </li>
         <li>
-          <a href="#0">Mine søknader</a>
+          <Link reloadDocument to="/mine-soknader/1">
+            Mine Søknader
+          </Link>
         </li>
         <li>
-          <Link reloadDocument to="/utlegg">Mine utlegg</Link>
+          <Link reloadDocument to="/utlegg">
+            Mine utlegg
+          </Link>
         </li>
         <li className="text-red-500">
           <a href="#0">Logg ut</a>

src/pages/public/MineSoknader/components/Applications.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+interface ApplicationProps {
+  applications: Application[];
+}
+
+interface Application {
+  role: string;
+  status: string;
+  expectedAction: string;
+}
+
+const Applications = ({ applications }: ApplicationProps) => {
+  return (
+    <div className="flex flex-col justify-center mt-2">
+      {applications.map((application) => {
+        return (
+          <div className="border-2 border-gray-200 shadow-md mt-4 max-w-lg mx-4 p-2 rounded-sm">
+            <h1 className="text-2xl font-medium text-vektor-darblue mt-2">
+              {application.role}
+            </h1>
+            <p className="text-gray-600 text-m font-medium mt-2">
+              <span className="font-bold">Status:</span>
+              {" "}
+              {application.status}
+            </p>
+            <p className="text-gray-600 text-m font-medium my-2">
+              <span className="font-bold">Forventet Handling:</span>
+              {" "}
+              {application.expectedAction}
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Applications;

src/pages/public/MineSoknader/components/MineSoknader.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import ProfileModal from "./ProfileModal";
+import Applications from "./Applications";
+
+const MineSoknader = (): JSX.Element => {
+  return (
+    <div className="flex justify-center mb-10 w-full">
+      <div className="col-12 text-center">
+        <h1 className="text-4xl font-medium text-vektor-darblue pb-2 pt-4 md:mt-0 mt-14">
+          Mine Søknader
+        </h1>
+        <ProfileModal
+          imgUrl="https://vektorprogrammet.no/media/cache/profile_img/images/Profile%20photos/644805d1e8ef2.jpeg"
+          name="Aaryan Neupan"
+        />
+        <Applications
+          applications={[
+            {
+              role: "IT-leder Høst 2024",
+              status: "Avslått",
+              expectedAction:
+                "Ingen videre handling er nødvendig. Du vil ikke bli leder for IT høsten 2024.",
+            },
+            {
+              role: "Vektorassistent Høst 2023",
+              status: "Under vurdering",
+              expectedAction: "Vente på svar",
+            },
+            {
+              role: "Vektorassistent Vår 2022",
+              status: "Innvilget",
+              expectedAction: "Vente på mail med videre informasjon",
+            },
+          ]}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MineSoknader;

src/pages/public/MineSoknader/components/ProfileModal.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface ProfileModalProps {
+  imgUrl: string;
+  name: string;
+}
+
+const ProfileModal = ({ imgUrl, name }: ProfileModalProps): JSX.Element => {
+  return (
+    <div>
+      <div className="flex justify-center">
+        <img
+          src={imgUrl}
+          alt="Aaryan"
+          className="max-w-sm mt-2 rounded-full w-1/2"
+        />
+      </div>
+      <p className=" text-gray-600 text-m font-medium mt-2">
+        Du er logget inn som
+      </p>
+      <h2 className="text-2xl font-medium text-vektor-darblue pb-2">{name}</h2>
+    </div>
+  );
+};
+
+export default ProfileModal;

src/pages/public/MineSoknader/index.ts

@@ -0,0 +1,3 @@
+import MineSoknader from "./components/MineSoknader";
+
+export default MineSoknader;