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";

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}
              label="Manage My Profile"
              labelStyle={styles.label}
              color="#07b8c7"
              iconSource={() => (
                <ProfileIcon style={{marginRight: 10}} color="#07b9c8" />
              )}
              onPress={() => setSelectedPage(pageIndex.user)}
            />
            <Button
              backgroundColor="white"
              style={styles.mainBtn}
              label="Calendar Settings"
              labelStyle={styles.label}
              color="#fd1775"
              iconSource={() => (
                <CalendarIcon style={{marginRight: 10}}/>
              )}
              onPress={() => {
                setSelectedPage(pageIndex.calendar);
              }}
            />
            <Button
              backgroundColor="white"
              style={styles.mainBtn}
              label="To-Do Reward Settings"
              labelStyle={styles.label}
              color="#ff9900"
              iconSource={() => (
                <Octicons
                  name="gear"
                  size={24}
                  color="#ff9900"
                  style={{ marginRight: 10 }}
                />
              )}
              onPress={() => setSelectedPage(pageIndex.chore)}
            />
            <Button
              backgroundColor="white"
              style={styles.mainBtn}
              label="Cally Privacy Policy"
              labelStyle={styles.label}
              iconSource={() => (
                <PrivacyPolicyIcon style={{marginRight: 10}}/>
              )}
              color="#6c645b"
            />
          </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: "100%",
    justifyContent: "flex-start",
    marginBottom: 20,
    height: 60,
  },
  label:{
    fontFamily: "Poppins_400Regular",
    fontSize: 14.71,
    textAlignVertical: 'center'
  }
});