update 19/7

src/components/buildpc/CreateBuildpc.tsx

@@ -0,0 +1,255 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  Dimensions,
+  TextInput,
+} from "react-native";
+import PopupBuildpc from "@components/buildpc/PopupBuildpc"; // Bạn cần tự tạo modal này trong React Native
+import Feather from "@expo/vector-icons/Feather";
+import AntDesign from "@expo/vector-icons/AntDesign";
+const { width } = Dimensions.get("window");
+
+export function CreateBuildpc() {
+  const [showPopup, setShowPopup] = useState(false);
+
+  return (
+    <ScrollView style={styles.container}>
+      {/* Item CPU */}
+      <View style={styles.itemRow}>
+        <Text style={styles.componentTitle}>CPU</Text>
+        <View style={styles.productInfo}>
+          <View style={styles.productLeft}>
+            <View style={styles.infolinhkien}>
+              <Image
+                source={require("../../../assets/images/lienkien-ram.png")}
+                style={styles.productImage}
+                resizeMode="contain"
+              />
+              <Text style={styles.productName}>
+                AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+              </Text>
+            </View>
+            <View style={styles.boxQlt}>
+              <Text>Số lượng</Text>
+              <TextInput
+                value="111"
+                style={styles.inputQl}
+                keyboardType="numeric"
+                placeholder="Nhập số"
+              />
+            </View>
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                marginBottom: 10,
+              }}
+            >
+              <Text style={{ marginRight: 10, fontSize: 13 }}>Giá bán:</Text>
+              <Text style={styles.oldPrice}>4.700.000 Vnđ</Text>
+            </View>
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                marginBottom: 10,
+              }}
+            >
+              <Text style={{ marginRight: 10, fontSize: 13 }}>Khuyến mãi:</Text>
+              <Text style={styles.discount}>20%</Text>
+            </View>
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                marginBottom: 10,
+              }}
+            >
+              <Text style={{ marginRight: 10, fontSize: 13 }}>Thành tiền:</Text>
+              <Text style={styles.totalPrice}>4.000.000đ</Text>
+            </View>
+            <View style={styles.supplierSection}>
+              <Text style={{ marginRight: 10, fontSize: 13 }}>
+                Nhà cung cấp
+              </Text>
+              <Image
+                source={require("../../../assets/images/logo-hacom.png")}
+                style={styles.supplierLogo}
+                resizeMode="contain"
+              />
+            </View>
+          </View>
+          <View style={styles.buttonGroup}>
+            <TouchableOpacity style={styles.buyButton}>
+              <Feather name="edit" size={24} color="#1877f2" />
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.removeButton}>
+              <AntDesign name="delete" size={24} color="#ff0000" />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+      {/* Thêm lựa chọn CPU */}
+      <TouchableOpacity
+        style={styles.addButton}
+        onPress={() => setShowPopup(true)}
+      >
+        <Text style={styles.addButtonText}>+ Chọn thêm CPU</Text>
+      </TouchableOpacity>
+      {/* Tổng tiền */}
+      <View style={styles.totalSection}>
+        <Text style={styles.totalText}>Tổng tiền 2 sản phẩm: 8.000.000đ</Text>
+        <View style={styles.totalButtons}>
+          <TouchableOpacity style={styles.printButton}>
+            <Text>🖨️ In đơn hàng</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.checkoutButton}>
+            <Text style={styles.checkoutText}>Mua hàng tại Hacom</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+      {/* Popup */}
+      {showPopup && (
+        <PopupBuildpc visible={showPopup} onClose={() => setShowPopup(false)} />
+      )}
+    </ScrollView>
+  );
+}
+
+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",
+  },
+});

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 (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <View style={styles.overlay}>
+        <View style={styles.modalContent}>
+          {/* Close button */}
+          <TouchableOpacity style={styles.closeBtn} onPress={onClose}>
+            <Ionicons name="close" size={24} color="#000" />
+          </TouchableOpacity>
+
+          <Text style={styles.title}>Chọn linh kiện thay thế</Text>
+
+          {/* List of products (giả lập) */}
+          <ScrollView>
+            {[1, 2, 3].map((item) => (
+              <View key={item} style={styles.item}>
+                <Text style={styles.itemText}>Linh kiện {item}</Text>
+                <TouchableOpacity style={styles.selectButton}>
+                  <Text style={styles.selectButtonText}>Chọn</Text>
+                </TouchableOpacity>
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+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",
+  },
+});

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 = () => {
       <Stack.Screen name="productlist" component={ProductListBig} />
       <Stack.Screen name="productlistmain" component={ProductList} />
       <Stack.Screen name="productdetail" component={ProductDetail} />
+      <Stack.Screen name="buildpc" component={Buildpc} />
     </Stack.Navigator>
   );
 };

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<NavigationProp<any>>();
-
   return (
     <AppLayout activeTab="homepage">
       <ScrollView>
@@ -111,9 +111,13 @@ const SliderHome = () => {
 };
 
 const BoxMenuHome = () => {
+  const navigation = useNavigation<NavigationProp<any>>();
   return (
     <View style={styles.boxMenuHome}>
-      <TouchableOpacity style={styles.MenuItem}>
+      <TouchableOpacity
+        style={styles.MenuItem}
+        onPress={() => navigation.navigate("buildpc" as never)}
+      >
         <View style={styles.boxIconMenu}>
           <Image
             source={require("../../assets/images/icon_buildpc.png")}

src/screens/buildpc/Buildpc.tsx

@@ -0,0 +1,192 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  Dimensions,
+} from "react-native";
+import AppLayout from "@layouts/AppLayout";
+import { Ionicons } from "@expo/vector-icons"; // hoặc icon_2025 nếu bạn có icon font riêng
+import CreateBuildpc from "@components/buildpc/CreateBuildpc"; // component con bạn tự tạo
+const { width } = Dimensions.get("window");
+import Octicons from "@expo/vector-icons/Octicons";
+
+export default function Buildpc() {
+  return (
+    <AppLayout activeTab="buildpc">
+      <ScrollView style={styles.container}>
+        {/* Breadcrumb */}
+        <View style={styles.breadcrumb}>
+          <View style={styles.breadcrumbItem}>
+            <TouchableOpacity>
+              <Ionicons
+                name="home"
+                size={16}
+                color="#637381"
+                style={styles.icon}
+              />
+            </TouchableOpacity>
+            <Text style={styles.angle}>›</Text>
+          </View>
+          <View style={styles.breadcrumbItem}>
+            <Text style={styles.text}>Tạo máy tính riêng của bạn</Text>
+          </View>
+        </View>
+
+        {/* Buttons Bắt đầu/So sánh */}
+        <View style={styles.buttonWrapper}>
+          <TouchableOpacity style={styles.primaryButton}>
+            <Text style={styles.primaryButtonText}>Bắt đầu tạo</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.secondaryButton}>
+            <Text style={styles.secondaryButtonText}>
+              So sánh giá tại các cửa hàng
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* Action Bar */}
+        <View style={styles.actionBar}>
+          {/* Share link */}
+          <View style={styles.inputBox}>
+            <Octicons
+              name="copy"
+              size={18}
+              color="black"
+              style={styles.iconAction}
+            />
+            <TextInput
+              value="https://bestpc.vn/restricted.php"
+              style={styles.input}
+              editable={false}
+            />
+          </View>
+
+          {/* Đặt tên */}
+          <View style={styles.inputBox}>
+            <Text style={{ marginLeft: 10 }}>Đặt tên:</Text>
+            <TextInput placeholder="Nhập tên" style={styles.input} />
+          </View>
+
+          {/* Buttons */}
+          <View style={styles.buttonGroup}>
+            <ActionButton icon="copy-outline" label="Copy" />
+            <ActionButton icon="download-outline" label="Tải xuống" />
+            <ActionButton icon="refresh-outline" label="Làm mới" />
+          </View>
+        </View>
+
+        {/* Buildpc Content */}
+        <CreateBuildpc />
+      </ScrollView>
+    </AppLayout>
+  );
+}
+
+function ActionButton({ icon, label }: { icon: string; label: string }) {
+  return (
+    <TouchableOpacity style={styles.actionButton}>
+      <Ionicons name={icon as any} size={16} color="#000" />
+      <Text style={{ marginLeft: 5 }}>{label}</Text>
+    </TouchableOpacity>
+  );
+}
+
+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",
+  },
+});