Demo of components with children and other props

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

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