tieptk/bestpc_mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Tieptk
2025-07-18 16:04:59 +07:00
parent 69f872f1c4
commit 3fa4622feb
67 changed files with 6361 additions and 48680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

446
src/screens/product/BoxReview.tsx Normal file
View File

@@ -0,0 +1,446 @@
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 (
<View style={{ flexDirection: "row" }}>
{Array.from({ length: 5 }).map((_, index) => (
<Ionicons
key={index}
name="star"
size={16}
color={index < count ? "#ff7a00" : "#d9d9d9"}
/>
))}
</View>
);
};
const ReviewSection = () => {
const [showReviewModal, setShowReviewModal] = useState(false);
return (
<View>
<View style={styles.BoxReview}>
{/* Header */}
<View style={styles.header}>
<Text style={styles.headerTitle}>Thành viên BestPC đánh giá</Text>
</View>
<View style={styles.content}>
{/* Left */}
<View style={styles.left}>
<Text style={styles.totalReview}>54 đánh giá</Text>
<View style={styles.ratingRow}>
<Text style={styles.star}>
<Ionicons name="star" size={20} color="#ff7a00" />
<Ionicons name="star" size={20} color="#ff7a00" />
<Ionicons name="star" size={20} color="#ff7a00" />
<Ionicons name="star" size={20} color="#ff7a00" />
<Ionicons name="star" size={20} color="#d9d9d9" />
</Text>
<Text style={styles.ratingText}>4.8</Text>
</View>
{/* Rating breakdown */}
<View style={styles.ratingBreakdown}>
{[5, 4, 3, 2, 1].map((star) => (
<View key={star} style={styles.ratingLine}>
{renderStars(star)}
<Text>{50} đánh giá</Text>
</View>
))}
</View>
{/* Button */}
<View style={styles.reviewBtnArea}>
<Text style={styles.reviewPrompt}>
Đánh giá của bạn về sản phẩm
</Text>
<TouchableOpacity
style={styles.reviewBtn}
onPress={() => setShowReviewModal(true)}
>
<Text style={styles.reviewBtnText}>Gửi đánh giá của bạn</Text>
</TouchableOpacity>
</View>
</View>
{/* Right */}
<View style={styles.right}>
<FlatList
data={reviews}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.reviewItem}>
<View style={styles.avatarBox}>
<Image
source={require("../../../assets/images/avartar-review-1.png")}
style={styles.avatar}
/>
<View>
<View
style={{ flexDirection: "row", alignItems: "center" }}
>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.time}>{item.time}</Text>
</View>
<Text style={styles.star}>{renderStars(item.star)}</Text>
</View>
</View>
<View style={styles.reviewContent}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.contentText}>{item.content}</Text>
<View style={styles.imageList}>
{item.images.map((img, index) => (
<Image
key={index}
source={img}
style={styles.reviewImage}
/>
))}
</View>
<View style={styles.btnRow}>
<TouchableOpacity>
<Text style={styles.btnLink}>
Bình luận <Text style={styles.black}>(23)</Text>
</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.btnLink}>
Thích <Text style={styles.black}>(23)</Text>
</Text>
</TouchableOpacity>
</View>
</View>
</View>
)}
/>
<TouchableOpacity
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<Text style={styles.moreBtn}>
Xem thêm <Text style={styles.moreBold}>23</Text> bình luận khác
</Text>
<Ionicons
name="chevron-down"
style={{ marginLeft: 5 }}
size={16}
color="#FF7A00"
/>
</TouchableOpacity>
</View>
</View>
</View>
<View style={styles.BoxReview}>
{/* Header */}
<View style={styles.header}>
<Text style={styles.headerTitle}>Đánh giá trên internet</Text>
</View>
<View style={styles.content}>
{/* Left */}
<View style={styles.left}>
<Text style={styles.totalReview}>54 đánh giá</Text>
<View style={styles.ratingRow}>
<Text style={styles.star}>
<Ionicons name="star" size={20} color="#ff7a00" />
<Ionicons name="star" size={20} color="#ff7a00" />
<Ionicons name="star" size={20} color="#ff7a00" />
<Ionicons name="star" size={20} color="#ff7a00" />
<Ionicons name="star" size={20} color="#d9d9d9" />
</Text>
<Text style={styles.ratingText}>4.8</Text>
</View>
{/* Rating breakdown */}
<View style={styles.ratingBreakdown}>
{[5, 4, 3, 2, 1].map((star) => (
<View key={star} style={styles.ratingLine}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Text>Hanoicomputer</Text>
<Text style={{ marginLeft: 5, color: "#1877f2" }}>
({50})
</Text>
</View>
{renderStars(star)}
</View>
))}
</View>
{/* Button */}
<View style={styles.reviewBtnArea}>
<Text style={styles.reviewPrompt}>
Đánh giá của bạn về sản phẩm
</Text>
<TouchableOpacity
style={styles.reviewBtn}
onPress={() => setShowReviewModal(true)}
>
<Text style={styles.reviewBtnText}>Gửi đánh giá của bạn</Text>
</TouchableOpacity>
</View>
</View>
{/* Right */}
<View style={styles.right}>
<FlatList
data={reviews}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.reviewItem}>
<View style={styles.avatarBox}>
<View>
<View
style={{ flexDirection: "row", alignItems: "center" }}
>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.time}>{item.time}</Text>
</View>
<Text style={styles.star}>{renderStars(item.star)}</Text>
</View>
</View>
<View style={styles.reviewContent}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.contentText}>{item.content}</Text>
<TouchableOpacity
style={{
flexDirection: "row",
alignItems: "center",
}}
>
<Text style={{ marginRight: 5 }}>Xem link nguồn</Text>
<Ionicons name="share-social" size={24} color="black" />
</TouchableOpacity>
</View>
</View>
)}
/>
<TouchableOpacity
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<Text style={styles.moreBtn}>
Xem thêm <Text style={styles.moreBold}>23</Text> bình luận khác
</Text>
<Ionicons
name="chevron-down"
style={{ marginLeft: 5 }}
size={16}
color="#FF7A00"
/>
</TouchableOpacity>
</View>
</View>
</View>
<ReviewModal
visible={showReviewModal}
onClose={() => setShowReviewModal(false)}
/>
</View>
);
};
const styles = StyleSheet.create({
BoxReview: {
padding: 15,
backgroundColor: "#fff",
marginTop: 20,
borderRadius: 8,
},
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;

364
src/screens/product/ProductDetail.tsx Normal file
View File

@@ -0,0 +1,364 @@
import React, { useState } from "react";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import {
View,
Text,
StyleSheet,
Image,
FlatList,
TouchableOpacity,
ScrollView,
Dimensions,
} from "react-native";
import { globalStyles } from "styles/globalStyles";
import { Ionicons } from "@expo/vector-icons";
import Feather from "@expo/vector-icons/Feather";
import Swiper from "react-native-swiper";
const { width } = Dimensions.get("window");
import ProductGallery from "@components/product/ProductGallery";
import SupplierList from "./SupplierList";
import ReviewSection from "./BoxReview";
import ProductInformation from "./ProductInformation";
import ProductSpecification from "./ProductSpecification";
import { products } from "../../data/product";
import ProductItem from "@components/product/ItemProduct";
import Footer from "@components/footer/Footer";
const ProductDetail = () => {
const navigation = useNavigation<NavigationProp<any>>();
return (
<AppLayout activeTab="productdetail">
<ScrollView>
<View style={styles.container}>
{/* Breadcrumb */}
<View style={globalStyles.breadcrumb}>
<TouchableOpacity
style={globalStyles.breadcrumbItem}
onPress={() => navigation.navigate("homepage" as never)}
>
<Ionicons name="home-outline" size={20} color="#637381" />
</TouchableOpacity>
<Ionicons name="chevron-forward-outline" size={14} color="#999" />
<Text style={[globalStyles.breadcrumbText, { fontWeight: "600" }]}>
Màn hình máy tính
</Text>
</View>
<View
style={{
padding: 10,
backgroundColor: "#fff",
marginTop: 15,
borderRadius: 4,
}}
>
<View style={styles.top}>
<ProductGallery />
</View>
<View style={styles.bottom}>
<Text style={styles.productTitle}>
Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6"
FHD) - Hàng Chính Hãng
</Text>
<View style={styles.row}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Ionicons
name="star"
style={{ marginRight: 3, paddingTop: 3 }}
size={15}
color="#ff7a00"
/>
<Text style={styles.review}>5/5</Text>
</View>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Ionicons
name="eye-outline"
style={{ marginRight: 3 }}
size={15}
color="black"
/>
<Text style={styles.view}>120</Text>
</View>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Ionicons
name="time-outline"
style={{ marginRight: 3 }}
size={15}
color="black"
/>
<Text style={styles.date}>12/03/2025</Text>
</View>
<TouchableOpacity
style={{ flexDirection: "row", alignItems: "center" }}
>
<Ionicons
style={{ marginRight: 3 }}
name="share-social-outline"
size={15}
color="black"
/>
<Text style={styles.share}> Chia sẻ</Text>
</TouchableOpacity>
</View>
<View style={styles.row}>
<Text style={{ fontSize: 13 }}>
Reviews trên: <Text style={styles.link}>Internet</Text> - 1233
đánh giá
</Text>
<Text style={{ fontSize: 13 }}>
| <Text style={styles.link}>BestPC</Text> - 12003 đánh giá
</Text>
</View>
<View style={styles.priceBox}>
<Text style={styles.priceLabel}>Giá: </Text>
<Text style={styles.price}>9.000.000đ - 12.000.000đ</Text>
</View>
<View style={styles.boxStore}>
<View style={styles.boxIconStore}>
<Image
source={require("../../../assets/images/icon_store_white.png")}
style={styles.iconStore}
alt="icon store"
resizeMode="contain"
/>
</View>
<Text style={styles.storeName}>Có 12 cửa hàng bán</Text>
</View>
<View style={styles.summaryBox}>
<Text>
• CPU: Intel Core i7-8750H (2.2GHz - 4.1GHz / 9MB / 6 nhân, 12
luồng)
</Text>
<Text>• Màn hình: 15.6" (1920 x 1080), không cảm ứng</Text>
<Text>• RAM: 1 x 8GB DDR4 2666MHz</Text>
<Text>• GPU: Intel UHD 630 / NVIDIA GTX 1050Ti 4GB</Text>
<Text>• Lưu trữ: 128GB SSD M.2 NVMe / 1TB HDD</Text>
<Text>• OS: Windows 10 Home SL 64-bit</Text>
<Text>• Pin: 4 cell 64Wh, liền</Text>
<Text>• Nặng: 2.5kg</Text>
<Text>• Cổng: 1x USB 2.0,...</Text>
</View>
<TouchableOpacity style={styles.saveButton}>
<Feather name="file-plus" size={24} color="black" />
<Text style={styles.saveText}>Lưu sản phẩm lại xem sau</Text>
</TouchableOpacity>
</View>
</View>
{/* nhà cung cấp */}
<SupplierList />
{/* đánh giá */}
<ReviewSection />
{/* mô tả sản phẩm */}
<ProductInformation />
{/* thông số sản phẩm */}
<ProductSpecification />
{/* sản phẩm tương tự */}
<View style={styles.BoxSimilarProduct}>
<Text style={styles.textSimilarProduct}>Sản phẩm tương tự</Text>
<View style={styles.listProductSimilar}>
{products.map((item) => (
<ProductItem key={item.id} product={item} />
))}
</View>
<TouchableOpacity style={{ marginTop: 10, marginBottom: 10 }}>
<Text style={globalStyles.moreAll}>Xem tất cả</Text>
</TouchableOpacity>
</View>
{/* sản phẩm bạn thích */}
<View style={styles.BoxLikeProduct}>
<Text style={styles.textLikeProduct}>
Sản phẩm có thể bạn thích
</Text>
<View style={styles.listProductLike}>
{products.map((item) => (
<ProductItem key={item.id} product={item} />
))}
</View>
<TouchableOpacity style={{ marginTop: 10, marginBottom: 10 }}>
<Text style={globalStyles.moreAll}>Xem tất cả</Text>
</TouchableOpacity>
</View>
</View>
<Footer navigation={navigation} />
</ScrollView>
</AppLayout>
);
};
export default ProductDetail;
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 10,
backgroundColor: "#efefef",
paddingBottom: 10,
},
top: {},
bigSwiper: {
height: 250,
},
slide: {
justifyContent: "center",
alignItems: "center",
height: 250,
},
bigImage: {
width: "100%",
height: "100%",
},
thumbnailWrapper: {
marginTop: 12,
flexDirection: "row",
},
thumbItem: {
marginRight: 10,
},
thumbImage: {
width: 60,
height: 60,
borderWidth: 1,
borderColor: "#ccc",
borderRadius: 8,
},
bottom: {
marginTop: 20,
},
productTitle: {
fontSize: 16,
fontWeight: "bold",
color: "#000",
marginBottom: 10,
},
row: {
flexDirection: "row",
flexWrap: "wrap",
marginBottom: 5,
gap: 10,
},
review: { marginRight: 10 },
view: { marginRight: 10, color: "#1877f2" },
date: { marginRight: 10 },
share: {},
link: {
color: "#1877F2",
fontWeight: "600",
},
priceBox: {
flexDirection: "row",
alignItems: "center",
marginVertical: 10,
},
priceLabel: { fontSize: 16 },
price: {
fontSize: 24,
color: "#D80A00",
fontWeight: "bold",
},
storeBox: {
flexDirection: "row",
alignItems: "center",
marginBottom: 10,
},
summaryBox: {
marginTop: 10,
},
saveButton: {
flexDirection: "row",
alignItems: "center",
marginTop: 15,
padding: 10,
borderWidth: 1,
borderColor: "#D3D3D3",
borderRadius: 4,
justifyContent: "center",
},
saveIcon: {
width: 18,
height: 24,
marginRight: 10,
},
saveText: {
fontSize: 16,
fontWeight: "600",
},
boxStore: {
flexDirection: "row",
alignItems: "center",
marginTop: 5,
},
boxIconStore: {
width: 24,
height: 24,
borderRadius: 25,
backgroundColor: "#FF7A00",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginRight: 5,
},
iconStore: {
width: 18,
height: 18,
},
storeName: {
fontSize: 14,
fontWeight: 400,
color: "#000",
},
BoxSimilarProduct: {
backgroundColor: "#fff",
marginTop: 15,
borderRadius: 8,
},
textSimilarProduct: {
flexDirection: "row",
justifyContent: "space-between",
borderBottomWidth: 1,
borderBottomColor: "#B1B1B1",
padding: 10,
fontSize: 16,
fontWeight: "bold",
},
listProductSimilar: {
flexDirection: "row",
flexWrap: "wrap",
gap: 5,
marginLeft: 7,
marginTop: 10,
},
BoxLikeProduct: {
backgroundColor: "#fff",
marginTop: 15,
borderRadius: 8,
},
textLikeProduct: {
flexDirection: "row",
justifyContent: "space-between",
borderBottomWidth: 1,
borderBottomColor: "#B1B1B1",
padding: 10,
fontSize: 16,
fontWeight: "bold",
},
listProductLike: {
flexDirection: "row",
flexWrap: "wrap",
gap: 5,
marginLeft: 7,
marginTop: 10,
},
});

