diff --git a/assets/images/icon_add_store.png b/assets/images/icon_add_store.png new file mode 100644 index 0000000..df3b9a4 Binary files /dev/null and b/assets/images/icon_add_store.png differ diff --git a/assets/images/icon_showroom.png b/assets/images/icon_showroom.png new file mode 100644 index 0000000..30565cb Binary files /dev/null and b/assets/images/icon_showroom.png differ diff --git a/assets/images/icon_store_blue.png b/assets/images/icon_store_blue.png new file mode 100644 index 0000000..045eb3b Binary files /dev/null and b/assets/images/icon_store_blue.png differ diff --git a/assets/images/image-showroom.png b/assets/images/image-showroom.png new file mode 100644 index 0000000..cea85de Binary files /dev/null and b/assets/images/image-showroom.png differ diff --git a/src/components/shop/FormStore.tsx b/src/components/shop/FormStore.tsx new file mode 100644 index 0000000..2cf0f48 --- /dev/null +++ b/src/components/shop/FormStore.tsx @@ -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 ( + + + + + Giới thiệu cửa hàng mới + + + + + + + + + Tên cửa hàng + + + + Website + + + + + Tỉnh thành + + + + Địa chỉ + + + + Mô tả + + + + Thông tin người liên hệ + + + + Gửi thông tin + + + + + ); +}; + +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", + }, +}); diff --git a/src/components/shop/ListReview.tsx b/src/components/shop/ListReview.tsx new file mode 100644 index 0000000..bed4948 --- /dev/null +++ b/src/components/shop/ListReview.tsx @@ -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 ( + + {Array.from({ length: 5 }).map((_, index) => ( + + ))} + + ); +}; + +type Props = { + visible: boolean; + onClose: () => void; +}; + +const ListReview = ({ visible, onClose }: Props) => { + return ( + + + + {/* Title */} + + + Đánh giá sản phẩm + (102 đánh giá) + + + + + + + + + + + item.id} + renderItem={({ item }) => ( + + + + + + {item.name} + {item.time} + + + {renderStars(item.star)} + + + + + + {item.title} + {item.content} + + {item.images.map((img, index) => ( + + ))} + + + + + Bình luận (23) + + + + + Thích (23) + + + + + + )} + /> + + + + + + ); +}; + +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", + }, +}); diff --git a/src/components/shop/ListShowroom.tsx b/src/components/shop/ListShowroom.tsx new file mode 100644 index 0000000..f1b701f --- /dev/null +++ b/src/components/shop/ListShowroom.tsx @@ -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 ( + + + + + + + + + + + + + + HACOM - HAI BÀ TRƯNG + + + Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội + + + + HACOM - HAI BÀ TRƯNG + + + Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội + + + + HACOM - HAI BÀ TRƯNG + + + Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội + + + + HACOM - HAI BÀ TRƯNG + + + Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội + + + + HACOM - HAI BÀ TRƯNG + + + Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội + + + + HACOM - HAI BÀ TRƯNG + + + Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội + + + + HACOM - HAI BÀ TRƯNG + + + Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội + + + + HACOM - HAI BÀ TRƯNG + + + Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội + + + + + + + ); +}; + +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, + }, +}); diff --git a/src/components/shop/StoreItem.tsx b/src/components/shop/StoreItem.tsx new file mode 100644 index 0000000..4a93b7b --- /dev/null +++ b/src/components/shop/StoreItem.tsx @@ -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>(); + const [selectedRating, setSelectedRating] = useState(0); + const handleRating = (value: number) => { + setSelectedRating(value); + }; + const renderStars = (count: number) => { + return ( + + {Array.from({ length: 5 }).map((_, index) => ( + + ))} + + ); + }; + + return ( + + + navigation.navigate("detailshop" as never)} + > + + {store.name} + + + + + + + + + + {store.description} + + + + {store.address} + + + + Tel: {store.tel} + + + + Web: {store.website} + + + + Linking.openURL(store.googleMap)} + > + + Google Maps + + + + + Có {store.showrooms} showroom + + + + + + + {renderStars(store.rate)} + + Xem {store.reviewCount} đánh giá + + + + + Đánh giá về chất lượng dịch vụ + + + Liên hệ + + + + + ); +} + +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" }, +}); diff --git a/src/components/shop/StoreList.tsx b/src/components/shop/StoreList.tsx new file mode 100644 index 0000000..5d217e7 --- /dev/null +++ b/src/components/shop/StoreList.tsx @@ -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 ( + + {stores.map((item, index) => ( + + ))} + + ); +} + +const styles = StyleSheet.create({ + wrapper: { + backgroundColor: "#fff", + paddingTop: 10, + paddingBottom: 10, + }, +}); diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx index 1bf0de1..1aaa2e5 100644 --- a/src/layouts/AppLayout.tsx +++ b/src/layouts/AppLayout.tsx @@ -40,7 +40,6 @@ const AppLayout = ({ children, activeTab }: Props) => { > {children} -