upload 07/08
This commit is contained in:
BIN
assets/images/icon_add_store.png
Normal file
BIN
assets/images/icon_add_store.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 630 B |
BIN
assets/images/icon_showroom.png
Normal file
BIN
assets/images/icon_showroom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 308 B |
BIN
assets/images/icon_store_blue.png
Normal file
BIN
assets/images/icon_store_blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
assets/images/image-showroom.png
Normal file
BIN
assets/images/image-showroom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
148
src/components/shop/FormStore.tsx
Normal file
148
src/components/shop/FormStore.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
Linking,
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
Modal,
|
||||
TextInput,
|
||||
ScrollView,
|
||||
} from "react-native";
|
||||
import FontAwesome5 from "@expo/vector-icons/FontAwesome5";
|
||||
|
||||
type Props = {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const FormStore = ({ visible, onClose }: Props) => {
|
||||
return (
|
||||
<Modal visible={visible} animationType="fade" transparent>
|
||||
<View style={styles.overlay}>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerText}>Giới thiệu cửa hàng mới</Text>
|
||||
<TouchableOpacity onPress={onClose}>
|
||||
<Text style={styles.closeBtn}>
|
||||
<FontAwesome5 name="times" size={20} color="black" />
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.item}>
|
||||
<Text style={styles.label}>Tên cửa hàng</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Mời bạn nhập tên cửa hàng..."
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.item}>
|
||||
<Text style={styles.label}>Website</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Mời bạn nhập link website ..."
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.item}>
|
||||
<Text style={styles.label}>Tỉnh thành</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Mời bạn nhập tỉnh thành..."
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.item}>
|
||||
<Text style={styles.label}>Địa chỉ</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Mời bạn nhập địa chỉ cửa hàng..."
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.item}>
|
||||
<Text style={styles.label}>Mô tả</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Mời bạn nhập mô tả..."
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.item}>
|
||||
<Text style={styles.label}>Thông tin người liên hệ</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Mời bạn nhập thông tin..."
|
||||
/>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.submitBtn}>
|
||||
<Text style={styles.submitText}>Gửi thông tin</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormStore;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "#00000080",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
container: {
|
||||
width: "95%",
|
||||
backgroundColor: "white",
|
||||
borderRadius: 12,
|
||||
padding: 10,
|
||||
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",
|
||||
},
|
||||
item: {
|
||||
marginTop: 15,
|
||||
},
|
||||
label: {
|
||||
fontWeight: "bold",
|
||||
fontSize: 13,
|
||||
marginBottom: 7,
|
||||
},
|
||||
input: {
|
||||
width: "100%",
|
||||
borderWidth: 1,
|
||||
borderColor: "#B1B1B1",
|
||||
borderRadius: 4,
|
||||
padding: 10,
|
||||
},
|
||||
submitBtn: {
|
||||
marginTop: 15,
|
||||
height: 45,
|
||||
width: "100%",
|
||||
backgroundColor: "#C8B7FF",
|
||||
borderRadius: 4,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
submitText: {
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
250
src/components/shop/ListReview.tsx
Normal file
250
src/components/shop/ListReview.tsx
Normal 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",
|
||||
},
|
||||
});
|
||||
164
src/components/shop/ListShowroom.tsx
Normal file
164
src/components/shop/ListShowroom.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
Linking,
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
Modal,
|
||||
ScrollView,
|
||||
} from "react-native";
|
||||
import EvilIcons from "@expo/vector-icons/EvilIcons";
|
||||
import FontAwesome5 from "@expo/vector-icons/FontAwesome5";
|
||||
|
||||
type Props = {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const ListShowroom = ({ visible, onClose }: Props) => {
|
||||
return (
|
||||
<Modal visible={visible} animationType="fade" transparent>
|
||||
<View style={styles.overlay}>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Image
|
||||
source={require("../../../assets/images/image-showroom.png")}
|
||||
style={styles.imageShop}
|
||||
/>
|
||||
<TouchableOpacity onPress={onClose} style={styles.closeBtn}>
|
||||
<Text style={styles.iconcloseBtn}>
|
||||
<FontAwesome5 name="times" size={20} color="black" />
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<ScrollView style={styles.contentShop}>
|
||||
<View style={styles.itemShop}>
|
||||
<Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
|
||||
<View style={styles.cnt}>
|
||||
<EvilIcons name="location" size={20} color="black" />
|
||||
<Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.itemShop}>
|
||||
<Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
|
||||
<View style={styles.cnt}>
|
||||
<EvilIcons name="location" size={20} color="black" />
|
||||
<Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.itemShop}>
|
||||
<Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
|
||||
<View style={styles.cnt}>
|
||||
<EvilIcons name="location" size={20} color="black" />
|
||||
<Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.itemShop}>
|
||||
<Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
|
||||
<View style={styles.cnt}>
|
||||
<EvilIcons name="location" size={20} color="black" />
|
||||
<Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.itemShop}>
|
||||
<Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
|
||||
<View style={styles.cnt}>
|
||||
<EvilIcons name="location" size={20} color="black" />
|
||||
<Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.itemShop}>
|
||||
<Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
|
||||
<View style={styles.cnt}>
|
||||
<EvilIcons name="location" size={20} color="black" />
|
||||
<Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.itemShop}>
|
||||
<Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
|
||||
<View style={styles.cnt}>
|
||||
<EvilIcons name="location" size={20} color="black" />
|
||||
<Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.itemShop}>
|
||||
<Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
|
||||
<View style={styles.cnt}>
|
||||
<EvilIcons name="location" size={20} color="black" />
|
||||
<Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListShowroom;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "#00000080",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
itemShop: {
|
||||
padding: 10,
|
||||
borderTopWidth: 1,
|
||||
borderBlockColor: "#e3e3e3",
|
||||
},
|
||||
container: {
|
||||
width: "95%",
|
||||
backgroundColor: "white",
|
||||
borderRadius: 12,
|
||||
maxHeight: "90%",
|
||||
},
|
||||
header: {
|
||||
width: "100%",
|
||||
position: "relative",
|
||||
},
|
||||
imageShop: {
|
||||
width: "100%",
|
||||
resizeMode: "cover",
|
||||
borderRadius: 12,
|
||||
},
|
||||
closeBtn: {
|
||||
position: "absolute",
|
||||
right: 10,
|
||||
top: 10,
|
||||
zIndex: 9,
|
||||
width: 25,
|
||||
height: 25,
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "50%",
|
||||
textAlign: "center",
|
||||
lineHeight: 25,
|
||||
},
|
||||
iconcloseBtn: {
|
||||
fontSize: 22,
|
||||
color: "#808080",
|
||||
textAlign: "center",
|
||||
justifyContent: "center",
|
||||
lineHeight: 23,
|
||||
},
|
||||
name: {
|
||||
fontSize: 13,
|
||||
color: "#000",
|
||||
textTransform: "uppercase",
|
||||
fontWeight: "bold",
|
||||
marginBottom: 5,
|
||||
},
|
||||
cnt: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 5,
|
||||
},
|
||||
contentShop: {
|
||||
height: 400,
|
||||
},
|
||||
});
|
||||
251
src/components/shop/StoreItem.tsx
Normal file
251
src/components/shop/StoreItem.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
Linking,
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
} from "react-native";
|
||||
import AntDesign from "@expo/vector-icons/AntDesign";
|
||||
import EvilIcons from "@expo/vector-icons/EvilIcons";
|
||||
import Feather from "@expo/vector-icons/Feather";
|
||||
import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useNavigation, NavigationProp } from "@react-navigation/native";
|
||||
|
||||
const { width } = Dimensions.get("window");
|
||||
|
||||
export default function StoreItem({
|
||||
store,
|
||||
onShowReview,
|
||||
onShowListReview,
|
||||
onShowListShowroom,
|
||||
}: any) {
|
||||
const navigation = useNavigation<NavigationProp<any>>();
|
||||
const [selectedRating, setSelectedRating] = useState<number>(0);
|
||||
const handleRating = (value: number) => {
|
||||
setSelectedRating(value);
|
||||
};
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.boxTop}>
|
||||
<TouchableOpacity
|
||||
style={styles.infoShop}
|
||||
onPress={() => navigation.navigate("detailshop" as never)}
|
||||
>
|
||||
<Image source={store.logo} style={styles.logo} resizeMode="contain" />
|
||||
<View style={styles.title}>{store.name}</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.boxSave}>
|
||||
<AntDesign name="hearto" size={16} color="#7a7a7a" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.info}>
|
||||
<View style={{ flexDirection: "row", alignItems: "flex-start" }}>
|
||||
<Image
|
||||
source={require("../../../assets/images/icon_store_blue.png")}
|
||||
style={styles.iconStore}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Text style={styles.desc}>{store.description}</Text>
|
||||
</View>
|
||||
<View style={{ flexDirection: "row", alignItems: "flex-start" }}>
|
||||
<EvilIcons
|
||||
name="location"
|
||||
size={24}
|
||||
color="black"
|
||||
style={{
|
||||
width: 20,
|
||||
marginRight: 10,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
<Text style={styles.address}>{store.address}</Text>
|
||||
</View>
|
||||
<View style={{ flexDirection: "row", alignItems: "flex-start" }}>
|
||||
<Feather
|
||||
name="phone"
|
||||
size={18}
|
||||
color="black"
|
||||
style={{
|
||||
width: 20,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
marginRight: 10,
|
||||
}}
|
||||
/>
|
||||
<Text>Tel: {store.tel}</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
marginTop: 5,
|
||||
}}
|
||||
>
|
||||
<MaterialCommunityIcons
|
||||
name="web"
|
||||
size={20}
|
||||
color="black"
|
||||
style={{
|
||||
width: 20,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
marginRight: 10,
|
||||
}}
|
||||
/>
|
||||
<Text>Web: {store.website}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<TouchableOpacity
|
||||
style={{ flexDirection: "row", alignItems: "center" }}
|
||||
onPress={() => Linking.openURL(store.googleMap)}
|
||||
>
|
||||
<Image
|
||||
source={require("../../../assets/images/icon_map.png")}
|
||||
style={styles.iconStore}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Text style={styles.link}>Google Maps</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginLeft: 20,
|
||||
}}
|
||||
onPress={onShowListShowroom}
|
||||
>
|
||||
<Image
|
||||
source={require("../../../assets/images/icon_showroom.png")}
|
||||
style={styles.iconStore}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Text style={{ color: "#0d0d9c" }}>
|
||||
Có {store.showrooms} showroom
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.actions}>
|
||||
{renderStars(store.rate)}
|
||||
<TouchableOpacity onPress={onShowListReview} style={{ marginLeft: 5 }}>
|
||||
<Text style={styles.link}>Xem {store.reviewCount} đánh giá</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.btnRow}>
|
||||
<TouchableOpacity onPress={onShowReview}>
|
||||
<Text style={styles.reviewLink}>Đánh giá về chất lượng dịch vụ</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.contactBtn}>
|
||||
<Text style={styles.btnText}>Liên hệ</Text>
|
||||
<EvilIcons name="external-link" size={24} color="#462f91" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
borderTopWidth: 1,
|
||||
borderColor: "#ccc",
|
||||
marginTop: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
marginBottom: 10,
|
||||
},
|
||||
logo: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderWidth: 1,
|
||||
borderColor: "#d4d4d4",
|
||||
marginRight: 10,
|
||||
},
|
||||
boxTop: {
|
||||
marginBottom: 5,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
infoShop: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
width: width - 100,
|
||||
},
|
||||
iconStore: {
|
||||
width: 20,
|
||||
marginRight: 10,
|
||||
objectFit: "contain",
|
||||
},
|
||||
boxSave: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: "50%",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
lineHeight: 30,
|
||||
backgroundColor: "#e2e2e2",
|
||||
},
|
||||
info: { flex: 1, marginRight: 10 },
|
||||
title: {
|
||||
fontWeight: "bold",
|
||||
fontSize: 16,
|
||||
marginBottom: 5,
|
||||
width: width - 170,
|
||||
},
|
||||
desc: { color: "#1877f2" },
|
||||
address: { marginTop: 5 },
|
||||
row: { flexDirection: "row", alignItems: "center", marginTop: 10 },
|
||||
link: { color: "#FF7A00", textDecorationLine: "underline" },
|
||||
actions: { marginTop: 5, flexDirection: "row", alignItems: "center" },
|
||||
reviewLink: {
|
||||
textAlign: "right",
|
||||
textDecorationLine: "underline",
|
||||
color: "#1877f2",
|
||||
},
|
||||
btnRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginTop: 10,
|
||||
},
|
||||
saveBtn: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: "#303030",
|
||||
paddingVertical: 8,
|
||||
alignItems: "center",
|
||||
},
|
||||
contactBtn: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 5,
|
||||
},
|
||||
btnText: { color: "#462f91", fontWeight: "bold" },
|
||||
});
|
||||
64
src/components/shop/StoreList.tsx
Normal file
64
src/components/shop/StoreList.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, ScrollView, StyleSheet } from "react-native";
|
||||
import StoreItem from "./StoreItem";
|
||||
|
||||
const stores = [
|
||||
{
|
||||
name: "Hanoicomputer - Công cổ phần máy tính Hà Nội",
|
||||
logo: require("../../../assets/images/lienkien-ram.png"),
|
||||
description: "Chuyên mua bán trao đổi PC, laptop, linh phụ kiện máy tính",
|
||||
address: "198 Nguyễn Thị Minh Khai, P.6, Q.3, TP.HCM",
|
||||
googleMap: "https://goo.gl/maps/xxx",
|
||||
tel: "1800 6867 - 1800 6865",
|
||||
website: "https://hacom.com.vn",
|
||||
reviewCount: 47,
|
||||
rate: 5,
|
||||
showrooms: 7,
|
||||
},
|
||||
{
|
||||
name: "Hanoicomputer - Công cổ phần máy tính Hà Nội",
|
||||
logo: require("../../../assets/images/lienkien-ram.png"),
|
||||
description: "Chuyên mua bán trao đổi PC, laptop, linh phụ kiện máy tính",
|
||||
address: "198 Nguyễn Thị Minh Khai, P.6, Q.3, TP.HCM",
|
||||
googleMap: "https://goo.gl/maps/xxx",
|
||||
tel: "1800 6867 - 1800 6865",
|
||||
website: "https://hacom.com.vn",
|
||||
reviewCount: 47,
|
||||
rate: 5,
|
||||
showrooms: 7,
|
||||
},
|
||||
];
|
||||
|
||||
type Props = {
|
||||
onShowReview: () => void;
|
||||
onShowListShowroom: () => void;
|
||||
onShowListReview: () => void;
|
||||
};
|
||||
|
||||
export default function StoreList({
|
||||
onShowReview,
|
||||
onShowListShowroom,
|
||||
onShowListReview,
|
||||
}: Props) {
|
||||
return (
|
||||
<ScrollView style={styles.wrapper}>
|
||||
{stores.map((item, index) => (
|
||||
<StoreItem
|
||||
key={index}
|
||||
store={item}
|
||||
onShowReview={onShowReview}
|
||||
onShowListShowroom={onShowListShowroom}
|
||||
onShowListReview={onShowListReview}
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
wrapper: {
|
||||
backgroundColor: "#fff",
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
});
|
||||
@@ -40,7 +40,6 @@ const AppLayout = ({ children, activeTab }: Props) => {
|
||||
>
|
||||
{children}
|
||||
</ScrollView>
|
||||
|
||||
<Footer navigation={navigation} />
|
||||
<ButtonFooter navigation={navigation} activeTab={activeTab} />
|
||||
</SafeAreaView>
|
||||
|
||||
@@ -9,6 +9,8 @@ import ProductDetail from "../screens/product/ProductDetail";
|
||||
import Buildpc from "../screens/buildpc/Buildpc";
|
||||
import CompareBuildpc from "../screens/buildpc/CompareBuildpc";
|
||||
import BuildpcDeail from "../screens/buildpc/BuildpcDetail";
|
||||
import HomeShop from "../screens/shop/HomeShop";
|
||||
import DetailShop from "../screens/shop/DetailShop";
|
||||
|
||||
const Stack = createStackNavigator();
|
||||
|
||||
@@ -26,6 +28,8 @@ const AppNavigator: React.FC = () => {
|
||||
<Stack.Screen name="comparebuildpc" component={CompareBuildpc} />
|
||||
<Stack.Screen name="buildpcdetail" component={BuildpcDeail} />
|
||||
<Stack.Screen name="classifieds" component={BuildpcDeail} />
|
||||
<Stack.Screen name="homeshop" component={HomeShop} />
|
||||
<Stack.Screen name="detailshop" component={DetailShop} />
|
||||
</Stack.Navigator>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -119,7 +119,10 @@ const BoxMenuHome = () => {
|
||||
</View>
|
||||
<Text style={styles.textMenu}>Build pc</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.MenuItem}>
|
||||
<TouchableOpacity
|
||||
style={styles.MenuItem}
|
||||
onPress={() => navigation.navigate("classifieds" as never)}
|
||||
>
|
||||
<View style={styles.boxIconMenu}>
|
||||
<Image
|
||||
source={require("../../assets/images/icon_store.png")}
|
||||
@@ -128,7 +131,10 @@ const BoxMenuHome = () => {
|
||||
</View>
|
||||
<Text style={styles.textMenu}>Tìm người bán</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.MenuItem}>
|
||||
<TouchableOpacity
|
||||
style={styles.MenuItem}
|
||||
onPress={() => navigation.navigate("homeshop" as never)}
|
||||
>
|
||||
<View style={styles.boxIconMenu}>
|
||||
<Image
|
||||
source={require("../../assets/images/icon_location.png")}
|
||||
|
||||
@@ -14,7 +14,6 @@ import { Ionicons } from "@expo/vector-icons"; // hoặc icon_2025 nếu bạn c
|
||||
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";
|
||||
import Footer from "@components/footer/Footer";
|
||||
|
||||
export default function Buildpc() {
|
||||
const navigation = useNavigation<NavigationProp<any>>();
|
||||
|
||||
257
src/screens/shop/DetailShop.tsx
Normal file
257
src/screens/shop/DetailShop.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
Image,
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
} from "react-native";
|
||||
import { useNavigation, NavigationProp } from "@react-navigation/native";
|
||||
import AppLayout from "@layouts/AppLayout";
|
||||
import { Ionicons, Feather } from "@expo/vector-icons";
|
||||
import AntDesign from "@expo/vector-icons/AntDesign";
|
||||
import { url } from "inspector";
|
||||
import FontAwesome from "@expo/vector-icons/FontAwesome";
|
||||
import Entypo from "@expo/vector-icons/Entypo";
|
||||
|
||||
const { width } = Dimensions.get("window");
|
||||
|
||||
export default function DetailShop() {
|
||||
const navigation = useNavigation<NavigationProp<any>>();
|
||||
|
||||
return (
|
||||
<AppLayout activeTab="detailshop">
|
||||
<ScrollView>
|
||||
<View 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ìm người bán</Text>
|
||||
<Text style={styles.angle}>›</Text>
|
||||
</View>
|
||||
<View style={styles.breadcrumbItem}>
|
||||
<Text style={styles.text}>Chi tiết cửa hàng</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.boxTop}>
|
||||
<View style={styles.infoShop}>
|
||||
<Image
|
||||
source={require("../../../assets/images/logo-hacom.png")}
|
||||
style={styles.logo}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<View style={styles.title}>
|
||||
<View>Hanoicomputer</View>
|
||||
<Text>Công cổ phần máy tính Hà Nội</Text>
|
||||
</View>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.boxSave}>
|
||||
<AntDesign name="hearto" size={16} color="#7a7a7a" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.boxContent}>
|
||||
<View style={styles.item}>
|
||||
<Feather name="star" size={20} color="#666" />
|
||||
<Text style={styles.label}>Đánh giá: </Text>
|
||||
<Text style={styles.highlight}>4.6/5 </Text>
|
||||
<Text style={styles.subtext}>(43 đánh giá)</Text>
|
||||
</View>
|
||||
<View style={styles.item}>
|
||||
<Ionicons name="briefcase-outline" size={20} color="#666" />
|
||||
<Text style={styles.label}>Lĩnh vực: </Text>
|
||||
<Text style={styles.text}>
|
||||
Chuyên mua bán trao đổi PC, laptop, linh phụ kiện máy tính
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.item}>
|
||||
<Entypo name="location-pin" size={20} color="#666" />
|
||||
<Text style={styles.label}>Địa chỉ: </Text>
|
||||
<Text style={styles.text}>
|
||||
Tầng 7, tòa nhà số 198 Nguyễn Thị Minh Khai, phường 6, quận 3,
|
||||
TP. Hồ Chí Minh
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.item}>
|
||||
<Feather name="home" size={20} color="#666" />
|
||||
<Text style={styles.label}>Showroom: </Text>
|
||||
<Text style={styles.text}>Xem 7 showroom</Text>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.item}
|
||||
onPress={() => openLink("https://cp.com.vn/")}
|
||||
>
|
||||
<Feather name="globe" size={20} color="#666" />
|
||||
<Text style={styles.label}>Website: </Text>
|
||||
<Text style={[styles.text, styles.link]}>https://cp.com.vn/</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.item}>
|
||||
<Feather name="phone" size={20} color="#666" />
|
||||
<Text style={styles.label}>Tel: </Text>
|
||||
<Text style={styles.text}>1800 6867 - 1800 6865</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.item}>
|
||||
<Feather name="share-2" size={20} color="#666" />
|
||||
<Text style={styles.label}>Social: </Text>
|
||||
<View style={styles.socialIcons}>
|
||||
<TouchableOpacity
|
||||
onPress={() => openLink("https://facebook.com/")}
|
||||
>
|
||||
<FontAwesome name="facebook" size={24} color="#1877F2" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => openLink("https://youtube.com/")}
|
||||
>
|
||||
<FontAwesome name="youtube-play" size={24} color="red" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => openLink("https://tiktok.com/")}
|
||||
>
|
||||
<FontAwesome name="music" size={24} color="black" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.item}>
|
||||
<Feather name="file-text" size={20} color="#666" />
|
||||
<Text style={styles.label}>Mô tả: </Text>
|
||||
<Text style={styles.text}>
|
||||
Công ty Cổ phần Đầu tư Công nghệ HACOM (viết tắt là “HACOM”,
|
||||
tiền thân là Công ty Cổ phần Máy tính Hà Nội, sở hữu thương hiệu
|
||||
HANOICOMPUTER), được thành lập vào tháng 9/2001, hoạt động chủ
|
||||
yếu trong lĩnh vực bán lẻ các sản phẩm máy tính và thiết bị văn
|
||||
phòng. Trải qua chặng đường hơn 20 năm phát triển, đến nay HACOM
|
||||
đã trở thành một trong những thương hiệu hàng đầu trong lĩnh vực
|
||||
kinh doanh các sản phẩm Công nghệ thông tin tại Việt Nam với hệ
|
||||
thống các showroom quy mô và hiện đại trải dài từ Bắc vào Nam.
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingHorizontal: 10,
|
||||
backgroundColor: "#f4f4f4",
|
||||
},
|
||||
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",
|
||||
},
|
||||
logo: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderWidth: 1,
|
||||
borderColor: "#d4d4d4",
|
||||
marginRight: 10,
|
||||
},
|
||||
boxTop: {
|
||||
marginBottom: 5,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
backgroundColor: "#fff",
|
||||
padding: 10,
|
||||
borderRadius: 5,
|
||||
},
|
||||
infoShop: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
width: width - 100,
|
||||
},
|
||||
iconStore: {
|
||||
width: 20,
|
||||
marginRight: 10,
|
||||
objectFit: "contain",
|
||||
},
|
||||
boxSave: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: "50%",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
lineHeight: 30,
|
||||
backgroundColor: "#e2e2e2",
|
||||
},
|
||||
info: { flex: 1, marginRight: 10 },
|
||||
title: {
|
||||
fontWeight: "bold",
|
||||
fontSize: 16,
|
||||
marginBottom: 5,
|
||||
width: width - 170,
|
||||
},
|
||||
item: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
alignItems: "flex-start",
|
||||
borderBottomWidth: 1,
|
||||
borderColor: "#f0f0f0",
|
||||
padding: 10,
|
||||
},
|
||||
label: {
|
||||
fontWeight: "600",
|
||||
color: "#333",
|
||||
width: 80,
|
||||
marginLeft: 10,
|
||||
},
|
||||
highlight: {
|
||||
color: "#e74c3c",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
subtext: {
|
||||
color: "#666",
|
||||
},
|
||||
link: {
|
||||
color: "#007BFF",
|
||||
},
|
||||
socialIcons: {
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
marginLeft: 10,
|
||||
},
|
||||
boxContent: {
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 5,
|
||||
marginBottom: 15,
|
||||
},
|
||||
});
|
||||
236
src/screens/shop/HomeShop.tsx
Normal file
236
src/screens/shop/HomeShop.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
Image,
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
} from "react-native";
|
||||
import { useNavigation, NavigationProp } from "@react-navigation/native";
|
||||
import AppLayout from "@layouts/AppLayout";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import Feather from "@expo/vector-icons/Feather";
|
||||
|
||||
import StoreList from "@components/shop/StoreList";
|
||||
import ReviewModal from "@components/product/FormReview";
|
||||
import ListShowroom from "@components/shop/ListShowroom";
|
||||
import ListReview from "@components/shop/ListReview";
|
||||
import FormStore from "@components/shop/FormStore";
|
||||
|
||||
const { width } = Dimensions.get("window");
|
||||
|
||||
export default function HomeShop() {
|
||||
const navigation = useNavigation<NavigationProp<any>>();
|
||||
const [showReviewModal, setShowReviewModal] = useState(false);
|
||||
const [showListShowroom, setshowListShowroom] = useState(false);
|
||||
const [onShowListReviews, setshowListReview] = useState(false);
|
||||
const [onShowFormStore, setFormStore] = useState(false);
|
||||
|
||||
return (
|
||||
<AppLayout activeTab="homeshop">
|
||||
<ScrollView>
|
||||
<View 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ìm người bán</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.boxBackground}>
|
||||
<Text style={{ fontSize: 16, fontWeight: "bold" }}>
|
||||
Danh sách cửa hàng
|
||||
</Text>
|
||||
<View style={styles.boxFilter}>
|
||||
<View style={styles.boxInput}>
|
||||
<Ionicons
|
||||
name="search"
|
||||
size={18}
|
||||
color="black"
|
||||
style={styles.iconSearch}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Tìm kiếm cửa hàng"
|
||||
/>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.btnFilter}>
|
||||
<Feather name="filter" size={24} color="black" />
|
||||
<Text>lọc</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.listButton}>
|
||||
<TouchableOpacity style={styles.btnSortActive}>
|
||||
<Text style={styles.textActive}>Gần tôi nhất</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.btnSort}>
|
||||
<Text>Đánh giá tốt nhất</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.btnSort}>
|
||||
<Text>Đã xem</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{/* list btn */}
|
||||
<View style={styles.listShop}>
|
||||
<StoreList
|
||||
onShowReview={() => setShowReviewModal(true)}
|
||||
onShowListShowroom={() => setshowListShowroom(true)}
|
||||
onShowListReview={() => setshowListReview(true)}
|
||||
/>
|
||||
</View>
|
||||
{/* list shop */}
|
||||
</View>
|
||||
{/* background white */}
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.btnAddShop}
|
||||
onPress={() => setFormStore(true)}
|
||||
>
|
||||
<Text style={styles.textBtn}>Giới thiệu cửa hàng mới</Text>
|
||||
<Image
|
||||
source={require("../../../assets/images/icon_add_store.png")}
|
||||
style={styles.iconAddShop}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
{/* button new shop */}
|
||||
|
||||
<ReviewModal
|
||||
visible={showReviewModal}
|
||||
onClose={() => setShowReviewModal(false)}
|
||||
/>
|
||||
<ListShowroom
|
||||
visible={showListShowroom}
|
||||
onClose={() => setshowListShowroom(false)}
|
||||
/>
|
||||
<ListReview
|
||||
visible={onShowListReviews}
|
||||
onClose={() => setshowListReview(false)}
|
||||
/>
|
||||
<FormStore
|
||||
visible={onShowFormStore}
|
||||
onClose={() => setFormStore(false)}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingHorizontal: 10,
|
||||
backgroundColor: "#f4f4f4",
|
||||
},
|
||||
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",
|
||||
},
|
||||
boxBackground: {
|
||||
padding: 10,
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "4px",
|
||||
marginBottom: 10,
|
||||
},
|
||||
boxInput: {
|
||||
width: width - 100,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
borderWidth: 1,
|
||||
borderColor: "#462f91",
|
||||
borderRadius: "4px",
|
||||
height: 36,
|
||||
lineHeight: 36,
|
||||
},
|
||||
iconSearch: {
|
||||
width: 24,
|
||||
paddingLeft: 10,
|
||||
},
|
||||
input: {
|
||||
width: width - 70,
|
||||
height: "100%",
|
||||
outlineWidth: 0,
|
||||
padding: 10,
|
||||
},
|
||||
boxFilter: { marginTop: 10, flexDirection: "row", alignItems: "center" },
|
||||
btnFilter: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginLeft: 10,
|
||||
},
|
||||
listButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 10,
|
||||
},
|
||||
btnSort: {
|
||||
padding: 10,
|
||||
paddingLeft: 20,
|
||||
paddingRight: 20,
|
||||
marginRight: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: "#cacaca",
|
||||
borderRadius: 4,
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
},
|
||||
btnSortActive: {
|
||||
padding: 10,
|
||||
paddingLeft: 20,
|
||||
paddingRight: 20,
|
||||
marginRight: 10,
|
||||
backgroundColor: "#462f91",
|
||||
borderRadius: 4,
|
||||
},
|
||||
textActive: {
|
||||
color: "#fff",
|
||||
},
|
||||
listShop: {},
|
||||
btnAddShop: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: 10,
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 5,
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
},
|
||||
textBtn: {
|
||||
fontSize: 13,
|
||||
color: "#462f91",
|
||||
fontWeight: 700,
|
||||
},
|
||||
iconAddShop: {},
|
||||
});
|
||||
Reference in New Issue
Block a user