add todo repeat freq

components/pages/todos/RepeatFreq.tsx

@@ -0,0 +1,83 @@
+import { View, Text, TouchableOpacity, Picker } from "react-native-ui-lib";
+import React, { useEffect, useState } from "react";
+
+const RepeatFreq = () => {
+  const [weeks, setWeeks] = useState<number>(1);
+  const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);
+
+  useEffect(() => {
+  }, [weeks]);
+
+  return (
+    <View row centerV>
+      <View row centerV>
+        <RepeatOption value={"Monday"} />
+        <RepeatOption value={"Tuesday"} />
+        <RepeatOption value={"Wednesday"} />
+        <RepeatOption value={"Thirsday"} />
+        <RepeatOption value={"Friday"} />
+        <RepeatOption value={"Saturday"} />
+        <RepeatOption value={"Sunday"} />
+      </View>
+      <View row gap-5 centerV>
+        <Picker
+          centered
+          marginL-10
+          marginR-0
+          paddingR-0
+          textAlign="right"
+          trailingAccessory={
+            <Text
+              style={{ fontFamily: "Manrope_600SemiBold", color: "#fd1575" }}
+            >
+              {weeks == 1 ? "Week" : "Weeks"}
+            </Text>
+          }
+          value={weeks}
+          onChange={(value) => {
+            if (typeof value === "number") {
+              setWeeks(value);
+            }
+          }}
+          placeholder={"Select number of weeks"}
+          useWheelPicker
+          color={"#fd1575"}
+          style={{
+            maxWidth: 18,
+            fontFamily: "Manrope_700Bold",
+          }}
+          containerStyle={{
+            borderWidth: 1,
+            borderRadius: 6,
+            paddingRight: 5,
+            paddingLeft: 3,
+            borderColor: "#fd1575",
+            backgroundColor: "#ffe8f1",
+          }}
+        >
+          {weekOptions.map((num) => (
+            <Picker.Item key={num} value={num} label={`${num}`} />
+          ))}
+        </Picker>
+      </View>
+    </View>
+  );
+};
+
+export default RepeatFreq;
+
+const RepeatOption = ({ value }: { value: string }) => {
+  const [isSet, setisSet] = useState(false);
+  return (
+    <TouchableOpacity padding-10 center onPress={() => setisSet(!isSet)}>
+      <Text
+        style={{
+          fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
+          color: isSet ? "#fd1575" : "gray",
+        }}
+      >
+        {value.at(0)}
+      </Text>
+    </TouchableOpacity>
+  );
+};