added pfp to tablet view

components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx

@@ -2,6 +2,7 @@ import { View, Text, ViewProps } from "react-native-ui-lib";
 import React, { ReactNode } from "react";
 import { Dimensions, StyleSheet } from "react-native";
 import UsersList from "./UsersList";
+import { ScrollView } from "react-native-gesture-handler";
 
 interface TabletContainerProps extends ViewProps {
   children: ReactNode;
@@ -18,7 +19,9 @@ const TabletContainer: React.FC<TabletContainerProps> = ({
       <View row>
         <View style={styles.calendarContainer}>{children}</View>
         <View style={styles.profilesContainer}>
-          <UsersList />
+          <ScrollView>
+            <UsersList />
+          </ScrollView>
         </View>
       </View>
     </View>
@@ -28,7 +31,6 @@ const TabletContainer: React.FC<TabletContainerProps> = ({
 const styles = StyleSheet.create({
   container: {
     backgroundColor: "white",
-    width: "100%",
     flex: 1,
   },
   calendarContainer: {
@@ -38,8 +40,9 @@ const styles = StyleSheet.create({
   },
   profilesContainer: {
     width: width * 0.15,
-    backgroundColor: "green",
     height: height,
+    borderLeftWidth: 1,
+    borderLeftColor: "#a9a9a9",
   },
 });
 

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

@@ -1,27 +1,67 @@
 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 gap-20>
-      <View
-        style={{
-          aspectRatio: 1,
-          width: 113,
-          backgroundColor: "red",
-          borderRadius: 100,
-        }}
-      />
-      <View
-        style={{
-          aspectRatio: 1,
-          width: 113,
-          backgroundColor: "red",
-          borderRadius: 100,
-        }}
-      />
+    <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;