116 lines
2.8 KiB
TypeScript
116 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
|
|
import { ProductResponse } from '../services/product';
|
|
import { useRouter } from 'expo-router';
|
|
|
|
interface ProductCardProps {
|
|
product: ProductResponse;
|
|
}
|
|
|
|
const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
|
|
const router = useRouter();
|
|
|
|
const handlePress = () => {
|
|
router.push(`/products/${product.productId}`);
|
|
};
|
|
|
|
const formatPrice = (price: number) => {
|
|
return new Intl.NumberFormat('vi-VN', {
|
|
style: 'currency',
|
|
currency: 'VND',
|
|
}).format(price);
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity style={styles.card} onPress={handlePress} activeOpacity={0.7}>
|
|
<Image
|
|
source={{ uri: product.imageUrl || 'https://via.placeholder.com/150' }}
|
|
style={styles.image}
|
|
resizeMode="cover"
|
|
/>
|
|
<View style={styles.content}>
|
|
<Text style={styles.productName} numberOfLines={2}>
|
|
{product.productName}
|
|
</Text>
|
|
<Text style={styles.categoryName} numberOfLines={1}>
|
|
{product.categoryName}
|
|
</Text>
|
|
<View style={styles.priceContainer}>
|
|
<Text style={styles.price}>{formatPrice(product.price)}</Text>
|
|
{product.stockQuantity > 0 ? (
|
|
<View style={styles.stockBadge}>
|
|
<Text style={styles.stockText}>Còn {product.stockQuantity}</Text>
|
|
</View>
|
|
) : (
|
|
<View style={[styles.stockBadge, styles.outOfStock]}>
|
|
<Text style={[styles.stockText, styles.outOfStockText]}>Hết hàng</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
backgroundColor: '#fff',
|
|
borderRadius: 12,
|
|
marginHorizontal: 16,
|
|
marginVertical: 8,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
overflow: 'hidden',
|
|
},
|
|
image: {
|
|
width: '100%',
|
|
height: 200,
|
|
backgroundColor: '#f0f0f0',
|
|
},
|
|
content: {
|
|
padding: 12,
|
|
},
|
|
productName: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#333',
|
|
marginBottom: 4,
|
|
},
|
|
categoryName: {
|
|
fontSize: 13,
|
|
color: '#666',
|
|
marginBottom: 8,
|
|
},
|
|
priceContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
price: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
color: '#e91e63',
|
|
},
|
|
stockBadge: {
|
|
backgroundColor: '#4caf50',
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
borderRadius: 4,
|
|
},
|
|
stockText: {
|
|
fontSize: 12,
|
|
color: '#fff',
|
|
fontWeight: '500',
|
|
},
|
|
outOfStock: {
|
|
backgroundColor: '#f44336',
|
|
},
|
|
outOfStockText: {
|
|
color: '#fff',
|
|
},
|
|
});
|
|
|
|
export default ProductCard; |