365 lines
10 KiB
TypeScript
365 lines
10 KiB
TypeScript
|
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,
|
||
|
|
},
|
||
|
|
});
|