49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Text, View, FlatList } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { getStyles } from './tickets.styles';
|
|
import { MOCK_TICKETS } from '../../mock-data/tickets';
|
|
import { useTheme } from '../../theme';
|
|
|
|
export const TicketsScreen = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={MOCK_TICKETS}
|
|
keyExtractor={item => item.id}
|
|
contentContainerStyle={styles.listContent}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.card}>
|
|
<View style={styles.header}>
|
|
<View style={styles.titleWrapper}>
|
|
<Icon
|
|
name="bug-outline"
|
|
size={20}
|
|
color={item.color}
|
|
style={styles.icon}
|
|
/>
|
|
<Text style={styles.title}>{item.ticketId}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.body}>
|
|
<Text style={styles.subject}>{item.subject}</Text>
|
|
</View>
|
|
<View style={styles.footer}>
|
|
<View
|
|
style={[styles.badge, { backgroundColor: `${item.color}15` }]}
|
|
>
|
|
<Text style={[styles.badgeText, { color: item.color }]}>
|
|
{item.severity}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|