47 lines
2.0 KiB
TypeScript
47 lines
2.0 KiB
TypeScript
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { ChevronRight } from 'lucide-react-native';
|
|
import { Contact } from '@/store/useContactStore';
|
|
|
|
const statusColors: Record<string, string> = {
|
|
'Active': 'bg-green-100 text-green-700',
|
|
'Return Visit': 'bg-blue-100 text-blue-700',
|
|
'Bible Study': 'bg-purple-100 text-purple-700',
|
|
'Not Interested': 'bg-gray-100 text-gray-500',
|
|
'Do Not Call': 'bg-red-100 text-red-600',
|
|
};
|
|
|
|
interface Props {
|
|
contact: Contact;
|
|
onRefresh: () => void;
|
|
}
|
|
|
|
export function ContactCard({ contact, onRefresh }: Props) {
|
|
const router = useRouter();
|
|
const initials = contact.fullName.split(' ').map((n) => n[0]).join('').substring(0, 2).toUpperCase();
|
|
const statusStyle = statusColors[contact.status] ?? 'bg-gray-100 text-gray-500';
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
className="bg-white rounded-2xl p-4 flex-row items-center shadow-sm"
|
|
onPress={() => router.push({ pathname: '/contact/[id]', params: { id: contact.id } })}
|
|
accessibilityRole="button"
|
|
accessibilityLabel={`${contact.fullName}, ${contact.status}${contact.address ? `, ${contact.address}` : ''}`}
|
|
accessibilityHint="Tap to view contact details"
|
|
style={{ minHeight: 72 }}
|
|
>
|
|
<View className="w-12 h-12 rounded-full bg-primary items-center justify-center mr-3">
|
|
<Text className="text-white font-bold text-lg" accessibilityElementsHidden>{initials}</Text>
|
|
</View>
|
|
<View className="flex-1">
|
|
<Text className="text-charcoal font-semibold text-base" numberOfLines={1}>{contact.fullName}</Text>
|
|
{contact.address ? <Text className="text-gray-500 text-sm" numberOfLines={1}>{contact.address}</Text> : null}
|
|
<View className="mt-1">
|
|
<Text className={`text-xs font-medium px-2 py-0.5 rounded-full self-start ${statusStyle}`}>{contact.status}</Text>
|
|
</View>
|
|
</View>
|
|
<ChevronRight size={18} color="#9CA3AF" accessibilityElementsHidden />
|
|
</TouchableOpacity>
|
|
);
|
|
}
|