From 8253f6cbab930c9005bff5f499c0e14fa8713eaa Mon Sep 17 00:00:00 2001
From: j285he <j285he@localhost>
Date: Mon, 12 Sep 2022 20:07:03 -0400
Subject: [PATCH] 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: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/49
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
---
 components/About.tsx           |  2 +-
 components/Sections.module.css | 60 ++++++++++++++++++++++++++++++++++
 components/Sections.tsx        | 45 +++++++++++++++++++++++++
 data/routes.ts                 | 46 ++++++++++++++++++++++++++
 pages/playground.tsx           | 26 ++++++++++-----
 5 files changed, 169 insertions(+), 10 deletions(-)
 create mode 100644 components/Sections.module.css
 create mode 100644 components/Sections.tsx
 create mode 100644 data/routes.ts

diff --git a/components/About.tsx b/components/About.tsx
index d176012..f409610 100644
--- a/components/About.tsx
+++ b/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} />
diff --git a/components/Sections.module.css b/components/Sections.module.css
new file mode 100644
index 0000000..575dc97
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/components/Sections.tsx b/components/Sections.tsx
new file mode 100644
index 0000000..226d383
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/data/routes.ts b/data/routes.ts
new file mode 100644
index 0000000..ddf9393
--- /dev/null
+++ b/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: "/",
+  },
+];
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 3ddf484..18e20b2 100644
--- a/pages/playground.tsx
+++ b/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>