Resolve "Budget"

components/budget/budgetHeader.tsx

@@ -0,0 +1,84 @@
+import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
+import SearchBar from "../common/SearchBar";
+import { useTheme } from "../../app/contexts/ThemeContext";
+
+type BudgetHeaderProperties = {
+    selectedPage: string,
+    handlePageSelection: (page: string) => void,
+}
+
+type PageSelectorButtonProperties = {
+    isSelected: boolean,
+    onPress: () => void,
+    label: string,
+}
+
+const BudgetHeader = (properties: BudgetHeaderProperties) => {
+    const {colors} = useTheme();
+    const backgroundColor = colors.backgroundColor; 
+
+    return (<>
+        <View style={styles.containerStyle}>
+            <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 {colors} = useTheme();
+
+    const primaryTextColor = colors.primaryText;
+    const secondaryTextColor = colors.secondaryText;
+    const elementSelectedColor = colors.elementSelectedColor;
+    const elementDefaultColor = colors.elementDefaultColor;
+    const accentColor = colors.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({
+    headerContainerStyle: {
+        width: "50%",
+        borderRadius: 10,
+        marginHorizontal: 30,
+    },
+    headerTextStyle: {
+        fontSize: 30,
+        textAlign: "center",
+        textAlignVertical: "center",
+    },
+    containerStyle: {
+        flexDirection: "row",
+        justifyContent: "space-evenly",
+        marginHorizontal: 20,
+        marginBottom: 20,
+        marginTop: 10,
+    },
+});