182 lines
4.0 KiB
TypeScript
182 lines
4.0 KiB
TypeScript
import React from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
Platform,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { Trip, TRIP_STATUS_CONFIG } from "./types";
|
|
|
|
interface TripCardProps {
|
|
trip: Trip;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
export default function TripCard({ trip, onPress }: TripCardProps) {
|
|
const statusConfig = TRIP_STATUS_CONFIG[trip.status];
|
|
|
|
return (
|
|
<TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<View style={styles.headerLeft}>
|
|
<Ionicons
|
|
name={statusConfig.icon as any}
|
|
size={24}
|
|
color={statusConfig.textColor}
|
|
/>
|
|
<View style={styles.titleContainer}>
|
|
<Text style={styles.title}>{trip.title}</Text>
|
|
<Text style={styles.code}>{trip.code}</Text>
|
|
</View>
|
|
</View>
|
|
<View
|
|
style={[
|
|
styles.badge,
|
|
{
|
|
backgroundColor: statusConfig.bgColor,
|
|
},
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.badgeText,
|
|
{
|
|
color: statusConfig.textColor,
|
|
},
|
|
]}
|
|
>
|
|
{statusConfig.label}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Info Grid */}
|
|
<View style={styles.infoGrid}>
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.label}>Tàu</Text>
|
|
<Text style={styles.value}>
|
|
{trip.vessel} ({trip.vesselCode})
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.label}>Khởi hành</Text>
|
|
<Text style={styles.value}>{trip.departureDate}</Text>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.label}>Trở về</Text>
|
|
<Text style={styles.value}>{trip.returnDate || "-"}</Text>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.label}>Thời gian</Text>
|
|
<Text style={[styles.value, styles.duration]}>{trip.duration}</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
backgroundColor: "#FFFFFF",
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
marginBottom: 12,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 8,
|
|
elevation: 2,
|
|
borderWidth: 1,
|
|
borderColor: "#F3F4F6",
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-start",
|
|
marginBottom: 16,
|
|
},
|
|
headerLeft: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
flex: 1,
|
|
},
|
|
titleContainer: {
|
|
marginLeft: 12,
|
|
flex: 1,
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
color: "#111827",
|
|
marginBottom: 2,
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
code: {
|
|
fontSize: 14,
|
|
color: "#6B7280",
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
badge: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 4,
|
|
borderRadius: 12,
|
|
},
|
|
badgeText: {
|
|
fontSize: 12,
|
|
fontWeight: "500",
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
infoGrid: {
|
|
gap: 12,
|
|
},
|
|
infoRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
color: "#6B7280",
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
value: {
|
|
fontSize: 14,
|
|
color: "#111827",
|
|
fontWeight: "500",
|
|
textAlign: "right",
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
duration: {
|
|
color: "#3B82F6",
|
|
},
|
|
});
|