rawalcher/interaktive-systeme
Archived
1
0
Fork 0
Code Issues 5 Pull requests 2 Projects Releases 14 Packages Wiki Activity Actions

implemented navigation for budget screen

Browse source
This commit is contained in:
Thomas Schleicher 2023-12-24 09:59:19 +01:00 • committed by Jakob Stornig
parent 94e9b5738e
commit 9706fc0a51
3 changed files with 85 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

72
components/budget/budgetHeader.tsx
View file

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