Add Sections Component (#49)

Closes #43.

Will look better when !46 is merged in.

https://j285he-sections-csc-class-profile-staging-snedadah.k8s.csclub.cloud/playground/
Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: #49
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>

components/About.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import styles from "./About.module.css";
 
-export default function About() {
+export function About() {
   return (
     <div className={styles.aboutWrapper}>
       <AngleDecoration isBottom={false} />

components/Sections.module.css

@@ -0,0 +1,60 @@
+.sections {
+  display: flex;
+  flex-direction: row;
+  gap: calc(15rem / 16);
+}
+
+.sections h1 {
+  flex: 3;
+  text-align: right;
+  margin: 0;
+}
+
+.separator {
+  flex: 1;
+  background-color: var(--label);
+  height: calc(1rem / 16);
+  width: 100%;
+  margin-top: calc(30rem / 16);
+}
+
+.nav {
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav li {
+  margin: calc(20rem / 16);
+  margin-left: 0;
+}
+
+.nav li:first-child {
+  margin-top: calc(18rem / 16);
+}
+
+.nav li .linkNumber {
+  color: var(--secondary-accent);
+  margin: 0;
+  display: inline;
+}
+
+.nav li a {
+  font-size: calc(24rem / 16);
+  color: var(--primary-text);
+}
+
+.nav li a:hover .linkName {
+  text-decoration: underline;
+}
+
+.nav li .linkName {
+  margin: 0;
+  display: inline;
+}

components/Sections.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import styles from "./Sections.module.css";
+
+interface SectionsData {
+  name: string;
+  url: string;
+}
+
+interface SectionsProps {
+  /* Whether to display the "Sections" title and separator that appears on the left. */
+  showHeader?: boolean;
+  data: SectionsData[];
+}
+
+export function Sections({ data, showHeader = true }: SectionsProps) {
+  return (
+    <section className={styles.sections}>
+      {showHeader ? (
+        <>
+          <h1>Sections</h1>
+          <div className={styles.separator} />
+        </>
+      ) : (
+        ""
+      )}
+      <nav className={styles.nav}>
+        <ul>
+          {data.map((datum, index) => {
+            return (
+              <li key={`${datum.name}-${index}`}>
+                <a href={datum.url}>
+                  <span className={styles.linkNumber}>
+                    {String(index).padStart(2, "0")}{" "}
+                  </span>
+                  <span className={styles.linkName}>{datum.name}</span>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+    </section>
+  );
+}

data/routes.ts

@@ -0,0 +1,46 @@
+export const sectionsData = [
+  {
+    name: "Demographics",
+    url: "/",
+  },
+  {
+    name: "Academics",
+    url: "/",
+  },
+  {
+    name: "Co-op",
+    url: "/",
+  },
+  {
+    name: "Lifestyle and Interests",
+    url: "/",
+  },
+  {
+    name: "Intimacy and Drugs",
+    url: "/",
+  },
+  {
+    name: "Post-grad",
+    url: "/",
+  },
+  {
+    name: "Friends",
+    url: "/",
+  },
+  {
+    name: "Miscellaneous",
+    url: "/",
+  },
+  {
+    name: "Mental Health",
+    url: "/",
+  },
+  {
+    name: "Personal",
+    url: "/",
+  },
+  {
+    name: "Contributors",
+    url: "/",
+  },
+];

pages/playground.tsx

@@ -9,11 +9,13 @@ import {
   mockPieData,
   mockTimelineData,
 } from "data/mocks";
+import { sectionsData } from "data/routes";
 import React from "react";
 
-import About from "@/components/About";
+import { About } from "@/components/About";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
+import { Sections } from "@/components/Sections";
 import { Timeline } from "@/components/Timeline";
 
 import { CenterWrapper } from "../components/CenterWrapper";
@@ -27,14 +29,8 @@ export default function Home() {
     <div className={styles.page}>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
-      <ColorPalette />
 
-      <h2>
-        <code>{"<PieChart />"}</code>
-      </h2>
-      <div style={{ padding: "30px" }}>
-        <PieChart data={mockPieData} width={800} labelWidth={215} />
-      </div>
+      <ColorPalette />
 
       <h2>
         <code>Text Styles</code>
@@ -46,6 +42,13 @@ export default function Home() {
       <p>p p p p p p p p p p p p p p p p p p p p p p p p p p p p</p>
       <a href="#">a a a a a a a a a a a a a a a a a a a a a a a a a a a a</a>
 
+      <h2>
+        <code>{"<PieChart />"}</code>
+      </h2>
+      <div style={{ padding: "30px" }}>
+        <PieChart data={mockPieData} width={800} labelWidth={215} />
+      </div>
+
       <h2>
         <code>{"<BarGraphHorizontal />"}</code>
       </h2>
@@ -129,10 +132,15 @@ export default function Home() {
         </p>
       </CenterWrapper>
 
+      <h2>
+        <code>{"<Sections />"}</code>
+      </h2>
+      <Sections data={sectionsData} />
+
       <h2>
         <code>{"<About />"}</code>
-        <About />
       </h2>
+      <About />
 
       <h2>
         <code>{"<BoxPlot />"}</code>