refactored into budgetHeader component

app/(tabs)/budget/index.tsx

@@ -1,6 +1,6 @@
-import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView, StyleSheet, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
-import { SearchBar } from '../../../components';
+import { BudgetHeader } from '../../../components';
 import CategoryItem from '../../../components/budget/categoryItem';
 import useFetch from '../../../hooks/useFetch';
 import { useThemeColor } from '../../../hooks/useThemeColor';
@@ -14,11 +14,9 @@ export default function Page() {
 
     return (
         <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
-            <View>
+
-                <Text style={[{color: textColor}]}>Expense View</Text>
+            <BudgetHeader/>
-                <SearchBar placeholder='Search...'></SearchBar>
+
-            </View>
-            
             <FlatList 
             data={data} 
             renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}
@@ -37,5 +35,5 @@ const styles = StyleSheet.create({
     },
     itemSeperatorStyle: {
         marginVertical: 5,
-    }
+    },
 });

components/budget/budgetHeader.tsx

@@ -0,0 +1,35 @@
+import { StyleSheet, Text, View } from "react-native";
+import { useThemeColor } from "../../hooks/useThemeColor";
+import SearchBar from "../common/SearchBar";
+
+const BudgetHeader = () => {
+    const primaryTextColor = useThemeColor("primaryText");
+    const secondaryTextColor = useThemeColor("secondaryText");
+
+
+
+    return (<>
+        <View style={styles.containerStyle}>
+                <Text style={[styles.selectedHeaderTextStyle, {color: primaryTextColor}]}>Expense View</Text>
+                <Text style={[styles.defaultHeaderTextStyle, {color: secondaryTextColor}]}>Savings View</Text>
+        </View>
+        <SearchBar placeholder='Search...'></SearchBar>
+    </>);
+}
+
+export default BudgetHeader;
+
+const styles = StyleSheet.create({
+    selectedHeaderTextStyle: {
+        fontSize: 40,
+        fontWeight: "bold",
+    },
+    defaultHeaderTextStyle: {
+        fontSize: 20,
+    },
+    containerStyle: {
+        backgroundColor: "blue",
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+});

components/index.tsx

@@ -11,10 +11,11 @@ import CustomCard from "./common/CustomCard"
 
 
 //login
+import BudgetHeader from "./budget/budgetHeader"
 import Input from "./login/input"
 
 export {
-  ButtonSetting, CustomCard, ExpenseItem, Input,
+  BudgetHeader, ButtonSetting, CustomCard, ExpenseItem, Input,
   LoadingSymbol, Plus,
   SearchBar, ToggleSetting, Welcome
 }