frontend/src/components/ContentWidget.jsx

@@ -0,0 +1,42 @@
+import { useContext, useEffect, useState } from "react";
+import { Card, Container } from "react-bootstrap";
+import { Link } from "wouter";
+import UserContext from "../contexts/UserContext";
+import { makeRequest } from "../utils.ts";
+
+const ContentWidget = ({ className = "", cid }) => {
+  const [contentData, setContentData] = useState([]);
+
+  useEffect(() => {
+    makeRequest({ endpoint: `course/${cid}/content` })
+      .then((resp) => resp.json())
+      .then((data) => {
+        setContentData(data.content);
+      });
+  }, [setContentData]);
+
+  return (
+    <Container className={`${className} py-3 grid`}>
+      <div className="row justify-content-center">
+        {contentData.map((content, i) => {
+          return (
+            <Link
+              is="a"
+              key={i}
+              href={`/content/${content.id}`}
+              className="col col-lg-2"
+            >
+              <Card role="button" className="m-2" style={{ width: "300px" }}>
+                <Card.Body>
+                  <Card.Title className="text-center">{content.name}</Card.Title>
+                </Card.Body>
+              </Card>
+            </Link>
+          );
+        })}
+      </div>
+    </Container>
+  );
+};
+
+export default ContentWidget;

frontend/src/pages/CoursePage.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { Container } from "react-bootstrap";
 import AssignmentsWidget from "../components/AssignmentsWidget";
+import ContentWidget from "../components/ContentWidget";
 import MyNavbar from "../components/MyNavbar";
 import { makeRequest } from "../utils.ts";
 
@@ -23,6 +24,9 @@ const CoursePage = ({ id }) => {
         <h4 className="mb-4">{courseData.instructor}</h4>
         <hr />
         <div className="border">
+          <h3>Course Content</h3>
+          <ContentWidget cid={id} />
+          <hr />
           <h3>Assignments</h3>
           <AssignmentsWidget cid={id} />
         </div>