implemented navigation for budget screen

app/(tabs)/budget/index.tsx

@@ -1,21 +1,41 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useEffect, useState } from 'react';
 import { SafeAreaView, StyleSheet, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
-import { BudgetHeader } from '../../../components';
+import { BudgetHeader, LoadingSymbol } from '../../../components';
 import CategoryItem from '../../../components/budget/categoryItem';
 import useFetch from '../../../hooks/useFetch';
 import { useThemeColor } from '../../../hooks/useThemeColor';
 
 export default function Page() {
-
     const containerColor = useThemeColor("containerColor");
-    const textColor = useThemeColor("primaryText");
 
     const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category", args: []});
 
+    const [selectedPage, setSelectedPage] = useState("expenses");
+
+    useEffect(() => {
+        const loadSelectedPage = async () => {
+            try {
+                // const storedPage = 
+            } catch(error) {
+
+            } finally {
+
+            }
+        }
+    }, []);
+
+    AsyncStorage.setItem
+
+    const handlePageSelection = (page: string) => {
+        setSelectedPage(page);
+    };
+
     return (
         <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
-
-            <BudgetHeader/>
+            <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
+            {isLoading && <LoadingSymbol/>}
 
             <FlatList 
             data={data} 

app/(tabs)/home/index.tsx

@@ -85,7 +85,7 @@ export default function Page() {
                 })
             }}/>}
 
-            {isLoading && <LoadingSymbol></LoadingSymbol>}
+            {isLoading && <LoadingSymbol/>}
             
             <FlatList
             data={data}

components/budget/budgetHeader.tsx

@@ -1,35 +1,81 @@
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
 import { useThemeColor } from "../../hooks/useThemeColor";
 import SearchBar from "../common/SearchBar";
 
-const BudgetHeader = () => {
-    const primaryTextColor = useThemeColor("primaryText");
-    const secondaryTextColor = useThemeColor("secondaryText");
+type BudgetHeaderProperties = {
+    selectedPage: string,
+    handlePageSelection: (page: string) => void,
+}
 
+type PageSelectorButtonProperties = {
+    isSelected: boolean,
+    onPress: () => void,
+    label: string,
+}
 
+const BudgetHeader = (properties: BudgetHeaderProperties) => {
+    const backgroundColor = useThemeColor("backgroundColor");
 
     return (<>
         <View style={styles.containerStyle}>
-                <Text style={[styles.selectedHeaderTextStyle, {color: primaryTextColor}]}>Expense View</Text>
-                <Text style={[styles.defaultHeaderTextStyle, {color: secondaryTextColor}]}>Savings View</Text>
+            <PageSelectorButton 
+                label="Expenses"
+                isSelected={properties.selectedPage === "expenses"}
+                onPress={() => {
+                    properties.handlePageSelection("expenses")
+                }}
+            />
+            <PageSelectorButton 
+                label="Savings"
+                isSelected={properties.selectedPage === "savings"}
+                onPress={() => {
+                    properties.handlePageSelection("savings");
+                }}
+            />
         </View>
         <SearchBar placeholder='Search...'></SearchBar>
     </>);
 }
 
+const PageSelectorButton = (properties: PageSelectorButtonProperties) => {
+    const primaryTextColor = useThemeColor("primaryText");
+    const secondaryTextColor = useThemeColor("secondaryText");
+    const elementSelectedColor = useThemeColor("elementSelectedColor");
+    const elementDefaultColor = useThemeColor("elementDefaultColor");
+    const accentColor = useThemeColor("accentColor");
+
+    return (
+        <TouchableHighlight
+            underlayColor={elementDefaultColor}
+            onPress={properties.onPress}
+            style={[styles.headerContainerStyle, properties.isSelected ? {backgroundColor: accentColor} : {backgroundColor: elementDefaultColor}]}>
+            <Text
+            style={[styles.headerTextStyle, properties.isSelected ? {color: primaryTextColor} : {color: secondaryTextColor}]}>
+                {properties.label}
+            </Text>
+
+        </TouchableHighlight>
+    );
+}
+
 export default BudgetHeader;
 
 const styles = StyleSheet.create({
-    selectedHeaderTextStyle: {
-        fontSize: 40,
-        fontWeight: "bold",
+    headerContainerStyle: {
+        width: "50%",
+        borderRadius: 10,
+        marginHorizontal: 30,
     },
-    defaultHeaderTextStyle: {
-        fontSize: 20,
+    headerTextStyle: {
+        fontSize: 30,
+        textAlign: "center",
+        textAlignVertical: "center",
     },
     containerStyle: {
-        backgroundColor: "blue",
         flexDirection: "row",
-        justifyContent: "space-between",
+        justifyContent: "space-evenly",
+        marginHorizontal: 20,
+        marginBottom: 20,
+        marginTop: 10,
     },
 });