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

import { View, Text } from "react-native-ui-lib";
import React from "react";
import { StyleSheet } from "react-native";
import FamilyChart from "./FamilyChart";
import { TouchableOpacity } from "react-native-ui-lib/src/incubator";

const FamilyChoresProgress = ({
  setPageIndex,
}: {
  setPageIndex: (value: number) => void;
}) => {
  return (
    <View marginT-20 marginH-5>
      <TouchableOpacity onPress={() => setPageIndex(0)}>
        <Text>Back to ToDos</Text>
      </TouchableOpacity>
      <View centerH>
        <Text text50R>Family Chores Progress Report</Text>
      </View>
      <View row spread marginT-25 marginB-20>
        <Text text70>Points earned this week</Text>
        <View row>
          <View style={styles.pfpSmall} backgroundColor="#05a8b6" />
          <View style={styles.pfpSmall} backgroundColor="#ebd825" />
        </View>
      </View>
      <View style={styles.card} paddingL-10>
        <FamilyChart />
      </View>
      <Text text70 marginV-20>
        Chore Tracker
      </Text>
      <View style={styles.card} marginB-20 row spread>
        <View style={styles.pfpBig} backgroundColor="#05a8b6" />
        <View width={"100%"} centerV centerH>
          <Text> x/y chores completed</Text>
        </View>
      </View>
      <View style={styles.card} row spread>
        <View style={styles.pfpBig} backgroundColor="#ebd825" />
        <View width={"100%"} centerV centerH>
          <Text> 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;