diff --git a/assets/images/icon-email.png b/assets/images/icon-email.png
new file mode 100644
index 0000000..e7e979d
Binary files /dev/null and b/assets/images/icon-email.png differ
diff --git a/assets/images/icon-locahost.png b/assets/images/icon-locahost.png
new file mode 100644
index 0000000..bcb2944
Binary files /dev/null and b/assets/images/icon-locahost.png differ
diff --git a/assets/images/icon-mohinh.png b/assets/images/icon-mohinh.png
new file mode 100644
index 0000000..156b024
Binary files /dev/null and b/assets/images/icon-mohinh.png differ
diff --git a/assets/images/icon-showroom-gray.png b/assets/images/icon-showroom-gray.png
new file mode 100644
index 0000000..aba4ea6
Binary files /dev/null and b/assets/images/icon-showroom-gray.png differ
diff --git a/assets/images/icon-tel.png b/assets/images/icon-tel.png
new file mode 100644
index 0000000..375e3f9
Binary files /dev/null and b/assets/images/icon-tel.png differ
diff --git a/assets/images/icon-times.png b/assets/images/icon-times.png
new file mode 100644
index 0000000..317446e
Binary files /dev/null and b/assets/images/icon-times.png differ
diff --git a/assets/images/icon-vipham.png b/assets/images/icon-vipham.png
new file mode 100644
index 0000000..07da713
Binary files /dev/null and b/assets/images/icon-vipham.png differ
diff --git a/assets/images/icon-web.png b/assets/images/icon-web.png
new file mode 100644
index 0000000..f31cf00
Binary files /dev/null and b/assets/images/icon-web.png differ
diff --git a/assets/images/icon_store_gray.png b/assets/images/icon_store_gray.png
new file mode 100644
index 0000000..f3bd960
Binary files /dev/null and b/assets/images/icon_store_gray.png differ
diff --git a/src/components/repair/BoxReview.tsx b/src/components/repair/BoxReview.tsx
new file mode 100644
index 0000000..68743a2
--- /dev/null
+++ b/src/components/repair/BoxReview.tsx
@@ -0,0 +1,298 @@
+import React, { useState } from "react";
+import {
+ View,
+ Text,
+ StyleSheet,
+ FlatList,
+ Image,
+ TouchableOpacity,
+ ScrollView,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import ReviewModal from "@components/product/FormReview";
+
+const reviews = [
+ {
+ id: "1",
+ name: "Dino",
+ time: "10:00pm 20/02/2025",
+ title: "Laptop Gaming Asus ROG 16GB",
+ content:
+ "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
+ images: [
+ require("../../../assets/images/small-product-detail.png"),
+ require("../../../assets/images/small-product-detail.png"),
+ require("../../../assets/images/small-product-detail.png"),
+ ],
+ star: 5,
+ },
+ {
+ id: "2",
+ name: "Dino",
+ time: "10:00pm 20/02/2025",
+ title: "Laptop Gaming Asus ROG 16GB",
+ content:
+ "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
+ images: [
+ require("../../../assets/images/small-product-detail.png"),
+ require("../../../assets/images/small-product-detail.png"),
+ ],
+ star: 4,
+ },
+];
+
+const renderStars = (count: number) => {
+ return (
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+ ))}
+
+ );
+};
+
+const ReviewSection = () => {
+ const [showReviewModal, setShowReviewModal] = useState(false);
+
+ return (
+
+ {/* Header */}
+
+ Đánh giá
+
+
+
+ {/* Right */}
+
+ item.id}
+ renderItem={({ item }) => (
+
+
+
+
+
+ {item.name}
+ {item.time}
+
+ {renderStars(item.star)}
+
+
+
+
+ {item.title}
+ {item.content}
+
+ {item.images.map((img, index) => (
+
+ ))}
+
+
+
+
+ Bình luận (23)
+
+
+
+
+ Thích (23)
+
+
+
+
+
+ )}
+ />
+
+
+
+ Xem thêm 23 bình luận khác
+
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ BoxReview: {
+ padding: 10,
+ backgroundColor: "#fff",
+ marginTop: 20,
+ borderRadius: 8,
+ borderWidth: 1,
+ borderColor: "#D4D4D4",
+ },
+ header: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ borderBottomWidth: 1,
+ borderBottomColor: "#B1B1B1",
+ paddingBottom: 15,
+ },
+ headerTitle: {
+ fontSize: 16,
+ fontWeight: "bold",
+ },
+ sortBox: {
+ borderWidth: 1,
+ borderColor: "#B1B1B1",
+ paddingHorizontal: 10,
+ height: 45,
+ justifyContent: "center",
+ borderRadius: 4,
+ },
+ content: {
+ gap: 25,
+ marginTop: 20,
+ },
+ left: {
+ width: "100%",
+ },
+ totalReview: {
+ textAlign: "center",
+ fontSize: 22,
+ fontWeight: "bold",
+ paddingBottom: 5,
+ },
+ ratingRow: {
+ flexDirection: "row",
+ justifyContent: "center",
+ alignItems: "center",
+ marginBottom: 10,
+ },
+ star: {
+ fontSize: 16,
+ },
+ ratingText: {
+ marginLeft: 5,
+ fontSize: 16,
+ fontWeight: 700,
+ },
+ ratingBreakdown: {
+ borderTopWidth: 1,
+ borderTopColor: "#E4E4E4",
+ paddingTop: 10,
+ },
+ ratingLine: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ marginBottom: 10,
+ },
+ reviewBtnArea: {
+ borderTopWidth: 1,
+ borderTopColor: "#E4E4E4",
+ paddingTop: 10,
+ marginTop: 20,
+ },
+ reviewPrompt: {
+ textAlign: "center",
+ marginTop: 10,
+ },
+ reviewBtn: {
+ marginTop: 10,
+ height: 40,
+ backgroundColor: "#FF7A00",
+ justifyContent: "center",
+ alignItems: "center",
+ borderRadius: 4,
+ },
+ reviewBtnText: {
+ color: "#fff",
+ },
+ right: {
+ width: "100%",
+ },
+ reviewItem: {
+ marginBottom: 15,
+ paddingBottom: 15,
+ borderBottomWidth: 1,
+ borderBottomColor: "rgba(228, 228, 228, 1)",
+ },
+ avatarBox: {
+ flexDirection: "row",
+ alignContent: "center",
+ width: "100%",
+ alignItems: "center",
+ marginRight: 20,
+ },
+ avatar: {
+ width: 30,
+ height: 30,
+ borderRadius: 40,
+ marginRight: 10,
+ },
+ name: {
+ fontWeight: "bold",
+ marginRight: 10,
+ },
+ time: {
+ fontSize: 12,
+ textAlign: "center",
+ },
+ reviewContent: {
+ flex: 1,
+ },
+ title: {
+ fontWeight: "600",
+ marginBottom: 5,
+ },
+ contentText: {
+ marginBottom: 5,
+ },
+ imageList: {
+ flexDirection: "row",
+ marginBottom: 10,
+ },
+ reviewImage: {
+ width: 80,
+ height: 80,
+ marginRight: 10,
+ },
+ btnRow: {
+ flexDirection: "row",
+ },
+ btnLink: {
+ color: "#1877F2",
+ marginRight: 15,
+ },
+ black: {
+ color: "#000",
+ },
+ moreBtn: {
+ color: "#FF7A00",
+ },
+ moreBold: {
+ fontWeight: "bold",
+ },
+});
+
+export default ReviewSection;
diff --git a/src/components/repair/CompanyInfo.tsx b/src/components/repair/CompanyInfo.tsx
new file mode 100644
index 0000000..ebe5abd
--- /dev/null
+++ b/src/components/repair/CompanyInfo.tsx
@@ -0,0 +1,119 @@
+import React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+
+const CompanyInfo = () => {
+ const infoItems = [
+ {
+ icon: require("../../../assets/images/icon_store_gray.png"),
+ label: "Lĩnh vực",
+ value: "Chuyên sửa chữa PC, laptop, linh phụ kiện máy tính",
+ },
+ {
+ icon: require("../../../assets/images/icon-mohinh.png"),
+ label: "Mô hình",
+ value: "Cá nhân",
+ },
+ {
+ icon: require("../../../assets/images/icon-times.png"),
+ label: "Năm hoạt động",
+ value: "5 năm",
+ },
+ {
+ icon: require("../../../assets/images/icon-locahost.png"),
+ label: "Địa chỉ",
+ value:
+ "Tầng 7, toà nhà số 198 Nguyễn Thị Minh Khai, phường 6, quận 3, TP. Hồ Chí Minh",
+ },
+ {
+ icon: require("../../../assets/images/icon-vipham.png"),
+ label: "Phạm vi hoạt động",
+ value: "Tại cửa hàng / Bán kính quanh 20km",
+ },
+ {
+ icon: require("../../../assets/images/icon-web.png"),
+ label: "Website",
+ value: "https://www.anphatpc.com.vn/",
+ isLink: true,
+ },
+ {
+ icon: require("../../../assets/images/icon-tel.png"),
+ label: "Tel",
+ value: "1900 0323 0918 557 006",
+ },
+ {
+ icon: require("../../../assets/images/icon-email.png"),
+ label: "Gmail",
+ value: "Giang@anphatpc.com.vn",
+ },
+ ];
+
+ return (
+
+ Thông tin
+
+ {infoItems.map((item, index) => (
+
+
+
+ {item.label}
+
+
+ {item.value}
+
+
+ ))}
+
+
+ );
+};
+export default CompanyInfo;
+
+const styles = StyleSheet.create({
+ container: {
+ borderColor: "rgba(212, 212, 212, 1)",
+ borderRadius: 12,
+ borderWidth: 1,
+ marginTop: 9,
+ padding: 10,
+ backgroundColor: "#fff",
+ },
+ boxFlex: {},
+ items: {
+ flexDirection: "row",
+ gap: 10,
+ marginTop: 10,
+ },
+ title: {
+ fontSize: 16,
+ fontWeight: "700",
+ color: "rgba(0, 0, 0, 1)",
+ },
+ infoRow: {
+ width: 140,
+ flexDirection: "row",
+ alignItems: "center",
+ },
+ icon: {
+ width: 20,
+ height: 20,
+ marginRight: 6,
+ resizeMode: "contain",
+ },
+ label: {
+ fontSize: 13,
+ fontWeight: "400",
+ color: "#303030",
+ },
+ valueContainer: {
+ alignSelf: "stretch",
+ marginTop: 10,
+ },
+ value: {
+ fontSize: 13,
+ fontWeight: "400",
+ color: "#303030",
+ },
+ linkValue: {
+ color: "rgba(24, 119, 242, 1)",
+ },
+});
diff --git a/src/components/repair/ContactForm.tsx b/src/components/repair/ContactForm.tsx
index 6cf88ec..801c01b 100644
--- a/src/components/repair/ContactForm.tsx
+++ b/src/components/repair/ContactForm.tsx
@@ -34,7 +34,8 @@ export default ContactForm;
const styles = StyleSheet.create({
container: {
- marginTop: 56,
+ marginTop: 20,
+ marginBottom: 20,
},
headerSection: {
position: "relative",
@@ -71,6 +72,7 @@ const styles = StyleSheet.create({
},
formSection: {
padding: 12,
+ backgroundColor: "#fff",
},
inputField: {
borderWidth: 1,
diff --git a/src/components/repair/ShowroomSection.tsx b/src/components/repair/ShowroomSection.tsx
new file mode 100644
index 0000000..6cadac0
--- /dev/null
+++ b/src/components/repair/ShowroomSection.tsx
@@ -0,0 +1,113 @@
+import React from "react";
+import { View, StyleSheet, Text, Image } from "react-native";
+
+const ShowroomSection = () => {
+ return (
+
+ HỆ THỐNG SHOWROOM
+
+
+
+
+
+ Showroom 1: 49 Thái Hà - Đống Đa - Hà Nội
+
+
+
+
+
+ Showroom 2: 151 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội
+
+
+
+
+
+ Showroom 3: 63 Trần Thái Tông - Cầu Giấy - Hà Nội
+
+
+
+
+
+ Showroom 4: 158 - 160 Lý Thường Kiệt - Quận 10 - TPHCM
+
+
+
+
+
+ Showroom 5: 330-332 Võ Văn Tần - P. 5 - Q. 3 - TPHCM
+
+
+
+
+
+ Showroom 6: Số 51 Trần Hưng Đạo - Đại Phúc - Bắc Ninh
+
+
+
+
+ );
+};
+
+export default ShowroomSection;
+
+const styles = StyleSheet.create({
+ container: {
+ borderRadius: 12,
+ borderWidth: 1,
+ borderColor: "rgba(212, 212, 212, 1)",
+ padding: 10,
+ marginTop: 12,
+ backgroundColor: "#fff",
+ },
+ content: {},
+ title: {
+ fontSize: 14,
+ fontWeight: "700",
+ color: "rgba(0, 0, 0, 1)",
+ textTransform: "uppercase",
+ },
+ divider: {
+ height: 1,
+ backgroundColor: "#E3E3E3",
+ borderWidth: 1,
+ borderColor: "rgba(227, 227, 227, 1)",
+ marginTop: 15,
+ },
+ itemShoroom: {
+ flexDirection: "row",
+ alignItems: "center",
+ gap: 9,
+ marginTop: 10,
+ },
+ imageGrid: {
+ flexDirection: "column",
+ },
+ showroomImage: {
+ width: 20,
+ height: 20,
+ },
+ addressList: {
+ fontSize: 11,
+ fontWeight: "400",
+ color: "rgba(0, 0, 0, 1)",
+ flex: 1,
+ },
+});
diff --git a/src/screens/question/HomeQuestion.tsx b/src/screens/question/HomeQuestion.tsx
new file mode 100644
index 0000000..6ef2523
--- /dev/null
+++ b/src/screens/question/HomeQuestion.tsx
@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import {
+ View,
+ Text,
+ TextInput,
+ TouchableOpacity,
+ ScrollView,
+ Image,
+ StyleSheet,
+ Dimensions,
+ ImageBackground,
+} from "react-native";
+import { useNavigation, NavigationProp } from "@react-navigation/native";
+import AppLayout from "@layouts/AppLayout";
+import { Ionicons } from "@expo/vector-icons";
diff --git a/src/screens/repair_address/DetailRepairAddress.tsx b/src/screens/repair_address/DetailRepairAddress.tsx
index 5a730fd..428ae47 100644
--- a/src/screens/repair_address/DetailRepairAddress.tsx
+++ b/src/screens/repair_address/DetailRepairAddress.tsx
@@ -13,9 +13,28 @@ import {
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import { Ionicons } from "@expo/vector-icons";
+import CompanyInfo from "@components/repair/CompanyInfo";
+import BoxReview from "@components/repair/BoxReview";
+import ShowroomSection from "@components/repair/ShowroomSection";
+import ContactForm from "@components/repair/ContactForm";
const { width } = Dimensions.get("window");
+const renderStars = (count: number) => {
+ return (
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+ ))}
+
+ );
+};
+
export default function DetailRepairAddress() {
const navigation = useNavigation>();
@@ -41,10 +60,68 @@ export default function DetailRepairAddress() {
- Danh sách địa chỉ sửa chữa
-
-
+ Danh sách địa chỉ sửa chữa
+
+
+
+ An Phát
+
+ CÔNG TY CỔ PHẦN THƯƠNG MẠI MÁY TÍNH AN PHÁT
+
+
+ {renderStars(4)}
+ 4.6/5
+ (43 đánh giá)
+
+
+
+
+ Giới thiệu
+
+
+ Thành lập vào ngày 29/03/2004, trải qua hai thập kỷ không ngừng
+ phát triển, An Phát Computer đã liên tục tăng trưởng, mở rộng thị
+ trường và trở thành một trong những doanh nghiệp hàng đầu trong
+ lĩnh vực bán buôn và bán lẻ các sản phẩm, thiết bị công nghệ thông
+ tin, thiết bị lưu trữ, thiết bị văn phòng.
+ {"\n"}
+ Năm 2024, An Phát Computer vinh dự kỷ niệm 20 năm thành lập, đánh
+ dấu chặng đường hai thập kỷ uy tín, cam kết không ngừng cải thiện
+ chất lượng dịch vụ, đem đến cho khách hàng những sản phẩm công
+ nghệ hi-end, hi-tech nhất thị trường.
+ {"\n\n"}
+ Xuyên suốt hành trình xây dựng và phát triển, tiêu chí "Uy tín" và
+ "Chuyên nghiệp" luôn được An Phát Computer đặt lên hàng đầu. Bên
+ cạnh đó, những sản phẩm chất lượng với mức giá cạnh tranh, dịch vụ
+ tư vấn tận tâm, chính sách bán hàng, bảo hành cùng đội ngũ cán bộ
+ nhân viên được đào tạo chuyên nghiệp cũng góp phần tạo ra những
+ giá trị đích thực, giúp cho An Phát Computer gặt hái được nhiều
+ thành công. Tới nay doanh nghiệp đã có 07 showroom bán hàng ở các
+ thành phố lớn tại Hà Nội, TP. Hồ Chí Minh, Bắc Ninh và 01 Trung
+ tâm phân phối & dự án. Đến các cửa hàng thuộc hệ thống An Phát
+ Computer, khách hàng luôn có được sự hài lòng với quy trình tư vấn
+ bài bản của nhân viên nhằm lựa chọn cho mình những sản phẩm ưng ý
+ nhất theo phương châm: "Mỗi khách hàng là một con người - một cá
+ thể riêng biệt, cần được tôn trọng, quan tâm và lắng nghe, thấu
+ hiểu và phục vụ một cách riêng biệt.".
+
+
+
+
+ {/* thông tin công ty */}
+
+
+ {/* đánh giá */}
+
+
+ {/* showroom */}
+
+
+ {/* form liên hệ */}
@@ -54,7 +131,8 @@ export default function DetailRepairAddress() {
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
- backgroundColor: "#fff",
+ backgroundColor: "#F4F4F4",
+ marginBottom: 15,
},
breadcrumb: {
flexDirection: "row",
@@ -77,4 +155,80 @@ const styles = StyleSheet.create({
marginLeft: 12,
color: "#888",
},
+ companyCard: {
+ flexDirection: "row",
+ alignItems: "flex-start",
+ gap: 12,
+ marginTop: 10,
+ },
+ companyLogo: {
+ width: 80,
+ height: 80,
+ resizeMode: "contain",
+ borderWidth: 1,
+ borderColor: "#D4D4D4",
+ borderRadius: 4,
+ padding: 10,
+ backgroundColor: "#fff",
+ },
+ companyInfo: {
+ flex: 1,
+ },
+ companyName: {
+ fontSize: 15,
+ fontWeight: "700",
+ color: "#303030",
+ },
+ companyFullName: {
+ fontSize: 15,
+ fontWeight: "700",
+ color: "#303030",
+ marginTop: 4,
+ },
+ ratingContainer: {
+ flexDirection: "row",
+ alignItems: "center",
+ gap: 6,
+ marginTop: 4,
+ },
+ rating: {
+ fontSize: 13,
+ fontWeight: "400",
+ color: "#303030",
+ },
+ reviewCount: {
+ fontSize: 13,
+ fontWeight: "400",
+ color: "#303030",
+ textDecorationLine: "underline",
+ },
+ companyDescription: {
+ borderRadius: 8,
+ borderWidth: 1,
+ borderColor: "rgba(212, 212, 212, 1)",
+ paddingVertical: 16,
+ paddingHorizontal: 1,
+ marginTop: 9,
+ backgroundColor: "#fff",
+ },
+ titleCompany: {
+ fontSize: 16,
+ fontWeight: "700",
+ color: "rgba(0, 0, 0, 1)",
+ marginLeft: 11,
+ },
+ dividerCompany: {
+ height: 1,
+ backgroundColor: "#E3E3E3",
+ borderWidth: 1,
+ borderColor: "rgba(227, 227, 227, 1)",
+ marginTop: 10,
+ },
+ descriptionCompany: {
+ fontSize: 13,
+ fontWeight: "400",
+ color: "rgba(0, 0, 0, 1)",
+ lineHeight: 18,
+ padding: 10,
+ },
});