mirror of
https://github.com/urosran/cally.git
synced 2025-07-16 01:56:16 +00:00
ui tweaks and fixes
This commit is contained in:
@ -1,18 +1,36 @@
|
||||
import { Image, Text, View } from "react-native-ui-lib";
|
||||
import React from "react";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { colorMap } from "@/constants/colorMap";
|
||||
import { useAtom } from "jotai";
|
||||
import { isFamilyViewAtom } from "../pages/calendar/atoms";
|
||||
import { useGetChildrenByParentId } from "@/hooks/firebase/useGetChildrenByParentId";
|
||||
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
|
||||
import { child } from "@react-native-firebase/storage";
|
||||
|
||||
const HeaderTemplate = (props: {
|
||||
message: string;
|
||||
isWelcome: boolean;
|
||||
children?: React.ReactNode;
|
||||
link?: React.ReactNode;
|
||||
isCalendar?: boolean;
|
||||
isToDos?: boolean;
|
||||
isBrainDump?: boolean;
|
||||
isGroceries?: boolean;
|
||||
}) => {
|
||||
const { user, profileData } = useAuthContext();
|
||||
|
||||
const headerHeight: number = 72;
|
||||
const { data: members } = useGetFamilyMembers();
|
||||
const [children, setChildren] = useState<UserProfile[]>([]);
|
||||
const [isFamilyView] = useAtom(isFamilyViewAtom);
|
||||
|
||||
const headerHeight: number =
|
||||
(props.isCalendar && 65.54) ||
|
||||
(props.isToDos && 84) ||
|
||||
(props.isGroceries && 72.09) ||
|
||||
65.54;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
pfp: {
|
||||
@ -26,14 +44,71 @@ const HeaderTemplate = (props: {
|
||||
pfpTxt: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 30,
|
||||
color: 'white',
|
||||
color: "white",
|
||||
},
|
||||
childrenPfpArr: {
|
||||
width: 65.54,
|
||||
position: "absolute",
|
||||
bottom: -12.44,
|
||||
left: (children.length > 3 && -9) || 0,
|
||||
height: 27.32,
|
||||
},
|
||||
childrenPfp: {
|
||||
aspectRatio: 1,
|
||||
width: 27.32,
|
||||
backgroundColor: "#fd1575",
|
||||
borderRadius: 50,
|
||||
position: "absolute",
|
||||
borderWidth: 2,
|
||||
borderColor: "#f2f2f2",
|
||||
},
|
||||
bottomMarg: {
|
||||
marginBottom: isFamilyView ? 30 : 15,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (members) {
|
||||
const childrenMembers = members.filter(
|
||||
(member) => member.userType === ProfileType.CHILD
|
||||
);
|
||||
setChildren(childrenMembers);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<View row centerV marginV-15>
|
||||
<View row centerV marginV-15 style={styles.bottomMarg}>
|
||||
{profileData?.pfp ? (
|
||||
<Image source={{ uri: profileData.pfp }} style={styles.pfp} />
|
||||
<View>
|
||||
<Image source={{ uri: profileData.pfp }} style={styles.pfp} />
|
||||
{isFamilyView && props.isCalendar && (
|
||||
<View style={styles.childrenPfpArr} row>
|
||||
{children?.slice(0, 3).map((child, index) => {
|
||||
return child.pfp ? (
|
||||
<Image
|
||||
source={{ uri: child.pfp }}
|
||||
style={[styles.childrenPfp, { left: index * 19 }]}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
style={[styles.childrenPfp, { left: index * 19 }]}
|
||||
center
|
||||
>
|
||||
<Text style={{ color: "white" }}>
|
||||
{child?.firstName?.at(0)}
|
||||
{child?.firstName?.at(1)}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
{children?.length > 3 && (
|
||||
<View style={[styles.childrenPfp, { left: 3 * 19 }]} center>
|
||||
<Text style={{ color: "white", fontFamily: "Manrope_600SemiBold", fontSize: 12 }}>+{children.length - 3}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.pfp} center>
|
||||
<Text style={styles.pfpTxt}>
|
||||
|
Reference in New Issue
Block a user