252
src/screens/product/ProductInformation.tsx Normal file
View File

@@ -0,0 +1,252 @@
import React, { useState } from "react";
import {
View,
Text,
ScrollView,
Image,
TouchableOpacity,
StyleSheet,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import ProductHTMLContent from "@components/product/ProductHTMLContent";
const productHtml = `
<p style="text-align: justify;"><strong>Laptop HP Victus 16 R0376TX AY8Z2PA
</strong> sở
hữu chip xử lý Intel Core i7
13700HX cùng VGA RTX 3050 6GB để có được trải nghiệm chơi game, làm việc hiệu
quả.
Mẫu <a href="https://cellphones.com.vn/laptop/hp/victus.html" title="HP Victus"
target="_blank"><strong>HP
Victus</strong></a> này còn được trang bị màn hình 16 inch FHD 165Hz
giúp
tái tạo hình ảnh sắc nét, mượt mà.
Kèm theo đó là thiết kế bền bỉ, hiện đại để có thể sử dụng ở nhiều không gian.
</p>
<h2 style="scroll-margin : 154px;"
id="laptop-hp-victus-16-r0376tx-ay8z2pa-hieu-nang-manh-me-hien-thi-an-tuong">
<strong>
Laptop HP Victus 16 R0376TX AY8Z2PA - Hiệu năng mạnh mẽ, hiển thị ấn tượng
</strong>
</h2>
<p style="text-align: justify;">HP Victus 16 R0376TX AY8Z2PA với bộ vi xử lý và card
đồ
họa rời mạnh mẽ sẽ mang tới trải
nghiệm chơi game, làm việc mượt mà, hiệu quả. Hãy cùng tìm hiểu thêm những điểm
nổi
bật mà mẫu laptop gaming của
<strong> HP Victus </strong> này sở hữu trong bài viết sau.
</p>
<h3 style="scroll-margin : 154px;"
id="nang-cao-hieu-suat-xu-ly-voi-chip-core-i7-13700hx"><strong> Nâng cao hiệu
suất
xử
lý với chip&nbsp;Core i7 13700HX</strong></h3>
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị
con
chip xử lý Core i7 13700HX của
Intel. Con chip Core i7 16 lõi, 24 luồng này sở hữu khả năng ép xung cực đại lên
tới
5GHz để luôn có thể xử lý dữ
liệu trong thời gian ngắn. Với bộ nhớ đệm 30MB, hiệu suất xử lý các tác vụ phức
tạp
của laptop sẽ được giảm đi đáng
kể.</p>
<p style="text-align: justify;"><img
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-1.jpg"
alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
<p style="text-align: justify;">Để nâng cao khả năng xử lý đồ hoạ, HP còn trang bị
cho
phiên bản <a href="https://cellphones.com.vn/laptop/hp/victus/victus-16.html"
title="laptop Victus 16" target="_blank"><strong>laptop Victus
16</strong></a>
này card đồ hoạ rời NVIDIA GeForce RTX 3050 6GB GDDR6. Nhờ
vậy mà người dùng có thể tự tin trải nghiệm các tựa game với mức cấu hình cao.
Không
dừng ở đó, các nhu cầu chỉnh
sửa hình ảnh, dựng phim, tạo hình 3D,...chuyên nghiệp cũng được thực hiện mượt
mà.
</p>
<h3 style="scroll-margin : 154px;"
id="tich-hop-o-cung-toc-do-cao-cung-dung-luong-ram-lon"><strong> Tích hợp ổ cứng
tốc
độ cao cùng dung lượng RAM lớn </strong></h3>
<p style="text-align: justify;">HP Victus 16 R0376TX AY8Z2PA được trang bị sẵn 2
thanh
RAM chuẩn DDR5 có tốc độ bus lên
tới 4800MT/s. Với tổng dung lượng RAM 16GB, mẫu laptop gaming HP này sẽ đáp ứng
tốt
nhu cầu đa nhiệm. Không chỉ các
tác vụ cơ bản mà nhu cầu đa nhiệm nâng cao trong công việc cũng sẽ được thực
hiện
mượt mà mà không cần phải nâng cấp
cấu hình. Ngoài ra, laptop HP Victus 16 R0376TX AY8Z2PA còn sở hữu một ổ cứng
SSD
tốc độ cao có dung lượng
512GB.&nbsp;</p>
<p style="text-align: justify;"><img
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-2.jpg"
alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
<h3 style="scroll-margin : 154px;" id="thiet-ke-hien-dai-ben-bi"><strong> Thiết kế
hiện
đại, bền bỉ </strong></h3>
<p style="text-align: justify;">Laptop Victus 16 R0376TX AY8Z2PA được HP thiết kế
hướng
tới phong cách hiện đại, tối
giản. Tuy vậy nhưng sản phẩm vẫn mang đậm dấu ấn gaming với tông màu đen thu hút
và
mạnh mẽ. Kèm theo đó là một tổng
thể chắc chắn, bền bỉ cùng phần bản lề kích thước lớn.</p>
<p style="text-align: justify;">Với trọng lượng khoảng 2.31kg, người dùng vẫn có thể
tiện lợi mang theo phiên bản laptop
HP Victus này mà không gặp bất tiện. So với các mẫu laptop gaming khác, đây được
coi
là một điểm cộng giúp sản phẩm
đáp ứng nhu cầu chơi game ở nhiều không gian của người dùng.</p>
<p style="text-align: justify;"><img
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-3.jpg"
alt="Thiết kế laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
<p style="text-align: justify;">Để hỗ trợ tốt cả nhu cầu chơi game và làm việc, HP
đã
trang bị cho laptop Victus 16
R0376TX AY8Z2PA bộ bàn phím Full-size. Với phần bàn phím số riêng biệt, người
dùng
sẽ cải thiện được tốc độ nhập
liệu trong khi làm việc. Bàn phím của laptop còn được tích hợp hệ thống đèn nền
RGB
1 để hỗ trợ việc gõ phím trong
điều kiện thiếu sáng.</p>
<h3 style="scroll-margin : 154px;" id="hien-thi-sac-net-va-muot-ma"><strong> Hiển
thị
sắc nét và mượt mà </strong></h3>
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA sở hữu không
giản
hiển thị cực lớn khi được trang bị
màn hình có kích thước 16.1 inch. Kèm theo đó là độ phân giải FHD (1920 x 1080p)
giúp nội dung hiển thị luôn có được
độ rõ nét. Nhờ việc sử dụng tấm nền IPS, người dùng còn có thể điều chỉnh góc
nghiêng linh hoạt mà không gây ảnh
hưởng tới chất lượng hình ảnh.</p>
<p style="text-align: justify;"><img
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-4.jpg"
alt="Hiển thị sắc nét và mượt mà" loading="lazy"></p>
<p style="text-align: justify;">Điểm nổi bật có trên màn hình HP Victus 16 R0376TX
AY8Z2PA chính là tần số quét và độ
phủ màu. Với độ phủ màu 100% sRGB, mẫu laptop gaming HP này sẽ hỗ trợ người dùng
làm
các công việc liên quan tới
sáng tạo hiệu quả. Tần số quét ở mức 165Hz sẽ giúp màn hình tái hiện các chuyển
động
một cách uyển chuyển, mượt mà.
</p>
<p style="text-align: justify;">Ngoài ra, màn hình HP Victus 16 R0376TX AY8Z2PA còn
được
phủ lớp chống chói và có độ
sáng 300 nits để thoải mái sử dụng ở những nơi có ánh sáng mạnh. Với chuẩn Low
Blue
Light, màn hình còn giảm thiểu
lượng ánh sáng xanh phát ra để hạn chế tình trạng mỏi mắt khi sử dụng laptop
trong
thời gian dài.</p>
<h3 style="scroll-margin : 154px;"
id="thoi-luong-pin-dai-ket-noi-phong-phu-va-on-dinh">
<strong> Thời lượng pin dài, kết
nối phong phú và ổn định </strong>
</h3>
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị
viên
pin Li-ion Polymer 4-cell có dung
lượng ở mức 70Wh. Với dung lượng này, viên pin có thể duy trì trạng thái hoạt
động
cho laptop lên tới nhiều giờ với
các tác vụ hỗn hợp. Laptop còn được trang bị bộ nguồn 200W Smart AC power
adapter để
hỗ trợ sạc pin nhanh 50% trong
khoảng 30 phút.</p>
<p style="text-align: justify;"><img
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-5.jpg"
alt="Thời lượng pin dài, kết nối phong phú và ổn định" loading="lazy"></p>
<p style="text-align: justify;">Để hỗ trợ việc liên kết có dây và chia sẻ dữ liệu,
HP
còn trang bị cho mẫu laptop Victus
của hàng đầy đủ các cổng kết nối thông dụng. Hai cạnh bên laptop được tích hợp
các
cổng USB Type-A, USB Type-C,
RJ-45, HDMI 2.1, jack audio 3.5mm và bộ chuyển đổi điện xoay chiều thông minh.
</p>
<p style="text-align: justify;">Laptop Victus 16 R0376TX AY8Z2PA còn được trang bị
card
wireless Bluetooth 5.3 và Intel
Wi-Fi 6E AX211 (2x2). Điều này sẽ đảm bảo được khả năng kết nối với các thiết bị
ngoại vi, kết nối mạng ổn định,
nhanh chóng cho laptop.</p>
<h2 style="scroll-margin : 154px;"
id="mua-laptop-hp-victus-16-r0376tx-ay8z2pa-gia-tot-tai-cellphones"><strong> Mua
laptop HP Victus 16 R0376TX AY8Z2PA giá tốt tại CellphoneS </strong></h2>
`;
const ProductInformation = () => {
return (
<View style={styles.boxDesciption}>
<Text style={styles.titleDesciption}>Thông tin sản phẩm</Text>
<View style={styles.content}>
<ProductHTMLContent htmlContent={productHtml} />
</View>
</View>
);
};
export default ProductInformation;
const styles = StyleSheet.create({
boxDesciption: {
backgroundColor: "#fff",
marginTop: 15,
borderRadius: 8,
},
titleDesciption: {
flexDirection: "row",
justifyContent: "space-between",
borderBottomWidth: 1,
borderBottomColor: "#B1B1B1",
padding: 10,
fontSize: 16,
fontWeight: "bold",
},
content: {
padding: 10,
},
heading: {
fontSize: 18,
fontWeight: "bold",
marginTop: 20,
marginBottom: 8,
},
subheading: {
fontSize: 16,
fontWeight: "600",
marginTop: 16,
marginBottom: 4,
},
paragraph: {
fontSize: 14,
textAlign: "justify",
marginBottom: 12,
},
image: {
width: "100%",
height: 200,
resizeMode: "contain",
marginBottom: 12,
},
button: {
marginTop: 10,
alignSelf: "center",
},
buttonText: {
color: "#007AFF",
fontSize: 14,
},
});

109
src/screens/product/ProductList.tsx Normal file
View File

@@ -0,0 +1,109 @@
import React, { useState } from "react";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import {
View,
Text,
StyleSheet,
Image,
FlatList,
TouchableOpacity,
ScrollView,
Dimensions,
} from "react-native";
import { globalStyles } from "styles/globalStyles";
import { Ionicons } from "@expo/vector-icons";
import { Picker } from "@react-native-picker/picker";
import ProductItem from "@components/product/ItemProduct";
import { products } from "../../data/product";
import FilterDropdown from "@components/product/FilterDropdown";
import Footer from "@components/footer/Footer";
const ProductList = () => {
const navigation = useNavigation<NavigationProp<any>>();
const [selectedAddress, setSelectedAddress] = useState("");
const [selectedBrand, setSelectedBrand] = useState("");
return (
<AppLayout activeTab="productlist">
<ScrollView>
<View style={styles.container}>
{/* Breadcrumb */}
<View style={globalStyles.breadcrumb}>
<TouchableOpacity
style={globalStyles.breadcrumbItem}
onPress={() => navigation.navigate("Home" as never)}
>
<Ionicons name="home-outline" size={20} color="#637381" />
</TouchableOpacity>
<Ionicons name="chevron-forward-outline" size={14} color="#999" />
<Text style={[globalStyles.breadcrumbText, { fontWeight: "600" }]}>
Màn hình máy tính
</Text>
</View>
<Text style={styles.nameCategory}>
Máy tính để bàn, máy tính xách tay và linh phụ kiện
</Text>
<View style={styles.boxFilter}>
<Text>Bộ lọc</Text>
<View style={styles.listFilter}>
<FilterDropdown
placeholder="Địa chỉ"
options={["Hà Nội", "TP.HCM", "Đà Nẵng"]}
selected={selectedAddress}
onSelect={setSelectedAddress}
/>
<FilterDropdown
placeholder="Thương hiệu"
options={["Dell", "HP", "Lenovo"]}
selected={selectedBrand}
onSelect={setSelectedBrand}
/>
</View>
</View>
<View style={styles.listProduct}>
{products.map((item) => (
<ProductItem key={item.id} product={item} />
))}
</View>
</View>
<Footer navigation={navigation} />
</ScrollView>
</AppLayout>
);
};
export default ProductList;
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 10,
marginBottom: 60,
},
nameCategory: {
fontSize: 16,
fontWeight: 700,
},
listFilter: {
flexDirection: "row",
flexWrap: "wrap",
marginRight: -5,
},
boxFilter: {
marginTop: 10,
paddingLeft: 10,
paddingTop: 10,
backgroundColor: "#f5f5f5",
},
listProduct: {
flexDirection: "row",
flexWrap: "wrap",
paddingTop: 10,
gap: 10,
paddingBottom: 10,
},
});

