Added unplugged books to teacher resources page

frontend/src/components/ActivityBookList.tsx

@@ -56,16 +56,18 @@ function BookPreviewList({
   linkSuffix,
   loading,
   showPublished,
+  useOwnGrid,
 }: {
   pageBookData: Book[];
   linkPrefix: string;
   linkSuffix: string;
   loading: boolean;
   showPublished: boolean;
+  useOwnGrid: boolean;
 }) {
   const emptyBookData = Array.from({ length: 6 }, () => ({}));
-  return (
-    <ul className="flex-wrap gap-2 flex items-center justify-center">
+  const content = (
+    <>
       {!loading
         ? pageBookData.map((BookData: Book, i: number) => (
             <li key={`BookData-${i}`} className="pl-3">
@@ -88,8 +90,18 @@ function BookPreviewList({
               <LoadingBookPreview />
             </li>
           ))}
-    </ul>
+    </>
   );
+
+  if (useOwnGrid) {
+    return (
+      <ul className="flex-wrap gap-2 flex items-center justify-center">
+        {content}
+      </ul>
+    );
+  } else {
+    return content;
+  }
 }
 
 export default function ActivityBookList({
@@ -98,33 +110,44 @@ export default function ActivityBookList({
   linkSuffix,
   loading,
   showPublished,
-  isUnplugged,
+  useOwnGrid = true,
 }: {
   books: Book[];
   linkPrefix: string;
   linkSuffix: string;
   loading?: boolean;
   showPublished?: boolean;
-  isUnplugged?: boolean;
+  useOwnGrid?: boolean;
 }) {
-  return (
+  const content = (
     <>
-      <section className="p-2 mx-auto flex flex-wrap">
-        <BookPreviewList
-          pageBookData={books}
-          linkPrefix={linkPrefix}
-          linkSuffix={linkSuffix}
-          loading={loading === undefined ? false : loading}
-          showPublished={showPublished === undefined ? false : showPublished}
-        />
-      </section>
+      <BookPreviewList
+        pageBookData={books}
+        linkPrefix={linkPrefix}
+        linkSuffix={linkSuffix}
+        loading={loading === undefined ? false : loading}
+        showPublished={showPublished === undefined ? false : showPublished}
+        useOwnGrid={useOwnGrid}
+      />
     </>
   );
+
+  if (useOwnGrid) {
+    return <section className="p-2 mx-auto flex flex-wrap">{content}</section>;
+  } else {
+    return content;
+  }
 }
 
-export function BookPreviewUnplugged({ BookData }: { BookData: Array<any> }) {
-  return (
-    <div className="flex flex-wrap gap-4 justify-center">
+export function BookPreviewUnplugged({
+  BookData,
+  useOwnGrid = true,
+}: {
+  BookData: Array<any>;
+  useOwnGrid?: boolean;
+}) {
+  const content = (
+    <>
       {BookData.map((book, index) => (
         <div key={index} className="h-[325px] w-[275px] relative">
           <a
@@ -157,6 +180,12 @@ export function BookPreviewUnplugged({ BookData }: { BookData: Array<any> }) {
           </a>
         </div>
       ))}
-    </div>
+    </>
   );
+
+  if (useOwnGrid) {
+    return <div className="flex flex-wrap gap-4 justify-center">{content}</div>;
+  } else {
+    return content;
+  }
 }

frontend/src/pages/TeacherResources.tsx

@@ -4,7 +4,10 @@ import Background from "../components/Background";
 import PostPreview from "../components/PostPreview";
 import { useCallback, useEffect, useState } from "react";
 import { Book, BooksService } from "../api";
-import ActivityBookList from "../components/ActivityBookList";
+import ActivityBookList, {
+  BookPreviewUnplugged,
+} from "../components/ActivityBookList";
+import { unpluggedBooks } from "../util/UnpluggedBooks";
 
 export default function ActivityPostList() {
   const [results, setResults] = useState<Book[]>([]);
@@ -70,13 +73,20 @@ export default function ActivityPostList() {
           </ul>
         </section>
         <section className="w-full p-2 mt-2">
-          <h2 className="text-2xl">Books for Teachers</h2>
-          <ActivityBookList
-            books={results}
-            linkPrefix="/book/"
-            linkSuffix="/1"
-            loading={loading}
-          />
+          <h2 className="text-2xl mb-2 font-bold">Books for Teachers</h2>
+          <ul className="flex-wrap gap-2 flex items-center justify-center">
+            <BookPreviewUnplugged
+              BookData={unpluggedBooks}
+              useOwnGrid={false}
+            />
+            <ActivityBookList
+              books={results}
+              linkPrefix="/book/"
+              linkSuffix="/1"
+              loading={loading}
+              useOwnGrid={false}
+            />
+          </ul>
         </section>
       </div>
       <Footer />