61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, TouchableOpacity } from 'react-native';
|
|
import { Card, Text, Chip, useTheme } from '@rneui/themed';
|
|
import { Task, TaskStatus } from '../types/task';
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
|
|
interface TaskCardProps {
|
|
task: Task;
|
|
onPress: (id: string) => void;
|
|
}
|
|
|
|
const statusColors: Record<TaskStatus, string> = {
|
|
IDLE: 'grey',
|
|
RUNNING: 'blue',
|
|
COMPLETED: 'green',
|
|
ERROR: 'red',
|
|
};
|
|
|
|
const TaskCard: React.FC<TaskCardProps> = ({ task, onPress }) => {
|
|
const { theme } = useTheme();
|
|
|
|
return (
|
|
<TouchableOpacity onPress={() => onPress(task.id)} style={{ flex: 1, width: '50%' }}>
|
|
<Card containerStyle={styles.card}>
|
|
<Card.Title style={styles.title}>{task.name}</Card.Title>
|
|
<Card.Divider />
|
|
<Chip
|
|
title={task.status}
|
|
icon={{
|
|
name: 'information',
|
|
type: 'material-community',
|
|
size: 20,
|
|
color: statusColors[task.status],
|
|
}}
|
|
type="outline"
|
|
containerStyle={styles.chip}
|
|
titleStyle={{ color: statusColors[task.status], fontSize: 12 }}
|
|
buttonStyle={{ borderColor: statusColors[task.status] }}
|
|
/>
|
|
</Card>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
margin: 4,
|
|
borderRadius: 8,
|
|
},
|
|
title: {
|
|
marginBottom: 12,
|
|
minHeight: 50, // Ensure cards have similar height
|
|
textAlign: 'left',
|
|
},
|
|
chip: {
|
|
alignSelf: 'flex-start',
|
|
},
|
|
});
|
|
|
|
export default TaskCard;
|