From f963ca6ae579ca1b9f899a25b977575d71487752 Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Sat, 16 Mar 2024 02:15:39 +0100
Subject: [PATCH] A component for listing an array of projects where every
project gets a link, made for YourProjectsPage.tsx
---
frontend/src/Components/ProjectListUser.tsx | 35 +++++++++++++++++++++
1 file changed, 35 insertions(+)
create mode 100644 frontend/src/Components/ProjectListUser.tsx
diff --git a/frontend/src/Components/ProjectListUser.tsx b/frontend/src/Components/ProjectListUser.tsx
new file mode 100644
index 0000000..0502159
--- /dev/null
+++ b/frontend/src/Components/ProjectListUser.tsx
@@ -0,0 +1,35 @@
+import { Link } from "react-router-dom";
+import { Project } from "../Types/Project";
+
+/**
+ * The props for the ProjectsProps component
+ */
+interface ProjectProps {
+ projects: Project[];
+}
+
+/**
+ * A list of projects for users, that links the user to the right project page
+ * thanks to the state property
+ * @param props - The projects to display
+ * @returns {JSX.Element} The project list
+ * @example
+ * const projects = [{ id: 1, name: "Random name" }];
+ * return <ProjectList projects={projects} />;
+ */
+
+export function ProjectListUser(props: ProjectProps): JSX.Element {
+ return (
+ <div>
+ <ul className="font-bold underline text-[30px] cursor-pointer">
+ {props.projects.map((project) => (
+ <Link to="/project" key={project.id} state={project.name}>
+ <li className="pt-5" key={project.id}>
+ {project.name}
+ </li>
+ </Link>
+ ))}
+ </ul>
+ </div>
+ );
+}