From b50717c88ff5297e505ad3a663622593c0b8f03d Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Fri, 8 Mar 2024 21:52:36 +0100
Subject: [PATCH] feat: projectcards for student first look done

---
 .../src/assets/styles/students_components.css | 19 ++++++++++++
 frontend/src/components/Header.tsx            |  2 +-
 frontend/src/pages/student/HomeStudent.tsx    | 16 ++++++++--
 .../src/pages/student/ProjectCardStudent.tsx  | 29 +++++++++++++++++++
 4 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/assets/styles/students_components.css
 create mode 100644 frontend/src/pages/student/ProjectCardStudent.tsx

diff --git a/frontend/src/assets/styles/students_components.css b/frontend/src/assets/styles/students_components.css
new file mode 100644
index 00000000..4f05acd9
--- /dev/null
+++ b/frontend/src/assets/styles/students_components.css
@@ -0,0 +1,19 @@
+.student-main {
+    width: 60vw;
+    flex-wrap: wrap;
+    overflow-y: scroll;
+}
+
+.project-card {
+    background-color: #9c9afd !important;
+    width: 25vw;
+    height: 25vh;
+}
+
+.p-negative {
+    color: red !important;
+}
+
+.p-positive {
+    color: green !important;
+}
\ No newline at end of file
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 7c900e71..96584f90 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -5,7 +5,7 @@ export function Header(): JSX.Element {
     return (
         <nav className={"main-nav is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center"}>
             <img src={"/delphi_favicon_circle.png"} alt={"image"}/>
-            <p className={"is-align-self-center"}><p>Project</p></p>
+            <p className={"is-align-self-center"}><p>Home</p></p>
             <button className={"button mx-2 is-transparent"}>
                 <div className={"icon-text"}>
                     <p>Username</p>
diff --git a/frontend/src/pages/student/HomeStudent.tsx b/frontend/src/pages/student/HomeStudent.tsx
index 47d6c2a0..e4ab35e5 100644
--- a/frontend/src/pages/student/HomeStudent.tsx
+++ b/frontend/src/pages/student/HomeStudent.tsx
@@ -1,6 +1,8 @@
 import {JSX} from "react";
 import {Header} from "../../components/Header.tsx";
 import {Sidebar} from "../../components/Sidebar.tsx";
+import ProjectCardStudent from "./ProjectCardStudent.tsx";
+import '../../assets/styles/students_components.css'
 
 export default function HomeStudent(): JSX.Element {
     return (
@@ -12,8 +14,18 @@ export default function HomeStudent(): JSX.Element {
                 <div className={"side-bar is-flex is-justify-content-center"}>
                     <Sidebar/>
                 </div>
-                <div>
-                    <>Homescreen for a student</>
+                <div className={"student-main px-5 py-5 mx-5 my-5 is-flex is-justify-content-space-evenly"}>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
                 </div>
             </div>
         </>
diff --git a/frontend/src/pages/student/ProjectCardStudent.tsx b/frontend/src/pages/student/ProjectCardStudent.tsx
new file mode 100644
index 00000000..b960a38b
--- /dev/null
+++ b/frontend/src/pages/student/ProjectCardStudent.tsx
@@ -0,0 +1,29 @@
+import {JSX} from "react";
+
+
+export default function ProjectCardStudent(): JSX.Element {
+    // as for now I'm not sure how the info will come in, so using
+    // static values for now (change to true and true/false to see how they'll look like):
+    let has_submission: boolean = false;
+    let isSuccess: boolean = false;
+
+    return (
+        <div
+            className={"card project-card px-5 py-5 my-5 is-flex is-flex-direction-column is-justify-content-space-between"}>
+            <p className={"title is-5"}>Markov Decision Diagram</p>
+            <div className={"is-flex is-flex-direction-row"}>
+                <p className={"pr-2"}>vak: </p>
+                <p>Computationele Biologie</p>
+            </div>
+            <div className={"is-flex is-flex-direction-row is-align-items-center py-5"}>
+                <p className={"pr-2"}>status: </p>
+                {!has_submission && <p className={"px-2 py-1"}>—</p>}
+                {has_submission && isSuccess && <p className={"card p-positive px-2 py-1"}>Success</p>}
+                {has_submission && !isSuccess && <p className={"card p-negative px-2 py-1"}>Failed</p>}
+            </div>
+        </div>
+    )
+}
+
+
+