80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Text,
|
|
View,
|
|
FlatList,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
} from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { getStyles } from './leads.styles';
|
|
import { MOCK_LEADS } from '../../mock-data/leads';
|
|
import { useTheme } from '../../theme';
|
|
|
|
export const LeadsScreen = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<View style={styles.searchWrapper}>
|
|
<Icon
|
|
name="search-outline"
|
|
size={20}
|
|
color={colors.textSecondary}
|
|
style={styles.searchIcon}
|
|
/>
|
|
<TextInput
|
|
style={styles.searchInput}
|
|
placeholder="Search leads, companies..."
|
|
placeholderTextColor={colors.textMuted}
|
|
/>
|
|
</View>
|
|
<TouchableOpacity style={styles.filterButton}>
|
|
<Icon name="filter-outline" size={20} color={colors.text} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<FlatList
|
|
data={MOCK_LEADS}
|
|
keyExtractor={item => item.id}
|
|
contentContainerStyle={styles.listContent}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.leadCard}>
|
|
<View style={styles.cardHeader}>
|
|
<View>
|
|
<Text style={styles.leadName}>{item.name}</Text>
|
|
<Text style={styles.leadCompany}>{item.company}</Text>
|
|
</View>
|
|
<View
|
|
style={[
|
|
styles.statusBadge,
|
|
{ backgroundColor: `${item.color}15` },
|
|
]}
|
|
>
|
|
<Text style={[styles.statusText, { color: item.color }]}>
|
|
{item.status}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.cardFooter}>
|
|
<View style={styles.infoRow}>
|
|
<Icon
|
|
name="mail-outline"
|
|
size={16}
|
|
color={colors.textSecondary}
|
|
/>
|
|
<Text style={styles.infoValue}>{item.email}</Text>
|
|
</View>
|
|
<TouchableOpacity style={styles.actionButton}>
|
|
<Icon name="chevron-forward" size={18} color={colors.icon} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|