edit todos

components/pages/todos/AddChore.tsx

@@ -9,18 +9,28 @@ import {
   TextField,
   Dialog,
   Slider,
+  NumberInput,
+  NumberInputData,
+  DateTimePicker,
 } from "react-native-ui-lib";
-import { AntDesign } from "@expo/vector-icons";
+import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
 import LinearGradient from "react-native-linear-gradient";
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
 
 const AddChore = () => {
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const [points, setPoints] = useState<number>(10);
+  const [choreDate, setChoreDate] = useState<Date>(new Date());
 
-  useEffect(() => {
+  const handleChange = (text: string) => {
-    console.log(points);
+    const numericValue = parseInt(text, 10);
-  }, [points]);
+
+    if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
+      setPoints(numericValue);
+    } else if (text === "") {
+      setPoints(0);
+    }
+  };
 
   return (
     <LinearGradient
@@ -47,6 +57,7 @@ const AddChore = () => {
         panDirection={PanningDirectionsEnum.DOWN}
         onDismiss={() => setIsVisible(false)}
         containerStyle={{
+          borderRadius: 10,
           backgroundColor: "white",
           width: "100%",
           alignSelf: "stretch",
@@ -60,20 +71,104 @@ const AddChore = () => {
           placeholderTextColor="#2d2d30"
           text60R
           marginT-15
+          marginL-30
         />
         <View style={styles.divider} />
-        <View marginH-30>
+        <View marginL-30 centerV>
-          <Slider
+          <View row marginB-10>
-            value={points}
+            <Feather name="calendar" size={28} color="#919191" />
-            onValueChange={(value) => setPoints(value)}
+            <DateTimePicker
-            minimumValue={0}
+              value={choreDate}
-            step={10}
+              text70
-            maximumValue={100}
+              marginL-10
+              onChange={(date) => {
+                setChoreDate(date);
+              }}
+            />
+          </View>
+          <View row>
+            <AntDesign name="clockcircleo" size={28} color="#919191" />
+          </View>
+        </View>
+        <View style={styles.divider} />
+
+        <View marginH-30 marginB-10 row centerV>
+          <Ionicons name="person-circle-outline" size={30} color="#919191" />
+          <Text text60R marginL-10>
+            Assignees
+          </Text>
+          <Button
+            size={ButtonSize.small}
+            paddingH-8
+            iconSource={() => (
+              <Ionicons name="add-outline" size={20} color="#ea156c" />
+            )}
+            style={{
+              marginLeft: "auto",
+              borderRadius: 8,
+              backgroundColor: "#ffe8f1",
+              borderColor: "#ea156c",
+              borderWidth: 1,
+            }}
+            color="#ea156c"
+            label="Assign"
           />
-          <View row spread>
+        </View>
-            <Text>0</Text>
+        <View row>
-            <Text>50</Text>
+          <View
-            <Text>100</Text>
+            marginL-30
+            style={{
+              aspectRatio: 1,
+              width: 60,
+              backgroundColor: "red",
+              borderRadius: 50,
+            }}
+          />
+          <View
+            marginL-30
+            style={{
+              aspectRatio: 1,
+              width: 60,
+              backgroundColor: "red",
+              borderRadius: 50,
+            }}
+          />
+        </View>
+        <View style={styles.divider} />
+        <View marginH-30 marginB-10 row centerV>
+          <Ionicons name="gift-outline" size={30} color="#919191" />
+          <Text text60R marginL-10>
+            Reward Points
+          </Text>
+        </View>
+        <View marginH-30 row spread>
+          <View width={"85%"}>
+            <Slider
+              value={points}
+              onValueChange={(value) => setPoints(value)}
+              minimumValue={0}
+              step={10}
+              maximumValue={100}
+            />
+            <View row spread>
+              <Text>0</Text>
+              <Text>50</Text>
+              <Text>100</Text>
+            </View>
+          </View>
+          <View style={{ marginLeft: "auto" }}>
+            <TextField
+              value={points.toString()}
+              onChangeText={(text) => {
+                handleChange(text);
+              }}
+              containerStyle={{
+                borderWidth: 1,
+                borderColor: "#d9d9d9",
+                width: 45,
+                borderRadius: 5,
+              }}
+            />
           </View>
         </View>
       </Dialog>