cally/components/pages/settings/SettingsPage.tsx

import { View, Text, Button } from "react-native-ui-lib";
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { Entypo, Ionicons, Octicons } from "@expo/vector-icons";
import CalendarSettingsPage from "./CalendarSettingsPage";
import ChoreRewardSettings from "./ChoreRewardSettings";
import UserSettings from "./UserSettings";
import { AuthContextProvider } from "@/contexts/AuthContext";
import ProfileIcon from "@/assets/svgs/ProfileIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon";
import ArrowRightIcon from "@/assets/svgs/ArrowRightIcon";

const pageIndex = {
  main: 0,
  user: 1,
  calendar: 2,
  chore: 3,
  policy: 4,
};
const SettingsPage = () => {
  const [selectedPage, setSelectedPage] = useState<number>(0);
  return (
    <View flexG>
      {selectedPage == 0 && (
        <View flexG centerH marginH-30 marginT-30>
          <Button
            backgroundColor="white"
            style={styles.mainBtn}
            children={
              <View row centerV width={"100%"}>
                <ProfileIcon style={{ marginRight: 10 }} color="#07b9c8" />
                <Text style={styles.label} color="#07b8c7">
                  Manage My Profile
                </Text>
                <ArrowRightIcon style={{ marginLeft: "auto" }} />
              </View>
            }
            onPress={() => setSelectedPage(pageIndex.user)}
          />
          <Button
            backgroundColor="white"
            style={styles.mainBtn}
            children={
              <View row centerV width={"100%"}>
                <CalendarIcon style={{ marginRight: 10 }} />
                <Text style={styles.label} color="#fd1775">
                  Calendar Settings
                </Text>
                <ArrowRightIcon style={{ marginLeft: "auto" }} />
              </View>
            }
            onPress={() => {
              setSelectedPage(pageIndex.calendar);
            }}
          />
          <Button
            backgroundColor="white"
            style={styles.mainBtn}
            children={
              <View row centerV width={"100%"}>
                <Octicons
                  name="gear"
                  size={24}
                  color="#ff9900"
                  style={{ marginRight: 10 }}
                />
                <Text style={styles.label} color="#ff9900">
                  To-Do Reward Settings
                </Text>
                <ArrowRightIcon style={{ marginLeft: "auto" }} />
              </View>
            }
            onPress={() => setSelectedPage(pageIndex.chore)}
          />
          <Button
            backgroundColor="white"
            style={styles.mainBtn}
            children={
              <View row centerV width={"100%"}>
                <PrivacyPolicyIcon style={{ marginRight: 10 }} />
                <Text style={styles.label} color="#6c645b">
                  Cally Privacy Policy
                </Text>
                <ArrowRightIcon style={{ marginLeft: "auto" }} />
              </View>
            }
          />
        </View>
      )}
      {selectedPage == pageIndex.calendar && (
        <CalendarSettingsPage setSelectedPage={setSelectedPage} />
      )}
      {selectedPage == pageIndex.chore && (
        <ChoreRewardSettings setSelectedPage={setSelectedPage} />
      )}
      {selectedPage == pageIndex.user && (
        <UserSettings setSelectedPage={setSelectedPage} />
      )}
    </View>
  );
};

export default SettingsPage;

const styles = StyleSheet.create({
  mainBtn: {
    width: 311,
    justifyContent: "flex-start",
    marginBottom: 20,
    height: 57.61,
  },
  label: {
    fontFamily: "Poppins_400Regular",
    fontSize: 14.71,
    textAlignVertical: "center",
  },
});