63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Text, View, FlatList } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { getStyles } from './projects.styles';
|
|
import { MOCK_PROJECTS } from '../../mock-data/projects';
|
|
import { useTheme } from '../../theme';
|
|
|
|
export const ProjectsScreen = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const renderItem = ({ item }: { item: any }) => (
|
|
<View style={styles.card}>
|
|
<View style={styles.header}>
|
|
<View style={styles.titleWrapper}>
|
|
<Icon
|
|
name="rocket-outline"
|
|
size={20}
|
|
color={item.color}
|
|
style={styles.icon}
|
|
/>
|
|
<Text style={styles.title}>{item.name}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.body}>
|
|
<Text style={styles.lead}>Lead: {item.lead}</Text>
|
|
<View style={styles.progressRow}>
|
|
<Text style={styles.progressLabel}>Progress</Text>
|
|
<Text style={styles.progressValue}>
|
|
{Math.round(item.progress * 100)}%
|
|
</Text>
|
|
</View>
|
|
<View style={styles.progressBarBg}>
|
|
<View
|
|
style={[
|
|
styles.progressBarFill,
|
|
{ width: `${item.progress * 100}%`, backgroundColor: item.color },
|
|
]}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View style={styles.footer}>
|
|
<View style={[styles.badge, { backgroundColor: `${item.color}15` }]}>
|
|
<Text style={[styles.badgeText, { color: item.color }]}>
|
|
{item.status}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={MOCK_PROJECTS}
|
|
keyExtractor={item => item.id}
|
|
contentContainerStyle={styles.listContent}
|
|
renderItem={renderItem}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|