update 19/7

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",
+  },
+});