From e2d4d7e60f83b6ef06c5069f8a5d1fede551cd9a Mon Sep 17 00:00:00 2001
From: dtun <dtun@me.com>
Date: Sun, 18 Aug 2024 08:51:14 -0700
Subject: [PATCH] Add header prop

---
 app/index.tsx             |  5 ++++-
 components/MyMenuView.tsx | 10 ++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/index.tsx b/app/index.tsx
index ad642be..915489c 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -15,7 +15,10 @@ function Main() {
     <ListContainer
       style={[styles.container, { paddingTop: top, paddingBottom: bottom }]}
     >
-      <MyMenuView menuData={menuData.filter((i) => i.checked)} />
+      <MyMenuView
+        headerTitle="My Music"
+        menuData={menuData.filter((i) => i.checked)}
+      />
       <Controls
         level={level}
         playing={playing}
diff --git a/components/MyMenuView.tsx b/components/MyMenuView.tsx
index 3d8b999..10f5682 100644
--- a/components/MyMenuView.tsx
+++ b/components/MyMenuView.tsx
@@ -8,7 +8,13 @@ import { MyMenuViewItem } from "@/components/MyMenuViewItem";
 
 import type { MenuItem } from "@/types";
 
-export function MyMenuView({ menuData }: { menuData: MenuItem[] }) {
+export function MyMenuView({
+  headerTitle,
+  menuData,
+}: {
+  headerTitle: string;
+  menuData: MenuItem[];
+}) {
   return (
     <FlatList
       contentContainerStyle={styles.listContent}
@@ -17,7 +23,7 @@ export function MyMenuView({ menuData }: { menuData: MenuItem[] }) {
       ListFooterComponent={<View style={styles.footer} />}
       ListHeaderComponent={
         <View style={styles.header}>
-          <Text style={styles.headerTitle}>My Music</Text>
+          <Text style={styles.headerTitle}>{headerTitle}</Text>
           <Link href="/edit">
             <Text>Edit</Text>
           </Link>