products

2025-11-12 16:03:57 +07:00
parent 87269a6615
commit 0ca7536b70
11 changed files with 1250 additions and 60 deletions
--- a/components/ProductCard.tsx
+++ b/components/ProductCard.tsx
@@ -0,0 +1,116 @@
+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;