51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Text, View, FlatList } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { getStyles } from './tasks.styles';
|
|
import { MOCK_TASKS } from '../../mock-data/tasks';
|
|
import { useTheme } from '../../theme';
|
|
|
|
export const TasksScreen = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={MOCK_TASKS}
|
|
keyExtractor={item => item.id}
|
|
contentContainerStyle={styles.listContent}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.card}>
|
|
<View style={styles.header}>
|
|
<View style={styles.titleWrapper}>
|
|
<Icon
|
|
name="checkbox-outline"
|
|
size={20}
|
|
color={item.color}
|
|
style={styles.icon}
|
|
/>
|
|
<Text style={styles.title}>{item.title}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.body}>
|
|
<Text style={styles.project}>
|
|
{item.project ? `Project: ${item.project}` : item.comment}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.footer}>
|
|
<View
|
|
style={[styles.badge, { backgroundColor: `${item.color}15` }]}
|
|
>
|
|
<Text style={[styles.badgeText, { color: item.color }]}>
|
|
{item.priority} Priority
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|