modify props

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>

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>
   );
 }