Refactor

components/OrganizedContent.module.css

@@ -2,7 +2,7 @@
   display: flex; 
 }
 
-.contentHeading {
+.organizedContent h1 {
   font-size: 1.5rem;
   margin: 1rem 0 1rem 0;
   color: var(--blue-2);
@@ -35,7 +35,7 @@
   display: flex; 
 }
 
-.selectedHeading {
+.selectedHeadingArea > .navOption {
   color: var(--blue-2);
   font-weight: bold;
 }

components/OrganizedContent.tsx

@@ -27,58 +27,49 @@ interface ChildProps {
   link: Link;
 }
 
-export const OrganizedContent: React.FC<Props> = ({
+export const OrganizedContent = ({
   headings,
   currentIndex,
-  children,
   link: Link,
-}) => {
+  children,
+}: Props) => {
   const isReadAll = headings[currentIndex].name === "Read All";
-  const isMobile = false;
+
   const readAllContent = headings
     .filter((heading: { name: string }) => heading.name !== "Read All")
     .map((heading) => (
       <div key={heading.url}>
-        <h2 className={styles.contentHeading}>{heading.name}</h2>
+        <h1>{heading.name}</h1>
         {heading.content}
       </div>
     ));
 
-  if (isMobile) {
-    return (
-      <div>
-        {isReadAll ? (
-          <div>{readAllContent}</div>
-        ) : (
-          <h2 className={styles.contentHeading}>
-            {headings[currentIndex].name}
-          </h2>
-        )}
-        {children}
-        <Footer headings={headings} currentIndex={currentIndex} link={Link} />
-      </div>
-    );
-  } else {
+  const childProps: ChildProps = {
+    headings: headings,
+    currentIndex: currentIndex,
+    link: Link,
+  };
+
   return (
     <div className={styles.organizedContent}>
-        <Nav headings={headings} currentIndex={currentIndex} link={Link} />
+      <Nav {...childProps} />
       <div>
         {isReadAll ? (
-            <div>{readAllContent}</div>
+          <>{readAllContent}</>
         ) : (
-            <h2 className={styles.contentHeading}>
-              {headings[currentIndex].name}
-            </h2>
-          )}
+          <>
+            <h1>{headings[currentIndex].name}</h1>
             {children}
-          <Footer headings={headings} currentIndex={currentIndex} link={Link} />
+            <Footer {...childProps} />
+          </>
+        )}
       </div>
     </div>
   );
-  }
 };
 
-const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
+//todo push class to link
+const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
   return (
     <div className={styles.nav}>
       {headings.map((heading, index) => (
@@ -90,11 +81,7 @@ const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
             className={
               styles.navOption +
               " " +
-              (index === currentIndex
-                ? styles.selectedHeading
-                : heading.name === "Read All"
-                ? styles.readAll
-                : "")
+              (heading.name === "Read All" ? styles.readAll : "")
             }
           >
             {index === currentIndex && (
@@ -109,25 +96,20 @@ const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
   );
 };
 
-const Footer: React.FC<ChildProps> = ({
-  headings,
-  currentIndex,
-  link: Link,
-}) => {
-  const isReadAll = headings[currentIndex].name === "Read All";
+const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
   const prevHeading =
     currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
       ? headings[currentIndex - 1]
       : undefined;
   const nextHeading =
-    currentIndex < headings.length - 1 && !isReadAll
+    currentIndex < headings.length - 1 &&
+    headings[currentIndex + 1].name !== "Read All"
       ? headings[currentIndex + 1]
       : undefined;
 
   return (
     <div className={styles.footer}>
       {prevHeading && (
-        <div className={styles.clickable}>
         <Link url={prevHeading.url}>
           <div className={styles.footerSection}>
             <svg
@@ -145,11 +127,10 @@ const Footer: React.FC<ChildProps> = ({
             </div>
           </div>
         </Link>
-        </div>
       )}
+      {/* used to always push options to the edges with space-between */}
       <div></div>
       {nextHeading && (
-        <div className={styles.clickable}>
         <Link url={nextHeading.url}>
           <div className={styles.footerSection}>
             <div>
@@ -169,7 +150,6 @@ const Footer: React.FC<ChildProps> = ({
             </svg>
           </div>
         </Link>
-        </div>
       )}
     </div>
   );