ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 08:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

added pfp to tablet view

Browse Source
This commit is contained in:
ivic00
2024-11-10 13:53:19 +01:00
parent 6dc09ee448
commit e3084a70a7
2 changed files with 63 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
View File

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

74
components/pages/(tablet_pages)/tablet_components/UsersList.tsx
View File

@ -1,27 +1,67 @@
import { View, Text } from "react-native-ui-lib"; import { View, Text } from "react-native-ui-lib";
import React from "react"; import React from "react";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { ImageBackground, StyleSheet } from "react-native";
import { colorMap } from "@/constants/colorMap";
const UsersList = () => { const UsersList = () => {
const { data: familyMembers } = useGetFamilyMembers();
const capitalizeFirstLetter = (str: string) => {
if (!str) return '';
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};
return ( return (
<View centerH gap-20> <View centerH paddingT-10>
<View {familyMembers?.map((member, index) => (
style={{ <>
aspectRatio: 1, {member.pfp ? (
width: 113, <ImageBackground
backgroundColor: "red", key={index}
borderRadius: 100, source={{ uri: member.pfp }}
}} style={styles.pfp}
/> borderRadius={100}
<View />
style={{ ) : (
aspectRatio: 1, <View
width: 113, key={index}
backgroundColor: "red", style={styles.pfp}
borderRadius: 100, 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> </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; export default UsersList;