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

upload 07/08

Browse Source
This commit is contained in:
Tieptk
2025-08-07 16:03:55 +07:00
parent 67939d2f54
commit 1d804ed722
15 changed files with 1382 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/components/shop/ListReview.tsx Normal file
View File

@@ -0,0 +1,250 @@
import React, { useState } from "react";
import {
Modal,
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
Image,
Pressable,
FlatList,
ScrollView,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import FontAwesome5 from "@expo/vector-icons/FontAwesome5";
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>
);
};
type Props = {
visible: boolean;
onClose: () => void;
};
const ListReview = ({ visible, onClose }: Props) => {
return (
<Modal visible={visible} animationType="fade" transparent>
<View style={styles.overlay}>
<View style={styles.container}>
{/* Title */}
<View style={styles.header}>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<Text style={styles.headerText}>Đánh giá sản phẩm</Text>
<Text style={styles.headerNote}>(102 đánh giá)</Text>
</View>
<TouchableOpacity onPress={onClose}>
<Text style={styles.closeBtn}>
<FontAwesome5 name="times" size={20} color="black" />
</Text>
</TouchableOpacity>
</View>
<ScrollView>
<View>
<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>
)}
/>
</View>
</ScrollView>
</View>
</View>
</Modal>
);
};
export default ListReview;
const styles = StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: "#00000080",
justifyContent: "center",
alignItems: "center",
},
container: {
width: "95%",
backgroundColor: "white",
borderRadius: 12,
padding: 15,
maxHeight: "90%",
},
header: {
flexDirection: "row",
justifyContent: "space-between",
borderBottomWidth: 1,
borderColor: "#E4E4E4",
paddingBottom: 15,
},
headerText: {
fontSize: 20,
fontWeight: "bold",
textAlign: "center",
flex: 1,
},
closeBtn: {
fontSize: 22,
color: "#808080",
},
headerNote: {
paddingLeft: 5,
fontWeight: 400,
},
reviewItem: {
marginTop: 10,
paddingTop: 10,
paddingBottom: 10,
marginBottom: 10,
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,
},
star: {
fontSize: 16,
},
black: {
color: "#000",
},
});