111
src/screens/product/ProductListBig.tsx Normal file
View File

@@ -0,0 +1,111 @@
import React from "react";
import {
View,
Text,
StyleSheet,
Image,
FlatList,
TouchableOpacity,
ScrollView,
Dimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import { globalStyles } from "styles/globalStyles";
import Footer from "@components/footer/Footer";
const screenWidth = Dimensions.get("window").width;
const numColumns = 2;
const categories = Array.from({ length: 12 }, (_, index) => ({
id: index + 1,
title: "Máy chủ",
image: require("../../../assets/images/category-avatar.png"),
link: "productlistmain",
}));
const ProductListBig = () => {
const navigation = useNavigation<NavigationProp<any>>();
const renderItem = ({ item }: { item: (typeof categories)[0] }) => (
<TouchableOpacity
style={styles.card}
onPress={() => navigation.navigate(item.link as never)}
>
<Image source={item.image} style={styles.image} resizeMode="contain" />
<Text style={styles.title} numberOfLines={1}>
{item.title}
</Text>
</TouchableOpacity>
);
return (
<AppLayout activeTab="productlist">
<ScrollView>
<View style={styles.container}>
{/* Breadcrumb */}
<View style={globalStyles.breadcrumb}>
<TouchableOpacity
style={globalStyles.breadcrumbItem}
onPress={() => navigation.navigate("Home" as never)}
>
<Ionicons name="home-outline" size={20} color="#637381" />
</TouchableOpacity>
<Ionicons name="chevron-forward-outline" size={14} color="#999" />
<Text style={[globalStyles.breadcrumbText, { fontWeight: "600" }]}>
Màn hình máy tính
</Text>
</View>
<FlatList
data={categories}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
numColumns={numColumns}
contentContainerStyle={styles.grid}
columnWrapperStyle={styles.columnWrapper}
showsVerticalScrollIndicator={false}
/>
</View>
<Footer navigation={navigation} />
</ScrollView>
</AppLayout>
);
};
export default ProductListBig;
const itemWidth = screenWidth / numColumns - 17;
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 10,
},
grid: {
paddingVertical: 10,
},
columnWrapper: {
justifyContent: "space-between",
marginBottom: 10,
},
card: {
width: itemWidth,
borderWidth: 1,
borderColor: "#c0c0c0",
borderRadius: 8,
padding: 10,
alignItems: "center",
backgroundColor: "#fff",
},
image: {
width: itemWidth,
height: 100,
marginBottom: 10,
},
title: {
textAlign: "center",
fontSize: 16,
fontWeight: "600",
},
});

