Add Sections

components/Sections.module.css

@@ -0,0 +1,52 @@
+.sections {
+  display: flex;
+  flex-direction: row;
+  width: 50%;
+  gap: 15px;
+  margin: 0 auto;
+}
+
+.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(24rem / 16);
+}
+
+.nav {
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+}
+
+.navItem {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin: calc(20rem / 16);
+}
+
+.navItem:first-child {
+  margin-top: calc(10rem / 16);
+}
+
+.nav h4 {
+  color: var(--secondary-accent);
+  margin: 0 calc(14rem / 16) 0 0;
+}
+
+.nav a {
+  color: var(--primary-text);
+}
+
+.nav a:hover {
+  color: var(--primary-accent-light);
+  text-decoration: underline;
+}

components/Sections.tsx

@@ -13,14 +13,19 @@ interface SectionsProps {
 
 export default function Sections({ data }: SectionsProps) {
   return (
-    <section>
+    <section className={styles.sections}>
       <h1>Sections</h1>
-      {data.map((datum, index) => {
-        return <div>
-          <h4></h4>
-          <a></a>
-        </div>;
-      })}
+      <div className={styles.separator} />
+      <nav className={styles.nav}>
+        {data.map((datum, index) => {
+          return (
+            <div key={`${datum.name}-${index}`} className={styles.navItem}>
+              <h4>{String(index).padStart(2, "0")}</h4>
+              <a href={datum.url}>{datum.name}</a>
+            </div>
+          );
+        })}
+      </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

@@ -1,7 +1,10 @@
 import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
 import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
+import { sectionsData } from "data/routes";
 import React from "react";
 
+import Sections from "@/components/Sections";
+
 import { ColorPalette } from "../components/ColorPalette";
 import { WordCloud } from "../components/WordCloud";
 
@@ -59,6 +62,11 @@ export default function Home() {
           value: word.value,
         }))}
       />
+
+      <h2>
+        <code>{"<Sections />"}</code>
+        <Sections data={sectionsData} />
+      </h2>
     </div>
   );
 }