nav-bottom

components/BottomNav.module.css

@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+  flex-flow: space-between;
+  /* or inline-flex */
+}
+
+.item {}
+
+.anglePath {
+  stroke: var(--primary-accent)
+}
+
+.left.arrow {
+  transform: rotate(180deg);
+}

components/BottomNav.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import styles from "./BottomNav.module.css";
+export function BottomNav() {
+  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>
+    </div>
+  );
+}
+
+interface ArrowProps {
+  pointLeft: boolean;
+}
+
+function Arrow({ pointLeft }: ArrowProps) {
+  return (
+    <svg
+      viewBox="0 0 50 50"
+      className={pointLeft ? `${styles.left} ${styles.arrow}` : styles.arrow}
+    >
+      <path
+        d="M100,2 L2,2 L2,100"
+        fill="none"
+        strokeWidth="10"
+        className={styles.anglePath}
+      />
+    </svg>
+  );
+}

pages/playground.tsx

@@ -13,6 +13,7 @@ import React from "react";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 
+import { BottomNav } from "../components/BottomNav";
 import { CenterWrapper } from "../components/CenterWrapper";
 import { ColorPalette } from "../components/ColorPalette";
 import { LineGraph } from "../components/LineGraph";
@@ -132,6 +133,9 @@ export default function Home() {
           circleDiameter={180}
         />
       </div>
+
+      <h2></h2>
+      <BottomNav></BottomNav>
     </div>
   );
 }