58 lines
2.7 KiB
TypeScript
58 lines
2.7 KiB
TypeScript
import { AlertTriangle, Car, KeySquare } from 'lucide-react-native';
|
|
import React from 'react';
|
|
import { Text, View, TouchableOpacity } from 'react-native';
|
|
import { MachineAttendanceItem } from '@/types/types';
|
|
|
|
interface MachineCardProps {
|
|
item: MachineAttendanceItem;
|
|
onExitPress: (item: MachineAttendanceItem) => void;
|
|
}
|
|
|
|
export default function MachineCard({ item, onExitPress }: MachineCardProps) {
|
|
return (
|
|
<View className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex-col mb-4">
|
|
<View className="flex-row items-center border-b border-gray-50 pb-3 mb-3">
|
|
<View className="bg-blue-50 p-4 rounded-full mr-4 flex-shrink-0">
|
|
<Car size={24} color="#1071C2" pointerEvents="none"/>
|
|
</View>
|
|
<View className="flex-1 mr-2">
|
|
<Text className="text-base font-bold text-primary-dark mb-1 leading-tight uppercase" numberOfLines={2}>
|
|
{item.name}
|
|
</Text>
|
|
<Text className="text-xs font-medium text-primary-dark mb-1 leading-tight" numberOfLines={2}>
|
|
{item.description}
|
|
</Text>
|
|
<Text className="text-xs font-bold text-gray-400 mt-1">
|
|
{item.date}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View className="flex-row items-center flex-wrap gap-x-4 gap-y-3 px-1 justify-start">
|
|
<View className="flex-row items-center">
|
|
<Text className={`font-bold ${!item.out ? 'text-red-600' : 'text-green-600'}`}>
|
|
Entrata: {item.in}
|
|
</Text>
|
|
</View>
|
|
|
|
{item.out ? (
|
|
<View className="flex-row items-center">
|
|
<Text className="font-bold text-green-600">
|
|
Uscita: {item.out}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<View className="flex-row items-center flex-1 justify-end">
|
|
<TouchableOpacity
|
|
onPress={() => onExitPress(item)}
|
|
className="bg-red-50 px-4 py-2 rounded-full border border-red-200 flex-row items-center shadow-sm active:bg-red-100"
|
|
>
|
|
<KeySquare size={14} color="#dc2626" />
|
|
<Text className="text-red-600 font-bold ml-2 text-sm">Registra Uscita</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|