Add styling to OrganizedContent

Also fixes props interface

components/OrganizedContent.module.css

@@ -1,6 +1,85 @@
-.organizedcontent {
-  background-color: rgb(78, 212, 178, 0.2);
-  color: var(--purple-2);
-  display:flex; 
-  flex-direction:row;
+.organizedContent {
+  display: flex; 
+}
+
+.contentHeading {
+  margin: 1rem 0 1rem 0;
+  color: var(--blue-2);
+}
+
+.nav {
+  margin: 1rem 2rem 0 0.5rem;
+}
+
+.navOption {
+  width: max-content;
+  padding: 0.5rem 2rem 0.5rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.divider {
+  border-bottom: 1px solid var(--blue-2);
+  opacity: 0.25;
+  width: '100%',
+}
+
+.footer {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.footerSection {
+  display: flex; 
+}
+
+.selectedHeading {
+  color: var(--blue-2);
+  font-weight: bold;
+}
+
+.selectedHeadingArea {
+  background-color: rgba(92, 175, 249, 0.05);
+}
+
+.readAll {
+  font-weight: bold;
+}
+
+.arrowHeading {
+  color: var(--blue-2);
+  font-size: 0.875rem;
+  font-weight: bold;
+  text-decoration: underline;
+  text-underline-offset: 0.5rem;
+  text-decoration-thickness: 0.1rem;
+}
+
+.prevNext {
+  font-size: 0.75rem;
+}
+
+.nextText {
+  text-align: end;
+}
+
+.arrow {
+  fill: var(--blue-2);
+  margin-top: 1.7rem;
+}
+
+.prevArrow {
+  transform: rotate(90deg);
+  padding-right: 0.5rem;
+  
+}
+
+.nextArrow {
+  transform: rotate(270deg);
+  padding-left: 0.5rem;
+}
+
+.footerSection {
+  cursor: pointer;
+  display: flex; 
 }

components/OrganizedContent.tsx

@@ -27,35 +27,79 @@ export const OrganizedContent: React.FC<Props> = ({
   children,
   link: Link,
 }) => {
-  const prevHeading = currentIndex > 0 ? headings[currentIndex - 1] : undefined;
+  const isReadAll = headings[currentIndex].name === "Read All"
+  const prevHeading = currentIndex > 0 && headings[currentIndex - 1].name !== "Read All" ? headings[currentIndex - 1] : undefined;
   const nextHeading =
-    currentIndex < headings.length - 1 ? headings[currentIndex + 1] : undefined;
+    currentIndex < headings.length - 1 && !isReadAll ? headings[currentIndex + 1] : undefined;
 
   return (
-    <div className={styles.organizedcontent}>
-      <div>
+    <div className={styles.organizedContent}>
+      <div className={styles.nav}>
         {headings.map((heading, index) => (
-          <h3>
-            <Link url={heading.url}>{heading.name}</Link>
-          </h3>
+          <div className={index === currentIndex ? styles.selectedHeadingArea : ''}>
+            <div className={styles.navOption + ' ' + (index === currentIndex ? styles.selectedHeading : 
+            heading.name === "Read All" ? styles.readAll : '')}
+            key={heading.url}>
+              <Link url={heading.url}>{heading.name}</Link>
+            </div>
+            <div className={styles.divider}></div>
+          </div>
         ))}
       </div>
 
       <div>
-        <h3>{headings[currentIndex].name}</h3>
+        {!isReadAll && 
+          <h2 className={styles.contentHeading}>{headings[currentIndex].name}</h2>}
         {children}
-        {prevHeading && (
-          <Link url={prevHeading.url}>
-            Previous
-            {prevHeading.name}
-          </Link>
-        )}
-        {nextHeading && (
-          <Link url={nextHeading.url}>
-            Next
-            {nextHeading.name}
-          </Link>
-        )}
+        <div className={styles.footer}>
+          {prevHeading && (
+            <div className={styles.clickable}>
+              <Link url={prevHeading.url}>
+                <div className={styles.footerSection}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="9"
+                    viewBox="0 0 14 9"
+                    className={styles.arrow + ' ' + styles.prevArrow}
+                  >
+                    <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"
+                    />
+                  </svg>
+                  <div>
+                    <div className={styles.prevNext}>Previous</div>
+                    <div className={styles.arrowHeading}>{prevHeading.name}</div>
+                  </div>
+                </div>
+              </Link>
+            </div>
+          )}
+          <div></div>
+          {nextHeading && (
+            <div className={styles.clickable}>
+              <Link url={nextHeading.url}>
+                <div className={styles.footerSection}>
+                  <div>
+                    <div className={styles.prevNext + ' ' + styles.nextText}>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}
+                  >
+                    <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"
+                    />
+                  </svg>
+                </div>
+              </Link>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

components/playground.tsx

@@ -54,25 +54,43 @@ export function MiniEventCardDemo() {
 export function OrganizedContentDemo() {
   let sections = [
     {
-      name: "Heading1",
+      name: "1. Name",
       url: "a",
-      content: <div> Hello World! 1</div>,
+      key: "a",
+      content: <div> 1. The name of this organization shall be the "Computer Science Club of the University of Waterloo".</div>,
     },
     {
-      name: "Heading2",
+      name: "2. Purpose",
       url: "b",
-      content: <div> Hello World! 2</div>,
+      key: "b",
+      content: <div> The Club is organized and will be operated exclusively for educational and scientific purposes in furtherance of:
+      promoting an increased knowledge of computer science and its applications;
+      promoting a greater interest in computer science and its applications; and
+      providing a means of communication between persons having interest in computer science.
+      The above purposes will be fulfilled by the organization of discussions and lectures with professionals and academics in the field of computer science and related fields, the maintenance of a library of materials related to computer science, the maintenance of an office containing the library as an aid to aim (1.3) above, and such other means as decided by the club membership.</div>,
     },
     {
-      name: "Heading3",
+      name: "3. Membership",
       url: "c",
-      content: <div> Hello World! 3</div>,
+      key: "c",
+      content: <div> In compliance with MathSoc regulations and in recognition of the club being primarily targeted at undergraduate students, full membership is open to all Social Members of the Mathematics Society and restricted to the same.
+      Affiliate membership in this Club shall be open to all members of the University community, including alumni. Affiliate members shall have all the rights of full members except for the rights of voting and holding executive office.
+      Membership shall be accounted for on a termly basis, where a term begins at the start of lectures in Winter or Spring, and at the start of Orientation Week in Fall.
+      A person is not a member until he or she has paid the current membership fee and has been enrolled in the member database. The termly membership fee is set from time to time by the Executive. Under conditions approved by the Executive, a member who purchases a membership at the end of the current term may be given membership for both the current term and the next term. If the membership fee changes, then this does not affect the validity of any membership terms already paid for.
+      The Club may grant access to its systems, either free of charge or for a fee, to members of the University community in order to offer them services. This does not constitute membership.</div>,
+    },
+    {
+      name: "Consequences of Unacceptable Behavior",
+      url: "d",
+      key: "d",
+      content: <div> CODEY </div>,
     },
   ];
 
   const readAllSection = {
-    name: "Read all",
+    name: "Read All",
     url: "readall",
+    key: "readall",
     content: <>{sections.map((section => section.content))}</>
   }
 
@@ -83,6 +101,7 @@ export function OrganizedContentDemo() {
   function FakeLink({ url, children }: LinkProps) {
     return (
       <div
+        key={url}
         onClick={() => {
           const target = sections.findIndex((section) => section.url === url);
 

pages/_app.css

@@ -12,7 +12,7 @@ body {
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
   --blue-1: #5caff9;
-  --blue-2: #5caff9;
+  --blue-2: #1482E3;
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --gradient-blue-green: linear-gradient(
@@ -27,7 +27,7 @@ body {
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
   --blue-1: #5caff9;
-  --blue-2: #5caff9;
+  --blue-2: #1482E3;
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --gradient-blue-green: linear-gradient(