79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './leadDetailHeader.styles';
|
|
import { LeadDetailHeaderProps } from './leadDetailHeader.props';
|
|
import { getInitials, toRgba } from '@utils';
|
|
|
|
export const LeadDetailHeader: React.FC<LeadDetailHeaderProps> = ({
|
|
name,
|
|
company,
|
|
email,
|
|
phonenumber,
|
|
statusName,
|
|
statusColor,
|
|
avatarColor,
|
|
onStatusPress,
|
|
onEmailPress,
|
|
onPhonePress,
|
|
}) => {
|
|
const { theme: colors, isDark } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const accent = statusColor || avatarColor || '#5B4CF5';
|
|
const badgeBg = toRgba(accent, isDark ? 0.20 : 0.12);
|
|
|
|
return (
|
|
<View style={styles.card}>
|
|
{/* Top Row: Avatar + Info + Status */}
|
|
<View style={styles.topRow}>
|
|
<View style={[styles.avatar, { backgroundColor: accent }]}>
|
|
<Text style={styles.avatarText}>{getInitials(name)}</Text>
|
|
</View>
|
|
|
|
<View style={styles.info}>
|
|
<Text style={styles.name} numberOfLines={1}>{name || 'No Name'}</Text>
|
|
{company ? (
|
|
<Text style={styles.company} numberOfLines={1}>{company}</Text>
|
|
) : null}
|
|
<Text style={styles.contact} numberOfLines={1}>
|
|
<Icon name="call-outline" size={10} color={colors.textMuted} />
|
|
{' '}{phonenumber || 'N/A'}{' '}
|
|
<Icon name="mail-outline" size={10} color={colors.textMuted} />
|
|
{' '}{email || 'N/A'}
|
|
</Text>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
onPress={onStatusPress}
|
|
activeOpacity={onStatusPress ? 0.7 : 1}
|
|
disabled={!onStatusPress}>
|
|
<View style={[styles.statusBadge, { backgroundColor: badgeBg }]}>
|
|
<View style={[styles.statusDot, { backgroundColor: accent }]} />
|
|
<Text style={[styles.statusText, { color: accent }]}>
|
|
{statusName || 'No Status'}
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Bottom Row: Call + Email Buttons */}
|
|
<View style={styles.actionRow}>
|
|
<TouchableOpacity
|
|
style={[styles.actionBtn, { backgroundColor: `${accent}12`, borderColor: `${accent}30` }]}
|
|
onPress={onPhonePress}>
|
|
<Icon name="call" size={14} color={accent} />
|
|
<Text style={[styles.btnText, { color: accent }]}>Call</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[styles.actionBtn, styles.secondaryBtn]}
|
|
onPress={onEmailPress}>
|
|
<Icon name="mail" size={14} color={colors.textSecondary} />
|
|
<Text style={[styles.btnText, { color: colors.textSecondary }]}>Email</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|