cally/components/pages/(tablet_pages)/tablet_components/UsersList.tsx

import { View, Text } from "react-native-ui-lib";
import React from "react";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { ImageBackground, StyleSheet } from "react-native";
import { colorMap } from "@/constants/colorMap";

const UsersList = () => {
  const { data: familyMembers } = useGetFamilyMembers();

  const capitalizeFirstLetter = (str: string) => {
    if (!str) return '';
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
  };

  return (
    <View centerH paddingT-10>
      {familyMembers?.map((member, index) => (
        <>
          {member.pfp ? (
            <ImageBackground
              key={index}
              source={{ uri: member.pfp }}
              style={styles.pfp}
              borderRadius={100}
            />
          ) : (
            <View
              key={index}
              style={styles.pfp}
              center
              backgroundColor={member.eventColor || colorMap.teal}
              children={
                <Text color="white">
                  {member.firstName.at(0)}
                  {member.lastName.at(0)}
                </Text>
              }
            />
          )}
          <Text style={styles.fName}>{member.firstName}</Text>
          <Text style={styles.role}>{capitalizeFirstLetter(member.userType)}</Text>
        </>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  pfp: {
    aspectRatio: 1,
    width: 113,
    borderRadius: 100,
    marginBottom: 8,
  },
  fName: {
    fontFamily: "Manrope_600SemiBold",
    fontSize: 18.15,
  },
  role: {
    fontFamily: "Manrope_600SemiBold",
    fontSize: 12.95,
    color: "#9b9b9b",
    marginBottom: 20,
  },
});

export default UsersList;