113 lines
2.7 KiB
TypeScript
113 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import { Order } from '@/constants/types';
|
|
import Animated, {useAnimatedStyle,useSharedValue,withTiming,Easing} from 'react-native-reanimated';
|
|
import COLORS from '@/constants/colors';
|
|
|
|
interface OrderItemProps {
|
|
order: Order;
|
|
}
|
|
|
|
export default function OrderItem({ order }: OrderItemProps) {
|
|
const scale = useSharedValue(1);
|
|
|
|
const animatedStyle = useAnimatedStyle(() => {
|
|
return {
|
|
transform: [{ scale: scale.value }],
|
|
};
|
|
});
|
|
|
|
const handlePressIn = () => {
|
|
scale.value = withTiming(0.98, {
|
|
duration: 100,
|
|
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
|
|
});
|
|
};
|
|
|
|
const handlePressOut = () => {
|
|
scale.value = withTiming(1, {
|
|
duration: 200,
|
|
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
|
|
});
|
|
};
|
|
|
|
const statusBackgroundColor = order.status === "Confirmée" ? "#4C7C54" : COLORS.primary;
|
|
const statusText = order.status === "Confirmée" ? "Terminée" : order.status;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={0.9}
|
|
onPressIn={handlePressIn}
|
|
onPressOut={handlePressOut}
|
|
>
|
|
<Animated.View style={[styles.container, animatedStyle]}>
|
|
<View style={styles.header}>
|
|
{/* Show the orderId */}
|
|
<Text style={styles.orderId}>Commande #{order.orderId}</Text>
|
|
<View style={[styles.statusContainer, { backgroundColor: statusBackgroundColor }]}>
|
|
<Text style={styles.statusText}>{statusText}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.itemsContainer}>
|
|
{order.items.map((item, index) => (
|
|
<Text key={index} style={styles.item}>
|
|
{item.name} x {item.quantity}
|
|
</Text>
|
|
))}
|
|
</View>
|
|
<Text style={styles.time}>{order.timeAgo}</Text>
|
|
</Animated.View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: '#F2F2F2',
|
|
borderRadius: 12,
|
|
padding: 25,
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 1,
|
|
},
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 3,
|
|
elevation: 2,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 8,
|
|
},
|
|
orderId: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#333333',
|
|
},
|
|
statusContainer: {
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
borderRadius: 4,
|
|
},
|
|
statusText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
},
|
|
itemsContainer: {
|
|
marginBottom: 8,
|
|
},
|
|
item: {
|
|
fontSize: 14,
|
|
color: '#666666',
|
|
lineHeight: 20,
|
|
},
|
|
time: {
|
|
fontSize: 12,
|
|
color: '#999999',
|
|
alignSelf: 'flex-end',
|
|
},
|
|
});
|