A component for listing an array of projects where every project gets a link, made for YourProjectsPage.tsx

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>
+  );
+}