add rgb color picker

2025-09-03 00:31:44 +02:00
parent baa93970cd
commit 5f8bc8fd66
2 changed files with 131 additions and 1 deletions
@@ -1,12 +1,40 @@
 import ThemedHeader from "@/src/components/themed/ThemedHeader";
 import ThemedBackground from "@/src/components/themed/ThemedBackground";
+import {useState} from "react";
+import ThemedTextInput from "@/src/components/themed/ThemedTextInput";
+import ThemedButton from "@/src/components/themed/ThemedButton";
+import {useAuth} from "@/src/context/AuthProvider";
+
+import CustomColorPicker from "@/src/components/themed/CustomColorPicker";

 export default function TextScreen() {
+    const {authenticatedUser} = useAuth();
+    const [textProps, setTextProps] = useState(authenticatedUser?.lastState.text);
+
    return (
        <ThemedBackground>
            <ThemedHeader>
-                Text Mode
+                Text mode
            </ThemedHeader>
+            {/* TextArea if I allow enough characters */}
+            <ThemedTextInput
+                label="Text"
+                returnKeyType="next"
+                value={textProps?.text}
+                onChangeText={(value: string) => {
+                    setTextProps(prev => ({
+                        ...prev!,
+                        text: value
+                    }));
+                }}
+                autoCapitalize="none"
+            />
+
+            <CustomColorPicker onSelect={rgb => console.log(rgb)} defaultColor={textProps!.color} />
+
+            <ThemedButton mode={"contained"} onPress={() => console.log(textProps)}>
+                Cooler Knopf
+            </ThemedButton>
        </ThemedBackground>
    );
 }