From b411055d880c5c3386f24a936b9d75a9b2333657 Mon Sep 17 00:00:00 2001
From: Rebecca-Chou <beihaozhou@gmail.com>
Date: Wed, 14 Sep 2022 15:45:08 -0400
Subject: [PATCH] nav-bottom

---
 components/BottomNav.module.css | 15 +++++++++++++++
 components/BottomNav.tsx        | 33 +++++++++++++++++++++++++++++++++
 pages/playground.tsx            |  4 ++++
 3 files changed, 52 insertions(+)
 create mode 100644 components/BottomNav.module.css
 create mode 100644 components/BottomNav.tsx

diff --git a/components/BottomNav.module.css b/components/BottomNav.module.css
new file mode 100644
index 0000000..79d3d6d
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx
new file mode 100644
index 0000000..1426585
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/pages/playground.tsx b/pages/playground.tsx
index cde416f..d64869d 100644
--- a/pages/playground.tsx
+++ b/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>
   );
 }