From dcd9879d8d10ce1acd1d1b7bfc34f15ef8843dfa Mon Sep 17 00:00:00 2001
From: Imbus <>
Date: Wed, 6 Mar 2024 11:14:57 +0100
Subject: [PATCH] Demo of components with children and other props

---
 frontend/src/Components/TaskList.tsx      | 36 +++++++++++++++++++++++
 frontend/src/Containers/ContainerDemo.tsx | 24 +++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 frontend/src/Components/TaskList.tsx
 create mode 100644 frontend/src/Containers/ContainerDemo.tsx

diff --git a/frontend/src/Components/TaskList.tsx b/frontend/src/Components/TaskList.tsx
new file mode 100644
index 0000000..1e9cb76
--- /dev/null
+++ b/frontend/src/Components/TaskList.tsx
@@ -0,0 +1,36 @@
+/**
+ * The shape of a task
+ */
+interface Task {
+  id: number;
+  name: string;
+}
+
+/**
+ * The props for the TaskList component
+ */
+interface TaskProps {
+  tasks: Task[];
+}
+
+/**
+ * A simple list of tasks
+ * @param props - The tasks to display
+ * @returns {JSX.Element} The task list
+ * @example
+ * const tasks = [{ id: 1, name: "Do the thing" }];
+ * return <TaskList tasks={tasks} />;
+ */
+export function TaskList(props: TaskProps): JSX.Element {
+  return (
+    <div>
+      <h1>Task List</h1>
+      <p>Tasks go here</p>
+      <ul>
+        {props.tasks.map((task) => (
+          <li key={task.id}>{task.name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/frontend/src/Containers/ContainerDemo.tsx b/frontend/src/Containers/ContainerDemo.tsx
new file mode 100644
index 0000000..ac1cfc6
--- /dev/null
+++ b/frontend/src/Containers/ContainerDemo.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+/** The props for the container */
+interface ContainerProps {
+  children: ReactNode;
+}
+
+/**
+ * Contains children
+ * @param props - The children to contain
+ * @returns {JSX.Element} The container
+ */
+export function Container(props: ContainerProps): JSX.Element {
+  return <div>{props.children}</div>;
+}
+
+/**
+ * Contains even more children
+ * @param props
+ * @returns {JSX.Element}
+ */
+export function Container2(props: ContainerProps): JSX.Element {
+  return <Container>{props.children}</Container>;
+}