Add ReadAll functionality

components/OrganizedContent.tsx

@@ -2,22 +2,22 @@ import React, { ReactNode, ComponentType } from "react";
 import styles from "./OrganizedContent.module.css";
 
 export interface LinkProps {
-  children: string | ReactNode | (string | ReactNode)[]
+  children: string | ReactNode | (string | ReactNode)[];
-  url: string
+  url: string;
 }
 
-type Link = ComponentType<LinkProps>
+type Link = ComponentType<LinkProps>;
-
 
 interface Heading {
   name: string;
   url: string;
+  content: ReactNode;
 }
 
 interface Props {
   headings: Heading[];
   currentIndex: number;
-  link: Link
+  link: Link;
   children: ReactNode;
 }
 
@@ -27,18 +27,34 @@ export const OrganizedContent: React.FC<Props> = ({
   children,
   link: Link,
 }) => {
-  const isReadAll = headings[currentIndex].name === "Read All"
+  const isReadAll = headings[currentIndex].name === "Read All";
-  const prevHeading = currentIndex > 0 && headings[currentIndex - 1].name !== "Read All" ? headings[currentIndex - 1] : undefined;
+  const prevHeading =
+    currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
+      ? headings[currentIndex - 1]
+      : undefined;
   const nextHeading =
-    currentIndex < headings.length - 1 && !isReadAll ? headings[currentIndex + 1] : undefined;
+    currentIndex < headings.length - 1 && !isReadAll
+      ? headings[currentIndex + 1]
+      : undefined;
 
   return (
     <div className={styles.organizedContent}>
       <div className={styles.nav}>
         {headings.map((heading, index) => (
-          <div className={index === currentIndex ? styles.selectedHeadingArea : ''} key={heading.url}>
+          <div
-            <div className={styles.navOption + ' ' + (index === currentIndex ? styles.selectedHeading : 
+            className={index === currentIndex ? styles.selectedHeadingArea : ""}
-            heading.name === "Read All" ? styles.readAll : '')}
+            key={heading.url}
+          >
+            <div
+              className={
+                styles.navOption +
+                " " +
+                (index === currentIndex
+                  ? styles.selectedHeading
+                  : heading.name === "Read All"
+                  ? styles.readAll
+                  : "")
+              }
             >
               <Link url={heading.url}>{heading.name}</Link>
             </div>
@@ -48,8 +64,24 @@ export const OrganizedContent: React.FC<Props> = ({
       </div>
 
       <div>
-        {!isReadAll && 
+        {!isReadAll ? (
-          <h2 className={styles.contentHeading}>{headings[currentIndex].name}</h2>}
+          <h2 className={styles.contentHeading}>
+            {headings[currentIndex].name}
+          </h2>
+        ) : (
+          <div>
+            {headings
+              .filter(
+                (heading: { name: string }) => heading.name !== "Read All"
+              )
+              .map((heading) => (
+                <div key={heading.url}>
+                  <h2 className={styles.contentHeading}>{heading.name}</h2>
+                  {heading.content}
+                </div>
+              ))}
+          </div>
+        )}
         {children}
         <div className={styles.footer}>
           {prevHeading && (
@@ -61,15 +93,15 @@ export const OrganizedContent: React.FC<Props> = ({
                     width="14"
                     height="9"
                     viewBox="0 0 14 9"
-                    className={styles.arrow + ' ' + styles.prevArrow}
+                    className={styles.arrow + " " + styles.prevArrow}
                   >
-                    <path
+                    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
-                      d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
-                    />
                   </svg>
                   <div>
                     <div className={styles.prevNext}>Previous</div>
-                    <div className={styles.arrowHeading}>{prevHeading.name}</div>
+                    <div className={styles.arrowHeading}>
+                      {prevHeading.name}
+                    </div>
                   </div>
                 </div>
               </Link>
@@ -81,19 +113,21 @@ export const OrganizedContent: React.FC<Props> = ({
               <Link url={nextHeading.url}>
                 <div className={styles.footerSection}>
                   <div>
-                    <div className={styles.prevNext + ' ' + styles.nextText}>Next</div>
+                    <div className={styles.prevNext + " " + styles.nextText}>
-                    <div className={styles.arrowHeading}>{nextHeading.name}</div>
+                      Next
+                    </div>
+                    <div className={styles.arrowHeading}>
+                      {nextHeading.name}
+                    </div>
                   </div>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="14"
                     height="9"
                     viewBox="0 0 14 9"
-                    className={styles.arrow + ' ' + styles.nextArrow}
+                    className={styles.arrow + " " + styles.nextArrow}
                   >
-                    <path
+                    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
-                      d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
-                    />
                   </svg>
                 </div>
               </Link>

components/playground.tsx

@@ -116,7 +116,6 @@ export function OrganizedContentDemo() {
     {
       name: "Consequences of Unacceptable Behavior",
       url: "d",
-      key: "d",
       content: <div> CODEY </div>,
     },
   ];
@@ -124,8 +123,7 @@ export function OrganizedContentDemo() {
   const readAllSection = {
     name: "Read All",
     url: "readall",
-    key: "readall",
+    content: <div> </div>,
-    content: <div> CODEY FAN CLUB </div>,
   };
 
   sections = [readAllSection, ...sections];