116 lines
2.6 KiB
TypeScript
116 lines
2.6 KiB
TypeScript
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
|
|
import { Ionicons } from '@expo/vector-icons'
|
|
import { Avatar } from '@/components/ui/Avatar'
|
|
|
|
interface MemberCardProps {
|
|
member: {
|
|
id: string
|
|
name: string
|
|
betrieb: string
|
|
sparte: string
|
|
ort: string
|
|
istAusbildungsbetrieb: boolean
|
|
avatarUrl: string | null
|
|
}
|
|
onPress: () => void
|
|
}
|
|
|
|
export function MemberCard({ member, onPress }: MemberCardProps) {
|
|
return (
|
|
<TouchableOpacity onPress={onPress} style={styles.card} activeOpacity={0.76}>
|
|
<Avatar name={member.name} imageUrl={member.avatarUrl ?? undefined} size={48} />
|
|
|
|
<View style={styles.info}>
|
|
<Text style={styles.name} numberOfLines={1}>
|
|
{member.name}
|
|
</Text>
|
|
<Text style={styles.company} numberOfLines={1}>
|
|
{member.betrieb}
|
|
</Text>
|
|
<View style={styles.tagsRow}>
|
|
<View style={styles.tag}>
|
|
<Text style={styles.tagText}>{member.sparte}</Text>
|
|
</View>
|
|
<Text style={styles.separator}>·</Text>
|
|
<Text style={styles.location}>{member.ort}</Text>
|
|
{member.istAusbildungsbetrieb && (
|
|
<View style={styles.ausbildungTag}>
|
|
<Text style={styles.ausbildungText}>Ausbildung</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
|
|
<Ionicons name="chevron-forward" size={18} color="#D4D4D8" />
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
backgroundColor: '#FFFFFF',
|
|
borderRadius: 16,
|
|
padding: 14,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
shadowColor: '#1C1917',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.08,
|
|
shadowRadius: 12,
|
|
elevation: 3,
|
|
},
|
|
info: {
|
|
flex: 1,
|
|
minWidth: 0,
|
|
},
|
|
name: {
|
|
fontSize: 15,
|
|
fontWeight: '600',
|
|
color: '#0F172A',
|
|
letterSpacing: -0.2,
|
|
},
|
|
company: {
|
|
fontSize: 13,
|
|
color: '#475569',
|
|
marginTop: 2,
|
|
},
|
|
tagsRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flexWrap: 'wrap',
|
|
gap: 6,
|
|
marginTop: 6,
|
|
},
|
|
tag: {
|
|
backgroundColor: '#F4F4F5',
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
borderRadius: 99,
|
|
},
|
|
tagText: {
|
|
fontSize: 11,
|
|
color: '#475569',
|
|
fontWeight: '500',
|
|
},
|
|
separator: {
|
|
fontSize: 11,
|
|
color: '#D4D4D8',
|
|
},
|
|
location: {
|
|
fontSize: 11,
|
|
color: '#64748B',
|
|
},
|
|
ausbildungTag: {
|
|
backgroundColor: '#F0FDF4',
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
borderRadius: 99,
|
|
},
|
|
ausbildungText: {
|
|
fontSize: 11,
|
|
color: '#15803D',
|
|
fontWeight: '600',
|
|
},
|
|
})
|