110
src/screens/product/ProductSpecification.tsx Normal file
View File

@@ -0,0 +1,110 @@
import React, { useState } from "react";
import {
View,
Text,
TouchableOpacity,
FlatList,
StyleSheet,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
const MAX_VISIBLE_ROWS = 6;
const specificationData = [
{ label: "Mã sản phẩm", value: "VA3416WC" },
{ label: "Màu sắc", value: "Đen" },
{ label: "Độ sáng", value: "Max 300cd/m²" },
{ label: "Độ tương phản", value: "3000:1" },
{ label: "Màu sắc hiển thị", value: "16.7M" },
{ label: "Màu sắc hỗ trợ", value: "6500K" },
{ label: "Loại màn hình", value: "Cong R1500" },
{ label: "Kích cỡ màn hình", value: '34"' },
{ label: "Tấm nền", value: "VA" },
{ label: "Góc nhìn", value: "89°/89° (H/V)" },
{
label: "Tính năng đặc biệt",
value: `1. Flicker-Free Backlight adjustment\n2. Dynamic Contrast Ratio: DCR\n3. Adaptive Sync\n4. FPS/RTS\n5. PIP/PBP\n6. PQ\n7. GAME PLUS`,
},
];
const ProductSpecification = () => {
const [showAll, setShowAll] = useState(false);
const visibleData = showAll
? specificationData
: specificationData.slice(0, MAX_VISIBLE_ROWS);
return (
<View style={styles.container}>
<Text style={styles.title}>Thông tin chi tiết</Text>
<FlatList
data={visibleData}
keyExtractor={(item, index) => `${item.label}-${index}`}
renderItem={({ item }) => (
<View style={styles.row}>
<Text style={styles.label}>{item.label}</Text>
<Text style={styles.value}>{item.value}</Text>
</View>
)}
/>
{specificationData.length > MAX_VISIBLE_ROWS && (
<TouchableOpacity
onPress={() => setShowAll(!showAll)}
style={styles.toggleButton}
>
<Text style={styles.toggleText}>
{showAll ? "Thu gọn" : "Xem thêm thông số"}{" "}
<Ionicons
name={showAll ? "chevron-up-outline" : "chevron-down-outline"}
size={16}
color="#FF7A00"
/>
</Text>
</TouchableOpacity>
)}
</View>
);
};
export default ProductSpecification;
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
borderRadius: 8,
padding: 12,
marginTop: 15,
},
title: {
fontSize: 18,
fontWeight: "bold",
marginBottom: 12,
borderBottomWidth: 1,
borderColor: "#B1B1B1",
paddingBottom: 8,
},
row: {
flexDirection: "row",
marginBottom: 8,
},
label: {
flex: 1,
fontWeight: "600",
color: "#333",
},
value: {
flex: 1,
color: "#555",
},
toggleButton: {
marginTop: 12,
alignItems: "center",
},
toggleText: {
color: "#FF7A00",
fontWeight: "600",
fontSize: 14,
flexDirection: "row",
},
});

