From 19f99ca33f09818dcaa31da0fdb5bcbc07531405 Mon Sep 17 00:00:00 2001 From: Tieptk Date: Sat, 19 Jul 2025 12:08:32 +0700 Subject: [PATCH] update 19/7 --- assets/images/lienkien-ram.png | Bin 0 -> 3663 bytes src/components/buildpc/CreateBuildpc.tsx | 255 +++++++++++++++++++++++ src/components/buildpc/PopupBuildpc.tsx | 98 +++++++++ src/navigation/AppNavigator.tsx | 2 + src/screens/HomeScreen.tsx | 8 +- src/screens/buildpc/Buildpc.tsx | 192 +++++++++++++++++ 6 files changed, 553 insertions(+), 2 deletions(-) create mode 100644 assets/images/lienkien-ram.png create mode 100644 src/components/buildpc/CreateBuildpc.tsx create mode 100644 src/components/buildpc/PopupBuildpc.tsx create mode 100644 src/screens/buildpc/Buildpc.tsx diff --git a/assets/images/lienkien-ram.png b/assets/images/lienkien-ram.png new file mode 100644 index 0000000000000000000000000000000000000000..30633f37141aaef436f7b1ca3a6004fbfb6f1434 GIT binary patch literal 3663 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 + {/* Item CPU */} + + CPU + + + + + + AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor + + + + Số lượng + + + + Giá bán: + 4.700.000 Vnđ + + + Khuyến mãi: + 20% + + + Thành tiền: + 4.000.000đ + + + + Nhà cung cấp + + + + + + + + + + + + + + + {/* Thêm lựa chọn CPU */} + setShowPopup(true)} + > + + Chọn thêm CPU + + {/* Tổng tiền */} + + Tổng tiền 2 sản phẩm: 8.000.000đ + + + 🖨️ In đơn hàng + + + Mua hàng tại Hacom + + + + {/* Popup */} + {showPopup && ( + setShowPopup(false)} /> + )} + + ); +} + +export default CreateBuildpc; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#fff", + }, + componentTitle: { + fontWeight: "bold", + fontSize: 15, + marginBottom: 5, + }, + itemRow: { + paddingVertical: 12, + borderBottomWidth: 1, + borderColor: "#ccc", + }, + + productInfo: { + flexDirection: "row", + alignItems: "flex-start", + justifyContent: "space-between", + }, + productLeft: { + width: width - 100, + }, + infolinhkien: { + flexDirection: "row", + }, + productImage: { + width: 60, + height: 60, + marginRight: 10, + borderWidth: 1, + borderColor: "#ccc", + }, + productName: { + flexShrink: 1, + }, + inputQl: { + borderWidth: 1, + borderColor: "#e3e3e3", + fontSize: 13, + width: 64, + height: 30, + marginLeft: 10, + paddingVertical: 0, + paddingHorizontal: 6, + borderRadius: 4, + paddingLeft: 10, + paddingRight: 10, + lineHeight: 20, + includeFontPadding: false, + }, + boxQlt: { + marginBottom: 15, + marginTop: 10, + flexDirection: "row", + alignItems: "center", + height: 30, + flex: 1, + }, + oldPrice: {}, + discount: {}, + totalPrice: { + fontWeight: "bold", + color: "red", + }, + supplierSection: { + alignItems: "center", + flexDirection: "row", + }, + supplierLogo: { + width: 60, + height: 30, + marginBottom: 6, + }, + buttonGroup: { + flexDirection: "row", + alignItems: "center", + width: 60, + }, + buyButton: { + marginRight: 6, + }, + removeButton: { + paddingVertical: 2, + }, + addButton: { + marginTop: 12, + backgroundColor: "#d4d4d4", + borderRadius: 4, + paddingVertical: 6, + alignItems: "center", + }, + addButtonText: { + fontSize: 12, + fontWeight: "bold", + }, + totalSection: { + marginTop: 24, + }, + totalText: { + fontSize: 18, + fontWeight: "bold", + color: "#dc2626", + textAlign: "right", + }, + totalButtons: { + flexDirection: "row", + justifyContent: "flex-end", + marginTop: 12, + }, + printButton: { + borderWidth: 1, + borderColor: "#b3b3b3", + paddingHorizontal: 16, + paddingVertical: 8, + marginRight: 10, + borderRadius: 4, + }, + checkoutButton: { + backgroundColor: "#5b21b6", + paddingHorizontal: 16, + paddingVertical: 8, + borderRadius: 4, + }, + checkoutText: { + color: "#fff", + fontWeight: "bold", + }, +}); diff --git a/src/components/buildpc/PopupBuildpc.tsx b/src/components/buildpc/PopupBuildpc.tsx new file mode 100644 index 0000000..1e33547 --- /dev/null +++ b/src/components/buildpc/PopupBuildpc.tsx @@ -0,0 +1,98 @@ +import React from "react"; +import { + Modal, + View, + Text, + TouchableOpacity, + StyleSheet, + ScrollView, +} from "react-native"; +import { Ionicons } from "@expo/vector-icons"; // hoặc react-native-vector-icons + +interface PopupBuildpcProps { + visible: boolean; + onClose: () => void; +} + +export default function PopupBuildpc({ visible, onClose }: PopupBuildpcProps) { + return ( + + + + {/* Close button */} + + + + + Chọn linh kiện thay thế + + {/* List of products (giả lập) */} + + {[1, 2, 3].map((item) => ( + + Linh kiện {item} + + Chọn + + + ))} + + + + + ); +} + +const styles = StyleSheet.create({ + overlay: { + flex: 1, + backgroundColor: "rgba(0,0,0,0.4)", + justifyContent: "center", + alignItems: "center", + }, + modalContent: { + width: "90%", + maxHeight: "80%", + backgroundColor: "#fff", + borderRadius: 12, + padding: 20, + position: "relative", + }, + closeBtn: { + position: "absolute", + right: 16, + top: 16, + zIndex: 10, + }, + title: { + fontSize: 20, + fontWeight: "bold", + marginBottom: 16, + textAlign: "center", + }, + item: { + flexDirection: "row", + justifyContent: "space-between", + paddingVertical: 12, + borderBottomWidth: 1, + borderColor: "#e5e7eb", + }, + itemText: { + fontSize: 16, + }, + selectButton: { + backgroundColor: "#2563eb", + paddingHorizontal: 12, + paddingVertical: 6, + borderRadius: 4, + }, + selectButtonText: { + color: "#fff", + fontWeight: "bold", + }, +}); diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx index 7c230ab..820cbab 100644 --- a/src/navigation/AppNavigator.tsx +++ b/src/navigation/AppNavigator.tsx @@ -6,6 +6,7 @@ import HomeScreen from "../screens/HomeScreen"; import ProductListBig from "../screens/product/ProductListBig"; import ProductList from "../screens/product/ProductList"; import ProductDetail from "../screens/product/ProductDetail"; +import Buildpc from "../screens/buildpc/Buildpc"; const Stack = createStackNavigator(); @@ -19,6 +20,7 @@ const AppNavigator: React.FC = () => { + ); }; diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index 9fb35b1..36b8f14 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -28,9 +28,9 @@ import Footer from "../components/footer/Footer"; var winWidth = Dimensions.get("window").width; //full width var winHeight = Dimensions.get("window").height; //full height const ratio = winWidth / 930; + const HomeScreen: React.FC = () => { const navigation = useNavigation>(); - return ( @@ -111,9 +111,13 @@ const SliderHome = () => { }; const BoxMenuHome = () => { + const navigation = useNavigation>(); return ( - + navigation.navigate("buildpc" as never)} + > + + {/* Breadcrumb */} + + + + + + › + + + Tạo máy tính riêng của bạn + + + + {/* Buttons Bắt đầu/So sánh */} + + + Bắt đầu tạo + + + + So sánh giá tại các cửa hàng + + + + + {/* Action Bar */} + + {/* Share link */} + + + + + + {/* Đặt tên */} + + Đặt tên: + + + + {/* Buttons */} + + + + + + + + {/* Buildpc Content */} + + + + ); +} + +function ActionButton({ icon, label }: { icon: string; label: string }) { + return ( + + + {label} + + ); +} + +const styles = StyleSheet.create({ + container: { + paddingBottom: 100, + paddingHorizontal: 10, + }, + breadcrumb: { + flexDirection: "row", + alignItems: "center", + paddingVertical: 12, + flexWrap: "wrap", + }, + breadcrumbItem: { + flexDirection: "row", + alignItems: "center", + marginRight: 8, + }, + text: { + color: "#000", + }, + icon: { + marginRight: 5, + }, + angle: { + marginLeft: 12, + color: "#888", + }, + actionBar: { + marginTop: 12, + backgroundColor: "#fff", + borderRadius: 8, + }, + inputBox: { + flexDirection: "row", + alignItems: "center", + borderColor: "#ccc", + borderWidth: 1, + borderRadius: 8, + height: 48, + flex: 1, + paddingHorizontal: 10, + width: width - 20, + marginBottom: 10, + }, + input: { + flex: 1, + height: "100%", + paddingHorizontal: 10, + }, + iconAction: { + marginRight: 6, + color: "#888", + }, + buttonGroup: { + flexDirection: "row", + flex: 1, + justifyContent: "space-between", + }, + actionButton: { + flex: 1, + height: 35, + borderWidth: 1, + borderColor: "#ccc", + borderRadius: 8, + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + marginHorizontal: 2, + backgroundColor: "#fff", + }, + buttonWrapper: { + backgroundColor: "#fff", + flexDirection: "row", + gap: 10, + alignItems: "center", + }, + primaryButton: { + backgroundColor: "#5B21B6", + padding: 10, + borderRadius: 4, + }, + primaryButtonText: { + color: "#fff", + fontWeight: "bold", + textAlign: "center", + }, + secondaryButton: { + backgroundColor: "#F5F5F5", + padding: 10, + borderRadius: 4, + }, + secondaryButtonText: { + color: "#666", + fontWeight: "bold", + }, +});