Resolve "Add Category Modal"

2024-01-03 17:31:59 +00:00 · 2024-01-03 17:31:59 +00:00 · 9204d6f235
commit 9204d6f235
parent d2837c12b3
10 changed files with 297 additions and 21 deletions
--- a/app/(tabs)/budget/addCategory.tsx
+++ b/app/(tabs)/budget/addCategory.tsx
@ -1,8 +1,86 @@
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { SafeAreaView, StyleSheet, Text, TextInput, View } from "react-native";
+import { CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
+import { useTheme } from "../../contexts/ThemeContext";

 const addCategory = () => {
+    const {colors} = useTheme();
+
+    const parameters = useLocalSearchParams();
+
+    const [categoryName, setCartegoryName] = useState<string>("Enter Category Name...");
+    const [categoryColor, setCartegoryColor] = useState<null|string>(null);
+    const [selectedType, setSelectedType] = useState<string>("expense");
+
    return (
-        <></>
+        <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: colors.backgroundColor}]}>
+            <Text style={[styles.headingTextStyle, {color: colors.primaryText}]}>Category Editor</Text>
+            
+            <View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
+                <View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
+                    <TextInput placeholder={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
+                        setCartegoryName(newName);
+                    }}/>
+                </View>
+
+                <TypeSelectorSwitch 
+                currentSelected={selectedType}
+                handleButtonPress={(type) => {
+                    setSelectedType(type);
+                }}
+                />
+
+                <View>
+                   <CustomColorPicker currentColor={categoryColor} handleColorChange={(color) => {
+                        setCartegoryColor(color);
+                    }}/> 
+                </View>
+
+                <View style={styles.navigationButtonViewStyle}>
+                    <NavigationButton text="Back" onPress={() => {
+                        router.back();
+                    }}/>
+                    <NavigationButton text="Save" onPress={() => {
+                        console.log("Implement Saving here!");
+                        router.back();
+                    }}/> 
+                </View>
+            </View>
+        </SafeAreaView>
    );
 }

-export default addCategory;
+export default addCategory;
+
+const styles = StyleSheet.create({
+    containerStyle: {
+        flex: 1,
+        margin: 10,
+        borderRadius: 10,
+    },
+    safeAreaViewStyle: {
+        flex: 1,
+        flexDirection: "column" 
+    },
+    headingTextStyle: {
+        fontSize: 40,
+        fontWeight: "bold",
+        alignSelf: "center",
+        marginVertical: 10,
+    },
+    navigationButtonViewStyle: {
+        flexDirection: "row",
+        justifyContent: "center",
+        marginBottom: 10,
+    },
+    textInputViewStyle: {
+        borderRadius: 10,
+        paddingVertical: 10,
+        margin: 10,
+    },
+    textInputStyle: {
+        paddingHorizontal: 10,
+        fontSize: 25,
+    }
+});