133
src/screens/product/SupplierList.tsx Normal file
View File

@@ -0,0 +1,133 @@
import React from "react";
import {
View,
ScrollView,
Text,
StyleSheet,
TextInput,
Dimensions,
} from "react-native";
import SupplierItem from "@components/product/SupplierItem";
import { Ionicons } from "@expo/vector-icons";
import Feather from "@expo/vector-icons/Feather";
const { width } = Dimensions.get("window");
const SupplierList = () => {
const suppliers = [
{
name: "Hanoicomputer",
distance: "3km",
rating: 4.7,
logo: require("../../../assets/images/logo-hacom.png"),
shippingPolicy:
"Miễn phí giao hàng\nNhận giao hàng và lắp đặt từ 8h00-21h30 các ngày trong tuần kể cả Thứ 7, CN",
priceRange: "9.000.000đ - 20.000.000đ",
hasVAT: true,
products: ["8GB - 9.000.000đ new White", "8GB - 9.000.000đ new White"],
},
{
name: "Hanoicomputer",
distance: "3km",
rating: 4.7,
logo: require("../../../assets/images/logo-hacom.png"),
shippingPolicy:
"Miễn phí giao hàng\nNhận giao hàng và lắp đặt từ 8h00-21h30 các ngày trong tuần kể cả Thứ 7, CN",
priceRange: "9.000.000đ - 20.000.000đ",
hasVAT: true,
products: ["8GB - 9.000.000đ new White", "8GB - 9.000.000đ new White"],
},
{
name: "Hanoicomputer",
distance: "3km",
rating: 4.7,
logo: require("../../../assets/images/logo-hacom.png"),
shippingPolicy:
"Miễn phí giao hàng\nNhận giao hàng và lắp đặt từ 8h00-21h30 các ngày trong tuần kể cả Thứ 7, CN",
priceRange: "9.000.000đ - 20.000.000đ",
hasVAT: true,
products: ["8GB - 9.000.000đ new White", "8GB - 9.000.000đ new White"],
},
];
return (
<ScrollView
style={{
padding: 10,
backgroundColor: "#fff",
marginTop: 15,
borderRadius: 4,
}}
>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
paddingBottom: 15,
}}
>
<Text style={{ fontSize: 16, fontWeight: "bold" }}>
Nhà cung cấp trên BestPC - Tại Hà Nội
</Text>
</View>
<View style={styles.Form}>
<Feather name="map-pin" size={20} color="#a6a6a6" />{" "}
<TextInput
placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
style={styles.inputMap}
placeholderTextColor="#666"
/>
</View>
{/* List */}
{suppliers.map((item, index) => (
<SupplierItem key={index} {...item} />
))}
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
marginTop: 10,
}}
>
<Text
style={{
textAlign: "center",
color: "#FF7A00",
fontSize: 16,
}}
>
Xem thêm
</Text>
<Ionicons
name="chevron-down"
style={{ marginLeft: 5 }}
size={16}
color="#FF7A00"
/>
</View>
</ScrollView>
);
};
export default SupplierList;
const styles = StyleSheet.create({
Form: {
flexDirection: "row",
alignItems: "center",
position: "relative",
borderWidth: 1,
borderColor: "#b1b1b1",
marginRight: 10,
width: width - 40,
height: 45,
paddingHorizontal: 10,
borderRadius: 4,
},
inputMap: {
width: "100%",
},
});