90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import { FontAwesome } from "@expo/vector-icons";
|
|
import { router } from "expo-router";
|
|
import React from "react";
|
|
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
|
|
|
export type PersonLite = {
|
|
id?: number;
|
|
personId?: number;
|
|
name?: string;
|
|
birthDate?: string | null;
|
|
imageUrl?: string | null;
|
|
};
|
|
|
|
const calcAge = (birthDate?: string | null): number | null => {
|
|
if (!birthDate) return null;
|
|
const d = new Date(birthDate);
|
|
if (isNaN(d.getTime())) return null;
|
|
const today = new Date();
|
|
let age = today.getFullYear() - d.getFullYear();
|
|
const m = today.getMonth() - d.getMonth();
|
|
if (m < 0 || (m === 0 && today.getDate() < d.getDate())) age--;
|
|
return age < 0 || age > 130 ? null : age;
|
|
};
|
|
|
|
type Props = {
|
|
person: any;
|
|
onPress?: () => void;
|
|
};
|
|
|
|
export default function PersonRow({ person }: Props) {
|
|
const age = calcAge(person.birthDate);
|
|
const id = person.personId ?? person.id;
|
|
|
|
const goToPerson = React.useCallback(
|
|
(id: number) => {
|
|
console.log("go to person", id);
|
|
router.push({
|
|
pathname: "/participant",
|
|
params: { participantId: String(id), name: person.name },
|
|
});
|
|
},
|
|
[person.name]
|
|
);
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
goToPerson(Number(id));
|
|
}}
|
|
style={styles.personRow}
|
|
>
|
|
<View style={styles.avatarCircle}>
|
|
<FontAwesome name="user" size={22} color="#ccc" />
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={styles.personName}>
|
|
{person.name || "Unbekannt"}
|
|
{age != null ? ` (${age})` : ""}
|
|
</Text>
|
|
{/* <Text style={styles.personMeta}>aus: unterschiedlichen Shows</Text> */}
|
|
</View>
|
|
<FontAwesome name="chevron-right" size={14} color="#888" />
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
personRow: {
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: "#1b1e2b",
|
|
borderRadius: 10,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 10,
|
|
marginBottom: 8,
|
|
},
|
|
avatarCircle: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 999,
|
|
backgroundColor: "#2a2f45",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginRight: 10,
|
|
},
|
|
personName: { color: "white", fontSize: 16, fontWeight: "600" },
|
|
personMeta: { color: "#bbb", fontSize: 12, marginTop: 2 },
|
|
});
|