add bottom nav

components/BottomNav.module.css

@@ -1,15 +1,45 @@
 .container {
   display: flex;
-  flex-flow: space-between;
+  flex-flow: center;
+  align-items: center;
+  justify-content: space-around;
   /* or inline-flex */
 }
 
-.item {}
-
-.anglePath {
-  stroke: var(--primary-accent)
+.item {
+  display: inline-block;
+  color: var(--primary-text);
+  font-size: calc(28rem / 16);
+  position: relative;
 }
 
-.left.arrow {
+.item:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--primary-accent);
+  cursor: pointer;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.item:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+
+.linePath {
+  stroke: var(--primary-text);
+}
+
+.arrowPath {
+  fill: var(--primary-text);
+}
+
+.left {
   transform: rotate(180deg);
 }

components/BottomNav.tsx

@@ -1,32 +1,61 @@
+import Link from "next/link";
 import React from "react";
 
 import styles from "./BottomNav.module.css";
-export function BottomNav() {
+
+interface PageLinks {
+  leftPage: string;
+  rightPage: string;
+}
+
+export function BottomNav(props: PageLinks) {
   return (
     <div className={styles.container}>
-      <Arrow pointLeft={true}></Arrow>
-      <p className={styles.item}>View Demographics</p>
-      <p className={styles.item}>View Co-ops</p>
-      <Arrow pointLeft={false}></Arrow>
+      <Arrow isPointRight={true}></Arrow>
+      <Link href={props.leftPage}>
+        <a className={styles.item}>View Demographics</a>
+      </Link>
+      <Link href={props.leftPage}>
+        <a className={styles.item}>View Co-ops</a>
+      </Link>
+      <Arrow isPointRight={false}></Arrow>
     </div>
   );
 }
 
 interface ArrowProps {
-  pointLeft: boolean;
+  isPointRight: boolean;
 }
 
-function Arrow({ pointLeft }: ArrowProps) {
+function Arrow({ isPointRight }: ArrowProps) {
   return (
     <svg
-      viewBox="0 0 50 50"
-      className={pointLeft ? `${styles.left} ${styles.arrow}` : styles.arrow}
+      width="300px"
+      height="150px"
+      className={isPointRight ? styles.right : styles.left}
     >
-      <path
-        d="M100,2 L2,2 L2,100"
-        fill="none"
-        strokeWidth="10"
-        className={styles.anglePath}
+      <defs>
+        <marker
+          id="arrow"
+          markerWidth="10"
+          markerHeight="10"
+          refX="5"
+          refY="3"
+          orient="auto"
+          markerUnits="strokeWidth"
+        >
+          <path d="M0,0 L0,6 L9,3 z" className={styles.arrowPath} />
+        </marker>
+      </defs>
+
+      <line
+        x1="295"
+        y1="75"
+        x2="95"
+        y2="75"
+        strokeWidth="3"
+        markerEnd="url(#arrow)"
+        className={styles.linePath}
       />
     </svg>
   );

pages/playground.tsx

@@ -135,7 +135,7 @@ export default function Home() {
       </div>
 
       <h2></h2>
-      <BottomNav></BottomNav>
+      <BottomNav leftPage="/" rightPage="/"></BottomNav>
     </div>
   );
 }