From 0b2aee86eef13745cdddd46b5c382757b41a1aa7 Mon Sep 17 00:00:00 2001
From: Rebecca-Chou <beihaozhou@gmail.com>
Date: Sun, 2 Oct 2022 22:47:00 -0400
Subject: [PATCH] modify props

---
 components/BottomNav.tsx | 24 +++++++++++++-----------
 pages/playground.tsx     |  7 ++++++-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx
index 84a8aed..2d5d8d5 100644
--- a/components/BottomNav.tsx
+++ b/components/BottomNav.tsx
@@ -3,29 +3,31 @@ import React from "react";
 
 import styles from "./BottomNav.module.css";
 
-interface PageLinks {
-  leftPage: string;
-  rightPage: string;
+interface PagesInfo {
+  leftPageLink: string;
+  leftPageName: string;
+  rightPageLink: string;
+  rightPageName: string;
 }
 
-export function BottomNav(props: PageLinks) {
+export function BottomNav(props: PagesInfo) {
   return (
     <div className={styles.container}>
       <div className={styles.subBox + " " + styles.subBoxLeft}>
-        <Link href={props.leftPage}>
+        <Link href={props.leftPageLink}>
           <a>
-            <Arrow isPointRight={true}></Arrow>
+            <Arrow isPointRight></Arrow>
           </a>
         </Link>
-        <Link href={props.leftPage}>
-          <a className={styles.item}>Demographics</a>
+        <Link href={props.leftPageLink}>
+          <a className={styles.item}>{props.leftPageName}</a>
         </Link>
       </div>
       <div className={styles.subBox}>
-        <Link href={props.leftPage}>
-          <a className={styles.item}>Co-ops</a>
+        <Link href={props.leftPageLink}>
+          <a className={styles.item}>{props.rightPageName}</a>
         </Link>
-        <Link href={props.leftPage}>
+        <Link href={props.leftPageLink}>
           <a>
             <Arrow isPointRight={false}></Arrow>
           </a>
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 9727c75..fedaca3 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -172,7 +172,12 @@ export default function Home() {
       <h2>
         <code>{"<BottomNav />"}</code>
       </h2>
-      <BottomNav leftPage="/" rightPage="/"></BottomNav>
+      <BottomNav
+        leftPageLink="/"
+        leftPageName="Demographics"
+        rightPageLink="/"
+        rightPageName="View Co-ops"
+      ></BottomNav>
     </div>
   );
 }