cally/components/pages/todos/family-chores/FamilyChoresProgress.tsx

import { View, Text } from "react-native-ui-lib";
import React from "react";
import { ImageBackground, StyleSheet } from "react-native";
import FamilyChart from "./FamilyChart";
import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
import { Ionicons } from "@expo/vector-icons";

const FamilyChoresProgress = ({
  setPageIndex,
}: {
  setPageIndex: (value: number) => void;
}) => {
  return (
    <View marginT-20 marginH-5>
      <TouchableOpacity onPress={() => setPageIndex(0)}>
        <View row marginT-4 marginB-10 centerV>
          <Ionicons
            name="chevron-back"
            size={14}
            color="#979797"
            style={{ paddingBottom: 3 }}
          />
          <Text
            style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
            color="#979797"
          >
            Return to To Do's
          </Text>
        </View>
      </TouchableOpacity>
      <View centerH>
        <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 19 }}>
          Family Chores Progress Report
        </Text>
      </View>
      <View row spread marginT-35 marginB-20>
        <Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
          Points earned this week
        </Text>
        <View row>
          <View
            style={styles.pfpSmall}
            backgroundColor="#05a8b6"
            center
            children={
              <ImageBackground
                source={require("../../../../assets/images/child1-picture.png")}
                style={{
                  height: 25,
                  aspectRatio: 1,
                  borderRadius: 22,
                  overflow: "hidden",
                }}
              />
            }
          />
          <View
            style={styles.pfpSmall}
            backgroundColor="#ebd825"
            center
            children={
              <ImageBackground
                source={require("../../../../assets/images/child-picture.png")}
                style={{
                  height: 25,
                  aspectRatio: 1,
                  borderRadius: 22,
                  overflow: "hidden",
                }}
              />
            }
          />
        </View>
      </View>
      <View style={styles.card} paddingL-10>
        <FamilyChart />
      </View>
      <Text text70 style={{ fontFamily: "Manrope_600SemiBold" }} marginV-20>
        Chore Tracker
      </Text>
      <View style={styles.card} marginB-20 row spread centerV>
        <View
          style={styles.pfpBig}
          backgroundColor="#05a8b6"
          center
          children={
            <ImageBackground
              source={require("../../../../assets/images/child1-picture.png")}
              style={{
                height: 45,
                aspectRatio: 1,
                borderRadius: 22,
                overflow: "hidden",
              }}
            />
          }
        />
        <Text
          color="#858585"
          style={{ fontFamily: "Manrope_600SemiBold", fontSize: 17 }}
        >
          Emily
        </Text>
        <View centerV>
          <Text style={{ fontSize: 16, fontFamily: "Manrope_700Bold" }}>
            {" "}
            x/y chores completed
          </Text>
        </View>
      </View>
      <View style={styles.card} row spread centerV>
        <View
          style={styles.pfpBig}
          backgroundColor="#ebd825"
          center
          children={
            <ImageBackground
              source={require("../../../../assets/images/child-picture.png")}
              style={{
                height: 45,
                aspectRatio: 1,
                borderRadius: 22,
                overflow: "hidden",
              }}
            />
          }
        />
        <Text
          color="#858585"
          style={{ fontFamily: "Manrope_600SemiBold", fontSize: 17 }}
        >
          Austin
        </Text>
        <View row centerV centerH>
          <Text style={{ fontSize: 16, fontFamily: "Manrope_700Bold" }}>
            {" "}
            x/y chores completed
          </Text>
        </View>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  pfpSmall: {
    width: 30,
    aspectRatio: 1,
    borderRadius: 50,
    marginHorizontal: 2,
  },
  pfpBig: {
    width: 50,
    aspectRatio: 1,
    borderRadius: 50,
  },
  card: {
    backgroundColor: "white",
    borderRadius: 20,
    padding: 20,
  },
});

export default FamilyChoresProgress;