cally/components/pages/todos/RepeatFreq.tsx

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 spread marginR-30>
      <RepeatOption value={"Monday"} />
      <RepeatOption value={"Tuesday"} />
      <RepeatOption value={"Wednesday"} />
      <RepeatOption value={"Thirsday"} />
      <RepeatOption value={"Friday"} />
      <RepeatOption value={"Saturday"} />
      <RepeatOption value={"Sunday"} />
    </View>
  );
};

export default RepeatFreq;

const RepeatOption = ({ value }: { value: string }) => {
  const [isSet, setisSet] = useState(false);
  return (
    <TouchableOpacity onPress={() => setisSet(!isSet)}>
      <View
        center
        marginT-8
        marginB-4
        width={28}
        height={28}
        style={{
          backgroundColor: isSet ? "#fd1575" : "white",
          borderRadius: 100,
        }}
      >
        <Text
          style={{
            fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
            color: isSet ? "white" : "gray",
          }}
        >
          {value.at(0)}
        </Text>
      </View>
    </TouchableOpacity>
  );
};