diff --git a/App.tsx b/App.tsx index 68b8015..27a9f8c 100644 --- a/App.tsx +++ b/App.tsx @@ -17,6 +17,16 @@ import ProductDetail from './screens/ProductDetail'; import CartDetail from './screens/Cart'; import ArticleHome from './screens/ArticleHome'; import ArticleList from './screens/ArticleList'; +import ArticleDetail from './screens/ArticleDetail'; +import Login from './screens/Login'; +import Register from './screens/Register'; +import ForgetPassword from './screens/ForgetPassword'; +import AboutUs from './screens/AboutUs'; +import ContactUs from './screens/ContactUs'; +import BuildPc from './screens/BuildPc'; + + + export default function App() { const isLoadingComplete = useCachedResources(); @@ -130,6 +140,90 @@ const ArticleListPage = ({ navigation }: { navigation: any }) => { ); } +const ArticleDetailPage = ({ navigation }: { navigation: any }) => { + return ( + + + + ); +} + +const LoginPage = ({ navigation }: { navigation: any }) => { + return ( + + + + ); +} + +const RegisterPage = ({ navigation }: { navigation: any }) => { + return ( + + + + ); +} + +const ForgetPasswordPage = ({ navigation }: { navigation: any }) => { + return ( + + + + ); +} + +const AboutUsPage = ({ navigation }: { navigation: any }) => { + return ( + + + + ); +} + +const ContactUsPage = ({ navigation }: { navigation: any }) => { + return ( + + + + ); +} + +const BuildPcPage = ({ navigation }: { navigation: any }) => { + return ( + + + + ); +} + const MainContentRouter = () => { return ( @@ -139,6 +233,13 @@ const MainContentRouter = () => { + + + + + + + ); } diff --git a/assets/images/img-cmt.png b/assets/images/img-cmt.png new file mode 100644 index 0000000..9f1aa3d Binary files /dev/null and b/assets/images/img-cmt.png differ diff --git a/screens/AboutUs.tsx b/screens/AboutUs.tsx new file mode 100644 index 0000000..ca821ca --- /dev/null +++ b/screens/AboutUs.tsx @@ -0,0 +1,86 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain'; + +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; +import { ArticleItem } from '../components/article/ArticleItem'; + +export default function AboutUs() { + return ( + + + + Trang chủ + + Giới thiệu + + + + Nội dung đang được cập nhật! + + + + + + + + + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + brecrumb: { + display: 'flex', + width: winWidth, + paddingLeft: 10, + paddingRight: 10, + flexDirection: 'row', + height: 18, + alignItems: 'center', + marginTop: 10, + marginBottom: 10, + }, + brecrumbText: { + fontSize: 13, + color: '#222', + }, + brecrumbTextLast: { + fontSize: 13, + color: '#b7b7b7', + }, + brecrumbIcon: { + fontSize: 13, + color: '#222', + marginLeft: 6, + marginRight: 6 + }, + boxAboutUs: { + paddingHorizontal: 10, + marginBottom: 20, + } +}) \ No newline at end of file diff --git a/screens/ArticleDetail.tsx b/screens/ArticleDetail.tsx new file mode 100644 index 0000000..4976456 --- /dev/null +++ b/screens/ArticleDetail.tsx @@ -0,0 +1,691 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain'; + +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; +import { ArticleItem } from '../components/article/ArticleItem'; + +export default function ArticleDetail() { + return ( + + + + Trang chủ + + Tin tức + + + + + + + + + + + + + + + + + + + + + + ) +} + +const ArticleDetailContent = () => { + return ( + + Chương trình Khuyến mãi “Play-with Power by MSI” + Từ 17-03-2021, 4:32 pm + + + + By + HNC + - 7-03-2021, 4:32 pm + + + + + + + Nội dung đang được cập nhật! + + + ) +} + + +const CommentArticle = () => { + return ( + + Trả lời + Email của bạn sẽ không được hiển thị công khai. + Các trường bắt buộc được đánh dấu * + + + Bình luận* + + + + Tên* + + + + + Email* + + + + Trang web + + + + + + Phản hồi + + + + + ) +} + + +const dataArticle = [ + { + id: 1, + title: 'Chương trình Khuyến mãi “Play-with Power by MSI”', + image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg', + category: 'Review sản phẩm', + visit: 10, + comment: 40, + createDate: '12-03-2021, 5:30 pm', + createBy: 'Bùi Phương Thảo', + summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình', + }, + { + id: 2, + title: 'Tự bẻ khóa tính năng hạn chế khai thác tiền ảo của RTX 3060, Nvidia đang \'tiếp tay\' cho dân đào coin?', + image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg', + category: 'Review sản phẩm', + visit: 10, + comment: 40, + createDate: '13-03-2021, 8:30 pm', + createBy: 'Tiêu Phong', + summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình', + }, + { + id: 3, + title: '3 CPU “thần thánh” sẽ cứu rỗi game thủ', + image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg', + category: 'Review sản phẩm', + visit: 10, + comment: 40, + createDate: '13-03-2021, 5:30 am', + createBy: 'Gâu Gâu', + summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình', + }, + { + id: 4, + title: 'Chương trình Khuyến mãi “Quà Cực Sốc Khi Dựng Cấu Hình PC Lắp Ráp”', + image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg', + category: 'Review sản phẩm', + visit: 10, + comment: 40, + createDate: '22-03-2021, 5:30 pm', + createBy: 'Meo Meo', + summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình', + }, +] + +const ArticleDetailNew = () => { + const dataArticleNew = dataArticle; + return ( + + + Bài viết mới nhất + + + + { + dataArticleNew.map((item, index) => { + if (index == 0) { + return ( + + + {item.title} + + By + {item.createBy} + {item.createDate} + + + {item.comment} + + + + {item.visit} + + + + {item.summary} + + + ) + } else if (index > 0 && index < 4) { + return ( + + + + + + {item.title} + + + + {item.createDate} + + + + {item.comment} + + + + {item.visit} + + + + + ) + } + }) + } + + + ) +} + +const ArticleDetailHot = () => { + + const dataArticleHot = dataArticle; + + return ( + + + Bài viết nhiều người xem + + + + { + dataArticleHot.map((item, index) => { + if (index < 5) { + return ( + + + {item.title} + + By + {item.createBy} + {item.createDate} + + + {item.comment} + + + + {item.visit} + + + + {item.summary} + + + ) + } + }) + } + + + ) +} + +function formatCurrency(price: string | number) { + let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + let len = priceConvert.length; + return priceConvert.substring(0, len - 3); +} + +const ArticleDetailProduct = () => { + const productData = [ + { + id: 1, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + }, + { + id: 2, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 25000000, + marketPrice: 50000000, + quantity: 0, + }, + { + id: 3, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 35000000, + marketPrice: 50000000, + quantity: 1, + }, + { + id: 4, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 40000000, + marketPrice: 50000000, + quantity: 1, + }, + { + id: 5, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + }, + ] + + return( + + + Sản phẩm bán chạy nhất + + + + { + productData.map((item, index) => { + if(index < 5) { + return( + + + + + + Mã SP: {item.productSKU} + {item.productName} + {formatCurrency(item.price)} đ + {formatCurrency(item.marketPrice)}đ + + + ) + } + }) + } + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + brecrumb: { + display: 'flex', + width: winWidth, + paddingLeft: 10, + paddingRight: 10, + flexDirection: 'row', + height: 18, + alignItems: 'center', + marginTop: 10, + marginBottom: 10, + }, + brecrumbText: { + fontSize: 13, + color: '#222', + }, + brecrumbTextLast: { + fontSize: 13, + color: '#b7b7b7', + }, + brecrumbIcon: { + fontSize: 13, + color: '#222', + marginLeft: 6, + marginRight: 6 + }, + boxArticleDetail: { + marginBottom: 20, + width: winWidth, + paddingHorizontal: 10, + }, + boxArticleDetailTitle: { + fontSize: 30, + fontWeight: 'bold', + color: '#222', + marginBottom: 10, + }, + boxArticleDetailTime: { + fontSize: 18, + color: '#888888', + marginBottom: 10, + }, + boxArticleDetailCreateBy: { + width: '100%', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + marginBottom: 20, + }, + boxArticleDetailCreateByImg: { + width: 29, + height: 29, + borderRadius: 3, + overflow: 'hidden', + marginRight: 10, + }, + boxArticleDetailCreateByText: { + flexDirection: 'row' + }, + boxArticleDetailCreateByTextSt: { + fontSize: 13, + color: '#888' + }, + boxArticleDetailCreateByTextB: { + fontSize: 13, + fontWeight: 'bold', + color: '#536be8', + marginHorizontal: 5, + }, + boxArticleDetailImageMain: { + width: '100%', + height: ratio * 450, + }, + boxArticleDetailContent: { + marginTop: 20, + width: '100%', + paddingBottom: 20, + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, + }, + boxCommentArticle: { + width: winWidth, + paddingHorizontal: 10, + marginBottom: 20, + }, + boxCommentArticleTitle: { + fontWeight: 'bold', + fontSize: 24, + marginBottom: 10, + }, + boxCommentArticleNote: { + fontSize: 14, + }, + boxCommentArticleContent: { + marginTop: 20, + }, + boxCommentArticleItem: { + width: '100%', + marginBottom: 20, + }, + boxCommentArticleItemNd: { + width: '49%', + marginBottom: 20, + }, + boxCommentArticleItemName: { + fontSize: 16, + fontWeight: 'bold', + marginBottom: 5, + }, + boxCommentArticleItemArea: { + width: '100%', + height: 110, + borderWidth: 1, + borderColor: '#e1e1e1', + borderRadius: 5, + padding: 10, + }, + boxCommentArticleItemInput: { + width: '100%', + height: 40, + borderWidth: 1, + borderColor: '#e1e1e1', + borderRadius: 5, + paddingHorizontal: 10, + }, + boxCommentArticleItemStyleNd: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between' + }, + boxCommentArticleSubmit: { + flexDirection: 'row', + }, + boxCommentArticleSubmitButton: { + width: 115, + height: 40, + backgroundColor: '#f70d28', + borderRadius: 5, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + boxCommentArticleSubmitText: { + textTransform: 'uppercase', + color: '#fff', + }, + boxArticleDetailNew: { + width: winWidth, + paddingHorizontal: 10, + }, + ArticleTitleAll: { + paddingVertical: 10, + marginBottom: 10, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + }, + ArticleTitleAllText: { + fontSize: 16, + fontWeight: 'bold', + color: '#ce0707', + textTransform: 'uppercase', + }, + ArticleTitleAllLine: { + width: 100, + height: 1, + backgroundColor: '#ce0707', + position: 'absolute', + bottom: -1, + left: 0, + }, + boxArticleDetailNewFirstItem: { + width: '100%', + marginBottom: 20, + }, + boxArticleDetailNewFirstItemImg: { + width: '100%', + marginBottom: 10, + height: ratio * 450, + }, + boxArticleDetailNewFirstItemName: { + fontSize: 18, + fontWeight: 'bold', + marginBottom: 10, + }, + boxArticleDetailNewFirstItemOther: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + boxArticleDetailNewFirstItemOtherText: { + fontSize: 12, + color: '#888' + }, + boxArticleDetailNewFirstItemCus: { + fontSize: 12, + color: '#536be8', + textTransform: 'uppercase', + marginHorizontal: 8, + fontWeight: 'bold' + }, + boxArticleNewHomeItemView: { + flexDirection: 'row', + marginLeft: 10, + alignItems: 'center' + }, + boxArticleNewHomeItemIcon: { + fontSize: 11, + color: '#2e9fff', + marginRight: 2, + }, + boxArticleNewHomeItemViewText: { + fontSize: 12, + color: '#888' + }, + boxArticleDetailNewFirstItemSummary: { + marginBottom: 10, + }, + boxArticleDetailNewFirstItemSummaryCt: {}, + boxArticleDetailNewItem: { + flexDirection: 'row', + width: '100%', + marginBottom: 20, + }, + boxArticleDetailNewItemImage: { + width: 130, + height: 87, + overflow: 'hidden', + position: 'relative', + marginRight: 10, + }, + boxArticleDetailNewItemImageCt: { + width: '100%', + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + }, + boxArticleDetailNewItemInfo: { + width: winWidthP10 - 140, + }, + boxArticleDetailNewItemName: { + fontWeight: 'bold', + marginBottom: 10, + lineHeight: 23, + }, + boxArticleDetailNewItemInfoOther: { + flexDirection: 'row', + alignItems: 'center', + }, + boxArticleNewHomeItemViewSt: { + flexDirection: 'row', + alignItems: 'center' + }, + boxPrductArticleDetail: { + width: winWidth, + paddingHorizontal: 10, + marginBottom: 20, + }, + boxPrductArticleDetailList: {}, + boxPrductArticleDetailItem: { + flexDirection: 'row', + marginBottom: 10, + }, + boxPrductArticleDetailImg: { + width: 174, + height: 174, + position: 'relative', + overflow: 'hidden', + marginRight: 10, + }, + boxPrductArticleDetailImgCt: { + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + }, + boxPrductArticleDetailInfo: { + width: winWidthP10 - 184, + }, + boxPrductArticleDetailName: { + fontWeight: 'bold', + marginBottom: 10, + }, + boxPrductArticleDetailSku: { + fontSize: 12, + color: '#ce0707', + marginBottom: 10, + }, + boxPrductArticleDetailPrice: { + fontSize: 19, + fontWeight: 'bold', + color: '#f40606', + marginBottom: 7, + }, + boxPrductArticleDetailOldPrice: { + color: '#888', + textDecorationLine: 'line-through', + }, +}) \ No newline at end of file diff --git a/screens/BuildPc.tsx b/screens/BuildPc.tsx new file mode 100644 index 0000000..ea5eb09 --- /dev/null +++ b/screens/BuildPc.tsx @@ -0,0 +1,711 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain'; + +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; +import { ArticleItem } from '../components/article/ArticleItem'; + +export default function BuildPc() { + return ( + + + + Trang chủ + + Build PC + + + + + + + + + + + + + + ) +} + +const BuildPcBox = () => { + return ( + + Xây dựng máy tính + + + + Chọn linh kiện xây dựng cấu hình + + + Cấu hình 1 + + + Cấu hình 2 + + + Cấu hình 3 + + + Cấu hình 4 + + + Cấu hình 5 + + + + + Làm mới + + + + + Chi phí dự tính 30.000.000 đ + + + + + + + + ) +} + +const BuildPcListStore = () => { + const [checked, setChecked] = React.useState('store1'); + const listStore = [ + { + id: 1, + name: '01: 131 Lê Thanh Nghị - Q. Hai Bà Trưng - Hà Nội' + }, + { + id: 2, + name: '02: 43 Thái Hà - Q. Đống Đa - Hà Nội' + }, + { + id: 3, + name: '03: A1-6 Lô 8A Lê Hồng Phong - Q. Ngô Quyền - Hải Phòng' + }, + { + id: 4, + name: '04: 79 Nguyễn Văn Huyên - Q. Cầu Giấy - Hà Nội' + }, + { + id: 5, + name: '05: 511 Quang Trung - Q. Hà Đông - Hà Nội' + }, + { + id: 6, + name: '06: 520 Cách Mạng Tháng 8 - Quận 3 - TP HCM' + }, + { + id: 7, + name: '07: 398 Nguyễn Văn Cừ - Q. Long Biên - Hà Nội' + }, + { + id: 8, + name: '08: 299 Minh Khai - Từ Sơn - Bắc Ninh' + }, + ] + return ( + + + + setChecked('store0')} /> + + Tất cả kho + + { + listStore.map(item => { + const value = 'store' + item.id; + return ( + + + setChecked(value)} /> + + {item.name} + + ) + }) + } + + ) +} + +const ListItemBuildPc = () => { + const dataListItem = [ + { + id: 1, + name: 'Bộ vi xử lý', + }, + { + id: 2, + name: 'Bo mạch chủ', + }, + { + id: 3, + name: 'RAM', + }, + { + id: 4, + name: 'HDD', + }, + { + id: 5, + name: 'SSD', + }, + { + id: 6, + name: 'VGA', + }, + { + id: 7, + name: 'Nguồn', + }, + { + id: 8, + name: 'Vỏ Case', + }, + { + id: 9, + name: 'Màn hình', + }, + { + id: 10, + name: 'Bàn phám, Chuột', + }, + { + id: 11, + name: 'Bàn phím', + }, + { + id: 12, + name: 'Chuột', + }, + { + id: 13, + name: 'Tai nghe', + }, + { + id: 14, + name: 'Loa', + }, + { + id: 15, + name: 'Ghế gamming', + }, + { + id: 16, + name: 'Quạt làm mát', + }, + { + id: 17, + name: 'Tản nhiệt nước All in One', + }, + { + id: 18, + name: 'Tản nhiệt nước custom', + }, + { + id: 19, + name: 'Tản nhiệt khí', + }, + { + id: 20, + name: 'Windows bản quyền', + }, + { + id: 21, + name: 'Phần mềm Antivirus', + }, + ]; + const [modalVisible, setModalVisible] = useState(false); + return ( + + { + dataListItem.map((item, index) => { + return ( + + {index + 1}. {item.name} + setModalVisible(true)}> + + + + + ) + }) + } + { setModalVisible(!modalVisible); }}> + + setModalVisible(!modalVisible)}> + + + + + + + + + ) +} + +function formatCurrency(price: string | number) { + let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + let len = priceConvert.length; + return priceConvert.substring(0, len - 3); +} + +const ProductBuildPC = () => { + const productData = [ + { + id: 1, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + warrantry: '36 Tháng', + }, + { + id: 2, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 25000000, + marketPrice: 50000000, + quantity: 0, + warrantry: '36 Tháng', + }, + { + id: 3, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 35000000, + marketPrice: 50000000, + quantity: 1, + warrantry: '36 Tháng', + }, + { + id: 4, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 40000000, + marketPrice: 50000000, + quantity: 1, + warrantry: '36 Tháng', + }, + { + id: 5, + productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)', + productSKU: 'TESTSKU', + productImage: { + small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + warrantry: '36 Tháng', + }, + ] + + return ( + + + { + productData.map((item, index) => { + if (index < 5) { + return ( + + + + + + {item.productName} + + Mã SP: + {item.productSKU} + + + Bảo hành: + {item.warrantry} + + + Kho hàng: + { + item.quantity == 0 + ? + + Liên hệ + + : + + Còn hàng + + } + + {formatCurrency(item.price)} đ + + + { + item.quantity == 0 + ? + + + : + + + } + + + ) + } + }) + } + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + brecrumb: { + display: 'flex', + width: winWidth, + paddingLeft: 10, + paddingRight: 10, + flexDirection: 'row', + height: 18, + alignItems: 'center', + marginTop: 10, + marginBottom: 10, + }, + brecrumbText: { + fontSize: 13, + color: '#222', + }, + brecrumbTextLast: { + fontSize: 13, + color: '#b7b7b7', + }, + brecrumbIcon: { + fontSize: 13, + color: '#222', + marginLeft: 6, + marginRight: 6 + }, + boxBuildPc: { + paddingHorizontal: 10, + width: winWidth, + marginBottom: 30, + }, + boxBuildPcTitle: { + width: '100%', + marginBottom: 20, + fontSize: 22, + fontWeight: 'bold', + textTransform: 'uppercase', + textAlign: 'center', + color: '#ed1b24', + }, + boxBuildPcBanner: { + marginBottom: 20, + width: '100%', + height: 72, + position: 'relative', + }, + boxBuildPcBannerImg: { + width: '100%', + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + }, + boxBuildPcNote: { + marginBottom: 20, + textAlign: 'center', + color: '#2d3877', + fontSize: 15, + fontWeight: 'bold', + }, + listConfig: { + flexDirection: 'row', + marginBottom: 20, + flexWrap: 'wrap', + justifyContent: 'space-between', + alignItems: 'center', + paddingBottom: 20, + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, + }, + listConfigItem: { + width: '48%', + marginBottom: 10, + flexDirection: 'row', + height: 40, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#d9d9d9', + borderRadius: 3, + }, + listConfigItemText: { + color: '#333', + textTransform: 'uppercase' + }, + listConfigItemActive: { + backgroundColor: '#2d3877', + }, + listConfigItemTextActive: { + color: '#fff', + }, + boxBuildPcReload: { + width: 126, + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + borderRadius: 3, + backgroundColor: '#2d3877', + marginBottom: 20, + }, + boxBuildPcReloadText: { + color: '#fff', + textTransform: 'uppercase', + marginRight: 10, + }, + boxBuildPcReloadIcon: { + color: '#fff', + }, + boxBuildPcTotalPrice: { + textAlign: 'right' + }, + boxBuildPcTotalPriceNum: { + fontWeight: 'bold', + color: 'red' + }, + boxStore: { + marginBottom: 20, + paddingBottom: 20, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1' + }, + boxStoreItem: { + marginBottom: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-start', + }, + boxStoreItemCheck: { + width: 36, + height: 36, + borderRadius: 18, + borderWidth: 1, + borderColor: '#666', + marginRight: 10, + }, + boxStoreItemText: { + width: winWidthP10 - 46, + }, + itemBuildPCList: {}, + itemBuildPC: { + marginBottom: 10, + paddingBottom: 10, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1' + }, + itemBuildPCText: {}, + itemBuildPCShowPop: { + width: 50, + height: 40, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 3, + backgroundColor: '#243a76', + }, + itemBuildPCShowPopText: { + fontWeight: 'bold', + fontSize: 36, + color: '#fff', + lineHeight: 36, + }, + itemBuildPCPop: { + backgroundColor: '#fff', + flex: 1, + padding: 10, + position: 'relative', + paddingTop: 50, + }, + itemBuildPCPopClose: { + width: 30, + height: 30, + borderWidth: 1, + justifyContent: 'center', + flexDirection: 'row', + alignItems: 'center', + position: 'absolute', + top: 15, + right: 10, + }, + itemBuildPCPopCloseIcon: {}, + boxPrductBuildPc: { + width: winWidth, + paddingHorizontal: 10, + marginBottom: 20, + }, + boxPrductBuildPcList: {}, + boxPrductBuildPcItem: { + flexDirection: 'row', + marginBottom: 15, + alignItems: 'center', + paddingBottom: 15, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1' + }, + boxPrductBuildPcImg: { + width: 60, + height: 60, + position: 'relative', + overflow: 'hidden', + marginRight: 10, + }, + boxPrductBuildPcImgCt: { + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + }, + boxPrductBuildPcInfo: { + width: winWidthP10 - 130, + paddingRight: 10, + }, + boxPrductBuildPcName: { + marginBottom: 10, + }, + boxPrductBuildPcOtherText: { + marginBottom: 10, + flexDirection: 'row', + }, + boxPrductBuildPcOtherTextSt: { + fontSize: 12, + width: 80, + }, + boxPrductBuildPcOtherTextNd: { + fontSize: 12, + }, + boxPrductBuildPcPrice: { + fontSize: 19, + fontWeight: 'bold', + color: '#f40606', + marginBottom: 7, + }, + boxPrductBuildPcOldPrice: { + color: '#888', + textDecorationLine: 'line-through', + }, + boxPrductBuildPcQuantity: { + width: 80, + }, + boxPrductBuildPcQuantityNo: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 10, + height: 20, + backgroundColor: '#eaeaea', + borderRadius: 3, + }, + boxPrductBuildPcQuantityNoIcon: { + marginRight: 5, + }, + boxPrductBuildPcQuantityNoText: {}, + boxPrductBuildPcQuantityHas: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 10, + height: 20, + backgroundColor: '#278c56', + borderRadius: 3, + }, + boxPrductBuildPcQuantityHasIcon: { + marginRight: 5, + color: '#fff', + }, + boxPrductBuildPcQuantityHasText: { + color: '#fff' + }, + boxPrductBuildPcSelec: { + + }, + boxPrductBuildPcSelecNo: { + width: 50, + height: 40, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 3, + backgroundColor: '#ec1b23', + }, + boxPrductBuildPcSelecYes: { + width: 50, + height: 40, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 3, + backgroundColor: '#243a76', + }, + boxPrductBuildPcSelecIcon: { + fontWeight: 'bold', + fontSize: 36, + color: '#fff', + lineHeight: 36, + }, +}) \ No newline at end of file diff --git a/screens/ContactUs.tsx b/screens/ContactUs.tsx new file mode 100644 index 0000000..8d19e1f --- /dev/null +++ b/screens/ContactUs.tsx @@ -0,0 +1,148 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain'; + +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; +import { ArticleItem } from '../components/article/ArticleItem'; + +export default function ContactUs() { + return ( + + + + Trang chủ + + Liên Hệ + + + + Mọi thắc mắc hoặc góp ý, quý khách vui lòng liên hệ trực tiếp với bộ phận chăm sóc khách hàng của chúng tôi bằng cách điền đầy đủ thông tin vào form bên dưới + + + Tên đầy đủ* + + + + Email* + + + + Số điện thoại + + + + Thông tin liên hệ* + + + + Gửi liên hệ + + + + + + + + + + + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + brecrumb: { + display: 'flex', + width: winWidth, + paddingLeft: 10, + paddingRight: 10, + flexDirection: 'row', + height: 18, + alignItems: 'center', + marginTop: 10, + marginBottom: 10, + }, + brecrumbText: { + fontSize: 13, + color: '#222', + }, + brecrumbTextLast: { + fontSize: 13, + color: '#b7b7b7', + }, + brecrumbIcon: { + fontSize: 13, + color: '#222', + marginLeft: 6, + marginRight: 6 + }, + boxContactUs: { + paddingHorizontal: 10, + marginBottom: 20, + }, + boxContactUsText: { + marginBottom: 20, + }, + formItem: { + marginBottom: 20, + }, + formItemText: { + marginBottom: 5, + }, + formItemTextNote: { + color: '#ff0000' + }, + formItemInput: { + width: '100%', + height: 40, + borderRadius: 5, + borderWidth: 1, + borderColor: '#e1e1e1', + paddingHorizontal: 10, + }, + formItemArea: { + width: '100%', + height: 110, + borderRadius: 5, + borderWidth: 1, + borderColor: '#e1e1e1', + padding: 10, + }, + formSubmit: { + width: '100%', + height: 40, + borderRadius: 5, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#243a76' + }, + formSubmitText: { + fontWeight: 'bold', + color: '#fff' + }, +}) \ No newline at end of file diff --git a/screens/ForgetPassword.tsx b/screens/ForgetPassword.tsx new file mode 100644 index 0000000..fee6a5d --- /dev/null +++ b/screens/ForgetPassword.tsx @@ -0,0 +1,136 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain'; + +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; +import { ArticleItem } from '../components/article/ArticleItem'; + +export default function ForgetPassword() { + return ( + + + + Trang chủ + + Quên mật khẩu + + + + Bạn quên mật khẩu vào tài khoản? + Vui lòng nhập địa chỉ email đã đăng ký với chúng tôi để tạo mật khẩu mới. Chúng tôi sẽ gửi 1 email vào địa chỉ email cung cấp và yêu cầu xác minh trước khi có thể tạo mật khẩu mới + + + Nhập địa chỉ email đăng ký + + + + Mã bảo mật + + + + Lấy lại mật khẩu + + + + + + + + + + + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + brecrumb: { + display: 'flex', + width: winWidth, + paddingLeft: 10, + paddingRight: 10, + flexDirection: 'row', + height: 18, + alignItems: 'center', + marginTop: 10, + marginBottom: 10, + }, + brecrumbText: { + fontSize: 13, + color: '#222', + }, + brecrumbTextLast: { + fontSize: 13, + color: '#b7b7b7', + }, + brecrumbIcon: { + fontSize: 13, + color: '#222', + marginLeft: 6, + marginRight: 6 + }, + boxForgetPassword: { + paddingHorizontal: 10, + width: winWidth, + marginBottom: 20, + }, + boxForgetPasswordTitle: { + fontSize: 18, + fontWeight: 'bold', + marginBottom: 10, + }, + boxForgetPasswordNote: { + marginBottom: 20, + }, + boxForgetPasswordItem: { + marginBottom: 20, + }, + boxForgetPasswordText: { + marginBottom: 8, + }, + boxForgetPasswordInput: { + width: '100%', + height: 40, + borderRadius: 5, + borderWidth: 1, + borderColor: '#e1e1e1', + paddingHorizontal: 10, + }, + boxForgetPasswordSubmit: { + width: '100%', + height: 40, + borderRadius: 5, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#243a76' + }, + boxForgetPasswordSubmitText: { + fontWeight: 'bold', + color: '#fff' + }, +}) \ No newline at end of file diff --git a/screens/Login.tsx b/screens/Login.tsx new file mode 100644 index 0000000..c08a74a --- /dev/null +++ b/screens/Login.tsx @@ -0,0 +1,237 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain'; + +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; +import { ArticleItem } from '../components/article/ArticleItem'; + +export default function Login() { + return ( + + + + Trang chủ + + Đăng nhập + + + + + + + + + + + + + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const LoginBox = () => { + return ( + + Thông tin khách hàng đăng nhập hệ thống + + + Email Đăng nhập + + + + Mật khẩu + + + + Đăng nhập + + + + + + Đăng nhập bằng google + + + + + + Đăng nhập bằng Facebook + + + + + + Đăng nhập bằng Zalo + + + + ) +} + +const NoteLogin = () => { + return ( + + Trợ giúp + + 1. Nếu bạn chưa là thành viên, vui lòng Đăng ký tài khoản + 2. Nếu bạn quên mật khẩu, vui lòng yêu cầu quên mật khẩu + 3. Nếu bạn không đăng ký thành viên được, vui lòng gửi email tới chúng tôi + 4. Hoặc gọi điện tới chúng tôi để được tư vấn. + + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + brecrumb: { + display: 'flex', + width: winWidth, + paddingLeft: 10, + paddingRight: 10, + flexDirection: 'row', + height: 18, + alignItems: 'center', + marginTop: 10, + marginBottom: 10, + }, + brecrumbText: { + fontSize: 13, + color: '#222', + }, + brecrumbTextLast: { + fontSize: 13, + color: '#b7b7b7', + }, + brecrumbIcon: { + fontSize: 13, + color: '#222', + marginLeft: 6, + marginRight: 6 + }, + login: { + width: winWidth, + marginBottom: 20, + paddingHorizontal: 10, + }, + loginTitle: { + fontSize: 13, + fontWeight: 'bold', + marginBottom: 10, + }, + loginContent: {}, + loginItem: { + marginBottom: 20, + }, + loginText: { + marginBottom: 5, + }, + loginInput: { + width: '100%', + height: 40, + borderRadius: 3, + borderWidth: 1, + borderColor: '#e1e1e1', + }, + loginSubmit: { + width: '100%', + height: 40, + borderRadius: 3, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'rgb(253, 216, 53)', + marginBottom: 10, + }, + loginSubmitText: {}, + loginGoogle: { + width: '100%', + height: 40, + borderRadius: 3, + flexDirection: 'row', + alignItems: 'center', + backgroundColor: '#df4a32', + marginBottom: 10, + }, + loginSocialIcon: { + width: 40, + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + borderRightWidth: 1, + borderRightColor: '#fff', + backgroundColor: 'rgba(0,0,0,0)' + }, + loginSocialIconCt: { + fontSize: 25, + color: '#fff' + }, + loginSocialText: { + textAlign: 'center', + width: winWidthP10 - 41, + color: '#fff' + }, + loginFace: { + width: '100%', + height: 40, + borderRadius: 3, + flexDirection: 'row', + alignItems: 'center', + backgroundColor: '#3b5998', + marginBottom: 10, + }, + loginZalo: { + width: '100%', + height: 40, + borderRadius: 3, + flexDirection: 'row', + alignItems: 'center', + backgroundColor: '#3b5998', + marginBottom: 10, + }, + loginZaloImg: { + width: 25, + height: 25, + }, + noteLogin: { + paddingHorizontal: 10, + paddingTop: 20, + borderTopColor: '#e1e1e1', + borderTopWidth: 1, + marginBottom: 20, + }, + noteLoginTitle: { + fontWeight: 'bold', + marginBottom: 10, + }, + noteLoginText: { + marginBottom: 5, + }, + noteLoginTextLink: { + color: '#3b5998' + }, +}) \ No newline at end of file diff --git a/screens/Register.tsx b/screens/Register.tsx new file mode 100644 index 0000000..3009b00 --- /dev/null +++ b/screens/Register.tsx @@ -0,0 +1,283 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain'; + +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; +import { ArticleItem } from '../components/article/ArticleItem'; + +export default function Register() { + const [selectedDay, setSelectedDay] = useState(); + const [selectedMonth, setSelectedMonth] = useState(); + const [selectedYear, setSelectedYear] = useState(); + const [selectedProvince, setSelectedProvince] = useState(); + const [checked, setChecked] = React.useState('male'); + return ( + + + + Trang chủ + + Đăng ký + + + + Đăng ký + + + Địa chỉ Email* + + + + Tên* + + + + Số máy bàn + + + + Số di động* + + + + Giới tính + + + Nam + + setChecked('male')} /> + + + + Nữ + + setChecked('female')} /> + + + + + + Ngày sinh + + + + setSelectedDay(itemValue) + } + > + + + + + + + + + + setSelectedMonth(itemValue) + } + > + + + + + + + + + + setSelectedYear(itemValue) + } + > + + + + + + + + + + + Mật khẩu* + + + + Nhập lại mật khẩu* + + + + Tỉnh/TP + + setSelectedProvince(itemValue) + } + > + + + + + + + + Đăng ký + + + + + + + + + + + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + brecrumb: { + display: 'flex', + width: winWidth, + paddingLeft: 10, + paddingRight: 10, + flexDirection: 'row', + height: 18, + alignItems: 'center', + marginTop: 10, + marginBottom: 10, + }, + brecrumbText: { + fontSize: 13, + color: '#222', + }, + brecrumbTextLast: { + fontSize: 13, + color: '#b7b7b7', + }, + brecrumbIcon: { + fontSize: 13, + color: '#222', + marginLeft: 6, + marginRight: 6 + }, + boxRegister: { + width: winWidth, + paddingHorizontal: 10, + marginBottom: 20, + }, + boxRegisterTitle: { + fontSize: 18, + fontWeight: 'bold', + marginBottom: 20, + }, + registerItem: { + marginBottom: 10, + }, + registerItemText: { + fontWeight: 'bold', + marginBottom: 5, + }, + registerItemWn: { + color: '#ff0000', + fontWeight: 'normal' + }, + registerItemInput: { + width: '100%', + height: 40, + borderRadius: 5, + borderWidth: 1, + borderColor: '#e1e1e1', + paddingHorizontal: 10, + }, + registerItemSex: { + flexDirection: 'row', + alignItems: 'center', + }, + registerItemSexItem: { + flexDirection: 'row', + alignItems: 'center', + marginRight: 20, + }, + registerItemSexText: { + marginRight: 5, + }, + registerItemSexRadio: { + width: 36, + height: 36, + borderColor: '#333', + borderWidth: 1, + borderRadius: 18, + }, + boxRegisterSubmit: { + width: '100%', + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'red', + borderRadius: 5, + }, + boxRegisterSubmitText: { + color: '#fff', + fontWeight: 'bold' + }, + registerBirthDay: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between' + }, + registerBirthDayItem: { + width: '32%' + }, + picker: { + height: 46, + width: '100%', + }, + onePickerItem: { + height: 46, + color: '#222', + fontSize: 14, + textAlign: 'center', + width: '100%', + }, +}) \ No newline at end of file