68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { User } from "lucide-react-native";
|
|
import React from "react";
|
|
import { View, Text, Image, TouchableOpacity } from "react-native";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Contact } from "~/lib/stores";
|
|
|
|
interface ProfileCardProps {
|
|
contact?: Contact;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
export default function ProfileCard({ contact, onPress }: ProfileCardProps) {
|
|
const { t } = useTranslation();
|
|
|
|
if (!contact) {
|
|
return (
|
|
<View className="flex flex-col items-left space-y-2 mt-3">
|
|
<View className="bg-orange-50 rounded-lg p-5">
|
|
<User className="text-orange-400" size={24} />
|
|
</View>
|
|
<Text className="text-primary font-dmsans-medium text-sm">
|
|
{t("components.profilecard.emptyLabelContact")}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const displayName =
|
|
contact.firstName ||
|
|
contact.name ||
|
|
t("components.profilecard.unknownContact");
|
|
const initials = displayName
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")
|
|
.toUpperCase()
|
|
.substring(0, 2);
|
|
|
|
return (
|
|
<TouchableOpacity onPress={onPress} activeOpacity={0.7}>
|
|
<View className="flex flex-col items-center space-y-2 mt-3 mx-[5px]">
|
|
<View className="bg-primary/10 rounded-lg p-4 w-24 h-24 flex items-center justify-center">
|
|
{contact.imageAvailable && contact.image ? (
|
|
<Image
|
|
source={{ uri: contact.image.uri }}
|
|
className="w-12 h-12 rounded-lg"
|
|
resizeMode="cover"
|
|
/>
|
|
) : (
|
|
<View className="w-16 h-16 rounded-lg bg-primary/20 flex items-center justify-center">
|
|
<Text className="text-primary font-dmsans-bold text-sm">
|
|
{initials}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Text
|
|
className="text-primary font-dmsans-medium pt-2 text-sm text-center max-w-[60px]"
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{displayName}
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|