Initial commit

Generated by create-expo-app 3.2.0.

components/ProductCart.tsx

@@ -0,0 +1,58 @@
+import { Product } from "@/utils/api";
+import { COLORS } from "@/utils/colors";
+import { useRouter } from "expo-router";
+import React from "react";
+import { Pressable, StyleSheet, Text, Image, View } from "react-native";
+
+interface ProductCardProps {
+  product: Product;
+}
+
+const ProductCard = ({ product }: ProductCardProps) => {
+  const router = useRouter();
+  return (
+    <Pressable
+      style={styles.productCard}
+      onPress={() => router.push(`/product/${product.id}`)}
+    >
+      <Image source={{ uri: product.image }} style={styles.image} />
+      <View style={styles.productInfo}>
+        <Text style={styles.title} numberOfLines={2}>
+          {product.title}
+        </Text>
+        <Text style={styles.price}>{product.price}</Text>
+      </View>
+    </Pressable>
+  );
+};
+
+export default ProductCard;
+
+const styles = StyleSheet.create({
+  productCard: {
+    flex: 1,
+    margin: 0,
+    gap: 8,
+    padding: 12,
+    borderRadius: 16,
+    backgroundColor: "#fff",
+    boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
+  },
+  image: {
+    width: "100%",
+    height: 150,
+    borderRadius: 12,
+  },
+  productInfo: {
+    gap: 4,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  price: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: COLORS.primary,
+  },
+});