diff --git a/assets/images/bg-combo.png b/assets/images/bg-combo.png new file mode 100644 index 0000000..7dc2b29 Binary files /dev/null and b/assets/images/bg-combo.png differ diff --git a/assets/images/bg-hot.png b/assets/images/bg-hot.png new file mode 100644 index 0000000..15f60f7 Binary files /dev/null and b/assets/images/bg-hot.png differ diff --git a/assets/images/box-return.png b/assets/images/box-return.png new file mode 100644 index 0000000..f0aa359 Binary files /dev/null and b/assets/images/box-return.png differ diff --git a/assets/images/check-config.png b/assets/images/check-config.png new file mode 100644 index 0000000..7204a53 Binary files /dev/null and b/assets/images/check-config.png differ diff --git a/assets/images/check.png b/assets/images/check.png new file mode 100644 index 0000000..1ef5f92 Binary files /dev/null and b/assets/images/check.png differ diff --git a/assets/images/check@2x.png b/assets/images/check@2x.png new file mode 100644 index 0000000..af07eb6 Binary files /dev/null and b/assets/images/check@2x.png differ diff --git a/assets/images/dich-vu1.png b/assets/images/dich-vu1.png new file mode 100644 index 0000000..eea116e Binary files /dev/null and b/assets/images/dich-vu1.png differ diff --git a/assets/images/dich-vu2.png b/assets/images/dich-vu2.png new file mode 100644 index 0000000..9a773c5 Binary files /dev/null and b/assets/images/dich-vu2.png differ diff --git a/assets/images/dich-vu3.png b/assets/images/dich-vu3.png new file mode 100644 index 0000000..9be06ff Binary files /dev/null and b/assets/images/dich-vu3.png differ diff --git a/assets/images/dich-vu4.png b/assets/images/dich-vu4.png new file mode 100644 index 0000000..f9dc5e3 Binary files /dev/null and b/assets/images/dich-vu4.png differ diff --git a/assets/images/filter-check.png b/assets/images/filter-check.png new file mode 100644 index 0000000..ca21cbf Binary files /dev/null and b/assets/images/filter-check.png differ diff --git a/assets/images/flashsale.png b/assets/images/flashsale.png new file mode 100644 index 0000000..586e6b0 Binary files /dev/null and b/assets/images/flashsale.png differ diff --git a/assets/images/icon-cat1.png b/assets/images/icon-cat1.png new file mode 100644 index 0000000..1e4598e Binary files /dev/null and b/assets/images/icon-cat1.png differ diff --git a/assets/images/icon-cat2.png b/assets/images/icon-cat2.png new file mode 100644 index 0000000..ca155f3 Binary files /dev/null and b/assets/images/icon-cat2.png differ diff --git a/assets/images/icon-cat3.png b/assets/images/icon-cat3.png new file mode 100644 index 0000000..7d7eff3 Binary files /dev/null and b/assets/images/icon-cat3.png differ diff --git a/assets/images/icon-cat4.png b/assets/images/icon-cat4.png new file mode 100644 index 0000000..dc8167f Binary files /dev/null and b/assets/images/icon-cat4.png differ diff --git a/assets/images/icon-cat5.png b/assets/images/icon-cat5.png new file mode 100644 index 0000000..f3f1dd1 Binary files /dev/null and b/assets/images/icon-cat5.png differ diff --git a/assets/images/icon-cat6.png b/assets/images/icon-cat6.png new file mode 100644 index 0000000..3a8449e Binary files /dev/null and b/assets/images/icon-cat6.png differ diff --git a/assets/images/icon-cat7.png b/assets/images/icon-cat7.png new file mode 100644 index 0000000..98cb03a Binary files /dev/null and b/assets/images/icon-cat7.png differ diff --git a/assets/images/icon-cat8.png b/assets/images/icon-cat8.png new file mode 100644 index 0000000..fd84e36 Binary files /dev/null and b/assets/images/icon-cat8.png differ diff --git a/assets/images/icon-combo.png b/assets/images/icon-combo.png new file mode 100644 index 0000000..fbcd3a1 Binary files /dev/null and b/assets/images/icon-combo.png differ diff --git a/assets/images/icon-menu1.png b/assets/images/icon-menu1.png new file mode 100644 index 0000000..a069428 Binary files /dev/null and b/assets/images/icon-menu1.png differ diff --git a/assets/images/icon-menu1active.png b/assets/images/icon-menu1active.png new file mode 100644 index 0000000..d8199ea Binary files /dev/null and b/assets/images/icon-menu1active.png differ diff --git a/assets/images/icon-menu2.png b/assets/images/icon-menu2.png new file mode 100644 index 0000000..d016265 Binary files /dev/null and b/assets/images/icon-menu2.png differ diff --git a/assets/images/icon-menu2active.png b/assets/images/icon-menu2active.png new file mode 100644 index 0000000..9211e10 Binary files /dev/null and b/assets/images/icon-menu2active.png differ diff --git a/assets/images/icon-menu3.png b/assets/images/icon-menu3.png new file mode 100644 index 0000000..797ce2c Binary files /dev/null and b/assets/images/icon-menu3.png differ diff --git a/assets/images/icon-menu3active.png b/assets/images/icon-menu3active.png new file mode 100644 index 0000000..18f30ce Binary files /dev/null and b/assets/images/icon-menu3active.png differ diff --git a/assets/images/icon-menu4.png b/assets/images/icon-menu4.png new file mode 100644 index 0000000..44c40b0 Binary files /dev/null and b/assets/images/icon-menu4.png differ diff --git a/assets/images/icon-menu4active.png b/assets/images/icon-menu4active.png new file mode 100644 index 0000000..d552bcb Binary files /dev/null and b/assets/images/icon-menu4active.png differ diff --git a/assets/images/icon-menu5.png b/assets/images/icon-menu5.png new file mode 100644 index 0000000..5e95eab Binary files /dev/null and b/assets/images/icon-menu5.png differ diff --git a/assets/images/icon-menu5active.png b/assets/images/icon-menu5active.png new file mode 100644 index 0000000..a70ff4a Binary files /dev/null and b/assets/images/icon-menu5active.png differ diff --git a/assets/images/icon-menu6.png b/assets/images/icon-menu6.png new file mode 100644 index 0000000..3f100c8 Binary files /dev/null and b/assets/images/icon-menu6.png differ diff --git a/assets/images/icon-menu7.png b/assets/images/icon-menu7.png new file mode 100644 index 0000000..6cd27ef Binary files /dev/null and b/assets/images/icon-menu7.png differ diff --git a/assets/images/icon-menuc.png b/assets/images/icon-menuc.png new file mode 100644 index 0000000..1325bcb Binary files /dev/null and b/assets/images/icon-menuc.png differ diff --git a/assets/images/icon-pro1.png b/assets/images/icon-pro1.png new file mode 100644 index 0000000..72c69b3 Binary files /dev/null and b/assets/images/icon-pro1.png differ diff --git a/assets/images/icon-pro2.png b/assets/images/icon-pro2.png new file mode 100644 index 0000000..3ef1b93 Binary files /dev/null and b/assets/images/icon-pro2.png differ diff --git a/assets/images/icon-pro3.png b/assets/images/icon-pro3.png new file mode 100644 index 0000000..27b3dda Binary files /dev/null and b/assets/images/icon-pro3.png differ diff --git a/assets/images/icon-pro4.png b/assets/images/icon-pro4.png new file mode 100644 index 0000000..5e8c059 Binary files /dev/null and b/assets/images/icon-pro4.png differ diff --git a/assets/images/icon-pro5.png b/assets/images/icon-pro5.png new file mode 100644 index 0000000..52131b5 Binary files /dev/null and b/assets/images/icon-pro5.png differ diff --git a/assets/images/icon-pro6.png b/assets/images/icon-pro6.png new file mode 100644 index 0000000..fd84e36 Binary files /dev/null and b/assets/images/icon-pro6.png differ diff --git a/assets/images/icon_new.png b/assets/images/icon_new.png new file mode 100644 index 0000000..73dad4c Binary files /dev/null and b/assets/images/icon_new.png differ diff --git a/assets/images/icon_tragop.png b/assets/images/icon_tragop.png new file mode 100644 index 0000000..b8af086 Binary files /dev/null and b/assets/images/icon_tragop.png differ diff --git a/assets/images/list-item.png b/assets/images/list-item.png new file mode 100644 index 0000000..5b954f3 Binary files /dev/null and b/assets/images/list-item.png differ diff --git a/assets/images/logo-cmt.png b/assets/images/logo-cmt.png new file mode 100644 index 0000000..6c9cf95 Binary files /dev/null and b/assets/images/logo-cmt.png differ diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 0000000..354fc51 Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/pro.png b/assets/images/pro.png new file mode 100644 index 0000000..bd95af7 Binary files /dev/null and b/assets/images/pro.png differ diff --git a/assets/images/product-km.png b/assets/images/product-km.png new file mode 100644 index 0000000..2980981 Binary files /dev/null and b/assets/images/product-km.png differ diff --git a/assets/images/product.png b/assets/images/product.png new file mode 100644 index 0000000..525f033 Binary files /dev/null and b/assets/images/product.png differ diff --git a/assets/images/slider.jpg b/assets/images/slider.jpg new file mode 100644 index 0000000..a9b254a Binary files /dev/null and b/assets/images/slider.jpg differ diff --git a/assets/images/star4.png b/assets/images/star4.png new file mode 100644 index 0000000..8af8c65 Binary files /dev/null and b/assets/images/star4.png differ diff --git a/assets/images/star5.png b/assets/images/star5.png new file mode 100644 index 0000000..0f86ff9 Binary files /dev/null and b/assets/images/star5.png differ diff --git a/components/header/HeaderAllPage.tsx b/components/header/HeaderAllPage.tsx new file mode 100644 index 0000000..82f0b8b --- /dev/null +++ b/components/header/HeaderAllPage.tsx @@ -0,0 +1,291 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../EditScreenInfo'; +import { Text, View } from '../Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import { useNavigation } from '@react-navigation/native'; +import Swiper from 'react-native-swiper'; +import { Picker } from '@react-native-picker/picker'; +import { RadioButton, Checkbox } from 'react-native-paper'; + + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const HeaderHome = () => { + return ( + + + + + + + + + + + + ) +} + +const HeaderCategory = () => { + const [openSearch, setopenSearch] = useState(true); + return ( + + + + + + setopenSearch(!openSearch)}> + + + + + + + + + + Điện gia dụng + + + + + + + + + 0 + + + + + ) +} + +const HeaderProductDetail = () => { + const navigation = useNavigation(); + return ( + + navigation.goBack()} style={styles.boxHeaderProductDetailGoBack}> + + + + navigation.navigate('Home')} style={styles.boxHeaderProductDetailHome}> + + + + + 0 + + + + ) +} + + +export { HeaderHome, HeaderCategory, HeaderProductDetail }; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#f2f2f2' + }, + headerBox: { + width: winWidth, + padding: 10, + backgroundColor: '#fff', + flexDirection: 'column', + alignItems: 'center', + }, + headerBoxLogo: { + marginBottom: 10, + }, + headerBoxSearch: { + width: '100%', + borderColor: '#D8262F', + borderRadius: 5, + borderWidth: 1, + flexDirection: 'row', + alignItems: 'center', + }, + headerBoxSearchButton: { + width: 36, + }, + headerBoxSearchBg: { + width: 36, + height: 36, + borderTopRightRadius: 5, + borderBottomRightRadius: 5, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + headerBoxSearchIcon: { + fontSize: 24, + color: '#fff', + }, + headerBoxSearchInput: { + width: winWidth - 56, + paddingHorizontal: 10, + height: 36, + }, + headerCategory: { + width: winWidth, + padding: 10, + position: 'relative', + flexDirection: 'row', + alignItems: 'center' + }, + headerCategoryBack: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center' + }, + headerCategoryBackIcon: { + fontSize: 26, + }, + headerCategorySearch: { + width: 40, + position: 'relative', + zIndex: 1, + }, + headerCategorySearchOpen: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center' + }, + headerCategorySearchOpenIcon: { + fontSize: 26, + }, + headerCategorySearchMain: { + width: 230, + borderWidth: 1, + borderRadius: 3, + overflow: 'hidden', + position: 'absolute', + top: 0, + left: 0, + display: 'none', + backgroundColor: '#fff', + }, + headerCategorySearchMainActive: { + display: 'flex', + }, + headerCategorySearchInput: { + width: '100%', + height: 40, + paddingLeft: 10, + paddingRight: 40, + }, + headerCategorySearchSubmit: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + position: 'absolute', + right: 0, + top: 0, + justifyContent: 'center', + }, + headerCategorySearchSubmitIcon: { + fontSize: 26, + }, + headerCategoryTitle: { + width: winWidth - 180, + textAlign: 'center', + fontSize: 17, + fontWeight: 'bold', + }, + headerCategoryList: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center' + }, + headerCategoryListButton: {}, + headerCategoryListButtonImage: { + width: 19, + height: 16, + }, + headerCategoryCart: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + position: 'relative', + }, + headerCategoryCartButton: {}, + headerCategoryCartIcon: { + fontSize: 26, + }, + headerCategoryCartCount: { + width: 15, + height: 15, + backgroundColor: '#D8262F', + borderRadius: 7.5, + position: 'absolute', + top: 0, + right: 0, + color: '#fff', + textAlign: 'center', + lineHeight: 15, + overflow: 'hidden' + }, + boxHeaderProductDetail: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between' + }, + boxHeaderProductDetailGoBack: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + boxHeaderProductDetailIcon: { + fontSize: 26, + }, + boxHeaderProductDetailRight: { + flexDirection: 'row', + }, + boxHeaderProductDetailHome: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + boxHeaderProductDetailCart: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + position: 'relative', + }, + boxHeaderProductDetailCartCount: { + width: 14, + height: 14, + borderRadius: 7, + overflow: 'hidden', + backgroundColor: '#D8262F', + textAlign: 'center', + lineHeight: 14, + fontSize: 10, + color: '#fff', + position: 'absolute', + top: 5, + right: 0, + }, +}) \ No newline at end of file diff --git a/components/product/ProductItem.tsx b/components/product/ProductItem.tsx new file mode 100644 index 0000000..0b89554 --- /dev/null +++ b/components/product/ProductItem.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../EditScreenInfo'; +import { Text, View } from '../Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import { useNavigation } from '@react-navigation/native'; +import Swiper from 'react-native-swiper'; +import { Picker } from '@react-native-picker/picker'; +import { RadioButton, Checkbox } from 'react-native-paper'; + + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const ProductItemSt = () => { + return ( + + ) +} + + +export { }; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#f2f2f2' + }, +}) \ No newline at end of file diff --git a/navigation/BottomTabNavigator.tsx b/navigation/BottomTabNavigator.tsx index 57cfc8d..9d0a3de 100644 --- a/navigation/BottomTabNavigator.tsx +++ b/navigation/BottomTabNavigator.tsx @@ -2,72 +2,186 @@ import { Ionicons } from '@expo/vector-icons'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createStackNavigator } from '@react-navigation/stack'; import * as React from 'react'; +import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types'; +import { Text, View } from '../components/Themed'; import Colors from '../constants/Colors'; import useColorScheme from '../hooks/useColorScheme'; -import TabOneScreen from '../screens/TabOneScreen'; -import TabTwoScreen from '../screens/TabTwoScreen'; -import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types'; +import HomePage from '../screens/HomePage'; +import ProductList from '../screens/ProductList'; +import MenuCategory from '../screens/MenuCategory'; +import ProductDetail from '../screens/ProductDetail'; +import { HeaderHome, HeaderCategory, HeaderProductDetail } from '../components/header/HeaderAllPage' -const BottomTab = createBottomTabNavigator(); +const BottomTab = createBottomTabNavigator(); export default function BottomTabNavigator() { - const colorScheme = useColorScheme(); - - return ( - - , - }} - /> - , - }} - /> - - ); + const colorScheme = useColorScheme(); + return ( + + , + }} + /> + , + }} + /> + , + }} + /> + , + }} + /> + , + }} + /> + + ); } // You can explore the built-in icon families and icons on the web at: // https://icons.expo.fyi/ function TabBarIcon(props: { name: React.ComponentProps['name']; color: string }) { - return ; + return ; } // Each tab has its own navigation stack, you can read more about this pattern here: // https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab -const TabOneStack = createStackNavigator(); +const HomepageStack = createStackNavigator(); -function TabOneNavigator() { - return ( - - - - ); +function HomePageNavigator({ navigation }: { navigation: any }) { + return ( + + ( + + ), + headerStyle: { + backgroundColor: '#fff', + height: 100, + } + }} + /> + + ); } -const TabTwoStack = createStackNavigator(); +const MenuStack = createStackNavigator(); -function TabTwoNavigator() { - return ( - - - - ); +function MenuNavigation() { + return ( + + + + ); +} + +const ProductListStack = createStackNavigator(); + +function ProductListNavigator() { + return ( + + ( + + ), + headerStyle: { + backgroundColor: '#fff', + height: 100, + } + }} + /> + + ); +} + +const ProductDetailStack = createStackNavigator(); + +function ProductDetailNavigation() { + return ( + + ( + + ), + headerStyle: { + backgroundColor: '#fff', + height: 80, + } + }} + /> + + ); +} + +const AllStack = createStackNavigator(); +function AllStackNavigation() { + return ( + + + + + + + ); } diff --git a/package-lock.json b/package-lock.json index 3d17a0e..0bed90c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,8 +5,9 @@ "packages": { "": { "dependencies": { - "@expo/vector-icons": "^12.0.0", + "@expo/vector-icons": "^12.0.4", "@react-native-community/masked-view": "0.1.10", + "@react-native-picker/picker": "^1.14.0", "@react-navigation/bottom-tabs": "5.11.2", "@react-navigation/native": "~5.8.10", "@react-navigation/stack": "~5.12.8", @@ -14,6 +15,7 @@ "expo-asset": "~8.2.1", "expo-constants": "~9.3.0", "expo-font": "~8.4.0", + "expo-linear-gradient": "~8.4.0", "expo-linking": "~2.0.0", "expo-splash-screen": "~0.8.0", "expo-status-bar": "~1.0.3", @@ -22,8 +24,10 @@ "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", "react-native-gesture-handler": "~1.8.0", + "react-native-paper": "^4.7.2", "react-native-safe-area-context": "3.1.9", "react-native-screens": "~2.15.0", + "react-native-swiper": "^1.6.0", "react-native-web": "~0.13.12" }, "devDependencies": { @@ -1430,6 +1434,26 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@callstack/react-theme-provider": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz", + "integrity": "sha512-Iec+ybWN0FvNj87sD3oWo/49edGUP0UOSdMnzCJEFJIDYr992ECIuOV89burAAh2/ibPCxgLiK6dmgv2mO/8Tg==", + "dependencies": { + "deepmerge": "^3.2.0", + "hoist-non-react-statics": "^3.3.0" + }, + "peerDependencies": { + "react": "^16.3.0" + } + }, + "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz", + "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -3778,6 +3802,15 @@ "react-native": ">=0.57" } }, + "node_modules/@react-native-picker/picker": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-1.14.0.tgz", + "integrity": "sha512-KN/nOSxO64LxYms/8RpdjdIqemqDlxM8glDi4upg40/3JqalmXoHHBQxA0XYdAoL+padSVHAoAS6Ie5zAn8gTw==", + "peerDependencies": { + "react": "16 || 17", + "react-native": ">=0.57" + } + }, "node_modules/@react-navigation/bottom-tabs": { "version": "5.11.2", "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.2.tgz", @@ -13554,6 +13587,21 @@ "react-native": ">=0.42.0" } }, + "node_modules/react-native-paper": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.7.2.tgz", + "integrity": "sha512-MOcDWjBOaknEpQgdm4fIOsRFIt4PJlMCgWlLk4kIe8Wv99/M0JIoxWABkAf4Lj5BuJgXjXdwr0DA/lhGY1BRoQ==", + "dependencies": { + "@callstack/react-theme-provider": "^3.0.5", + "color": "^3.1.2", + "react-native-iphone-x-helper": "^1.3.1" + }, + "peerDependencies": { + "react": "*", + "react-native": "*", + "react-native-vector-icons": "*" + } + }, "node_modules/react-native-safe-area-context": { "version": "3.1.9", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.1.9.tgz", @@ -13572,6 +13620,154 @@ "react-native": "*" } }, + "node_modules/react-native-swiper": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/react-native-swiper/-/react-native-swiper-1.6.0.tgz", + "integrity": "sha512-OnkTTZi+9uZUgy0uz1I9oYDhCU3z36lZn+LFsk9FXPRelxb/KeABzvPs3r3SrHWy1aA67KGtSFj0xNK2QD0NJQ==", + "dependencies": { + "prop-types": "^15.5.10" + } + }, + "node_modules/react-native-vector-icons": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz", + "integrity": "sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg==", + "peer": true, + "dependencies": { + "lodash.frompairs": "^4.0.1", + "lodash.isequal": "^4.5.0", + "lodash.isstring": "^4.0.1", + "lodash.omit": "^4.5.0", + "lodash.pick": "^4.4.0", + "lodash.template": "^4.5.0", + "prop-types": "^15.7.2", + "yargs": "^16.1.1" + }, + "bin": { + "fa5-upgrade": "bin/fa5-upgrade.sh", + "generate-icon": "bin/generate-icon.js" + } + }, + "node_modules/react-native-vector-icons/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/react-native-vector-icons/node_modules/cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "peer": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "node_modules/react-native-vector-icons/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/react-native-vector-icons/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "peer": true + }, + "node_modules/react-native-vector-icons/node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/react-native-vector-icons/node_modules/string-width": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz", + "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==", + "peer": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/react-native-vector-icons/node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "peer": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/react-native-vector-icons/node_modules/y18n": { + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.6.tgz", + "integrity": "sha512-PlVX4Y0lDTN6E2V4ES2tEdyvXkeKzxa8c/vo0pxPr/TqbztddTP0yn7zZylIyiAuxerqj0Q5GhpJ1YJCP8LaZQ==", + "peer": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "peer": true, + "dependencies": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs-parser": { + "version": "20.2.7", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz", + "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==", + "peer": true, + "engines": { + "node": ">=10" + } + }, "node_modules/react-native-web": { "version": "0.13.18", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz", @@ -17762,6 +17958,22 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "@callstack/react-theme-provider": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz", + "integrity": "sha512-Iec+ybWN0FvNj87sD3oWo/49edGUP0UOSdMnzCJEFJIDYr992ECIuOV89burAAh2/ibPCxgLiK6dmgv2mO/8Tg==", + "requires": { + "deepmerge": "^3.2.0", + "hoist-non-react-statics": "^3.3.0" + }, + "dependencies": { + "deepmerge": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz", + "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==" + } + } + }, "@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -19620,6 +19832,12 @@ "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==", "requires": {} }, + "@react-native-picker/picker": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-1.14.0.tgz", + "integrity": "sha512-KN/nOSxO64LxYms/8RpdjdIqemqDlxM8glDi4upg40/3JqalmXoHHBQxA0XYdAoL+padSVHAoAS6Ie5zAn8gTw==", + "requires": {} + }, "@react-navigation/bottom-tabs": { "version": "5.11.2", "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.2.tgz", @@ -27364,6 +27582,16 @@ "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==", "requires": {} }, + "react-native-paper": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.7.2.tgz", + "integrity": "sha512-MOcDWjBOaknEpQgdm4fIOsRFIt4PJlMCgWlLk4kIe8Wv99/M0JIoxWABkAf4Lj5BuJgXjXdwr0DA/lhGY1BRoQ==", + "requires": { + "@callstack/react-theme-provider": "^3.0.5", + "color": "^3.1.2", + "react-native-iphone-x-helper": "^1.3.1" + } + }, "react-native-safe-area-context": { "version": "3.1.9", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.1.9.tgz", @@ -27376,6 +27604,122 @@ "integrity": "sha512-CagNf2APXkVoRlF3Mugr264FbKbrBg9eXUkqhIPVeZB8EsdS8XPrnt99yj/pzmT+yJMBY0dGrjXT8+68WYh6YQ==", "requires": {} }, + "react-native-swiper": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/react-native-swiper/-/react-native-swiper-1.6.0.tgz", + "integrity": "sha512-OnkTTZi+9uZUgy0uz1I9oYDhCU3z36lZn+LFsk9FXPRelxb/KeABzvPs3r3SrHWy1aA67KGtSFj0xNK2QD0NJQ==", + "requires": { + "prop-types": "^15.5.10" + } + }, + "react-native-vector-icons": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz", + "integrity": "sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg==", + "peer": true, + "requires": { + "lodash.frompairs": "^4.0.1", + "lodash.isequal": "^4.5.0", + "lodash.isstring": "^4.0.1", + "lodash.omit": "^4.5.0", + "lodash.pick": "^4.4.0", + "lodash.template": "^4.5.0", + "prop-types": "^15.7.2", + "yargs": "^16.1.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "peer": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "peer": true, + "requires": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "peer": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "peer": true + }, + "is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "peer": true + }, + "string-width": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz", + "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==", + "peer": true, + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.0" + } + }, + "wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "peer": true, + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + } + }, + "y18n": { + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.6.tgz", + "integrity": "sha512-PlVX4Y0lDTN6E2V4ES2tEdyvXkeKzxa8c/vo0pxPr/TqbztddTP0yn7zZylIyiAuxerqj0Q5GhpJ1YJCP8LaZQ==", + "peer": true + }, + "yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "peer": true, + "requires": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + } + }, + "yargs-parser": { + "version": "20.2.7", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz", + "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==", + "peer": true + } + } + }, "react-native-web": { "version": "0.13.18", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz", diff --git a/package.json b/package.json index e16dc0f..357a36b 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,9 @@ "preset": "jest-expo" }, "dependencies": { - "@expo/vector-icons": "^12.0.0", + "@expo/vector-icons": "^12.0.4", "@react-native-community/masked-view": "0.1.10", + "@react-native-picker/picker": "^1.14.0", "@react-navigation/bottom-tabs": "5.11.2", "@react-navigation/native": "~5.8.10", "@react-navigation/stack": "~5.12.8", @@ -21,6 +22,7 @@ "expo-asset": "~8.2.1", "expo-constants": "~9.3.0", "expo-font": "~8.4.0", + "expo-linear-gradient": "~8.4.0", "expo-linking": "~2.0.0", "expo-splash-screen": "~0.8.0", "expo-status-bar": "~1.0.3", @@ -29,8 +31,10 @@ "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", "react-native-gesture-handler": "~1.8.0", + "react-native-paper": "^4.7.2", "react-native-safe-area-context": "3.1.9", "react-native-screens": "~2.15.0", + "react-native-swiper": "^1.6.0", "react-native-web": "~0.13.12" }, "devDependencies": { diff --git a/screens/HomePage.tsx b/screens/HomePage.tsx new file mode 100644 index 0000000..df21cdf --- /dev/null +++ b/screens/HomePage.tsx @@ -0,0 +1,1312 @@ +import * as React from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View } from '../components/Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import Swiper from 'react-native-swiper'; +import { Asset } from 'expo-asset'; + +export default function HomePage() { + return ( + + + + + + + + + + + + + + + + + + + ); +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const SliderHome = () => { + + const imageSlider = [ + { + img: require('../assets/images/slider.jpg'), + }, + { + img: require('../assets/images/slider.jpg'), + }, + { + img: require('../assets/images/slider.jpg'), + }, + ] + + return ( + + + { + imageSlider.map((item, index) => { + return (); + }) + } + + + ); +} + +const CategoryHomePage = () => { + return ( + + + + + + + Siêu phẩm hè + + + + + + Diện gia dụng + + + + + + Đồ gia dụng + + + + + + Thiết bị nhà bếp + + + + + + Điều hòa + + + + + + Khẩu trang vải + + + + + + Deal Hot + + + + + + Combo + + + + ) +} + +const FlastSale = () => { + return ( + + + + + Xem tất cả + + + + + + + + NỒI CHIÊN KHÔNG DẦU SMARTPLUS NAGAKAWA NAG3303 (9L) + + + Giá sốc online + 4.100.000đ + + + 4.500.000đ + -30% + + + + + + + Đã bán 6 + + + + + Đã bán + 6 + / 30 sản phẩm + + + + + Kết thúc trong + + + + 04 + + Giờ + + : + + + 08 + + Phút + + : + + + 56 + + Giây + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) - Van xả kép - Hàng chính hãng + 1.292.000đ + + 1.634.000đ + -30% + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) - Van xả kép - Hàng chính hãng + 1.292.000đ + + 1.634.000đ + -30% + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) - Van xả kép - Hàng chính hãng + 1.292.000đ + + 1.634.000đ + -30% + + + + + + + ) +} + +const ProductHot = () => { + return ( + + + Khuyến mại hot mỗi ngày + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + Xem tất cả + + + + + ) +} + +const ProductBestSale = () => { + return ( + + + + Sản phẩm bán chạy + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + Xem tất cả + + + + + + ) +} + +const ComboHome = () => { + return ( + + + Combo dành cho bạn + + + + + + Combo 1 + + + + Combo 2 + + + + Combo 3 + + + + Combo 4 + + + + Combo 5 + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + + + + + + = + + 1.057.000đ + + Giá Combo: + 985.000đ + + Tiết kiệm 199.000đ + + + Mua combo + + + + ) +} + +const ProductHome = () => { + return ( + + + + + + Thiết bị nhà bếp + + + + Đồ gia dụng + + + + Điện gia dụng + + + + Điều hòa + + + + Khẩu trang vải + + + + Deal hot + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + Xem tất cả + + + + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#f2f2f2', + }, + slider: { + width: winWidth, + height: winWidth - 20, + paddingHorizontal: 10, + position: 'relative', + marginTop: 15, + }, + sliderSwipper: {}, + imgSlider: { + width: winWidth - 20, + height: winWidth - 20, + }, + boxCatHome: { + width: winWidth, + paddingHorizontal: 10, + paddingVertical: 15, + }, + boxCatHomeList: { + paddingBottom: 8, + }, + boxCatHomeItem: { + width: 58, + marginRight: 20, + flexDirection: 'column', + alignItems: 'center', + }, + boxCatHomeItemLast: { + marginRight: 0, + }, + boxCatHomeItemImg: { + width: 40, + height: 40, + borderRadius: 8, + marginBottom: 10, + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.27, + shadowRadius: 4.65, + elevation: 6, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center' + }, + boxCatHomeImg: { + width: 28, + height: 28, + }, + boxCatHomeText: { + textAlign: 'center', + fontSize: 11, + color: '#6A6A6A' + }, + boxFlastSaleHome: { + width: winWidth, + marginBottom: 10, + paddingBottom: 10, + }, + boxFlastSaleHomeTitle: { + width: '100%', + flexDirection: 'row', + justifyContent: 'space-between', + padding: 10, + backgroundColor: '#D8262F', + alignItems: 'center' + }, + boxFlastSaleHomeTitleImg: { + width: 187, + height: 59, + }, + boxFlastSaleHomeTitleVm: { + width: 104, + height: 32, + flexDirection: 'row', + justifyContent: 'space-between', + paddingHorizontal: 10, + alignItems: 'center', + backgroundColor: '#fff', + borderRadius: 5, + }, + boxFlastSaleHomeTitleVmText: { + fontStyle: 'italic', + color: '#D8262F', + fontSize: 14, + }, + boxFlastSaleHomeTitleVmIcon: { + fontStyle: 'italic', + color: '#D8262F', + fontSize: 14, + }, + boxFlastSaleHomeFirstItem: { + padding: 10, + }, + boxFlastSaleHomeImg: { + width: '100%', + height: winWidth - 20, + position: 'relative', + marginBottom: 15, + }, + boxFlastSaleHomeImgCt: { + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + boxFlastSaleHomeFirstName: { + fontSize: 18, + fontWeight: 'bold', + textTransform: 'uppercase', + color: '#000', + marginBottom: 10, + }, + boxFlastSaleHomeFirstAllPrice: { + width: '100%', + flexDirection: 'row', + marginBottom: 10, + }, + boxFlastSaleHomeFirstPrice: { + width: '50%', + paddingRight: 5, + }, + boxFlastSaleHomeFirstPriceName: { + fontSize: 14, + fontWeight: 'bold', + marginBottom: 8, + }, + boxFlastSaleHomeFirstPriceText: { + fontSize: 22, + fontWeight: 'bold', + color: '#D8262F' + }, + boxFlastSaleHomeFirstPriceOld: { + width: '50%', + paddingLeft: 5, + }, + boxFlastSaleHomeFirstOldPrice: { + fontSize: 16, + fontWeight: 'bold', + textDecorationLine: 'line-through', + marginBottom: 2, + }, + boxFlastSaleHomeFirstDiscount: { + paddingVertical: 5, + backgroundColor: '#D8262F', + width: 60, + textAlign: 'center', + color: '#fff', + borderRadius: 5, + overflow: 'hidden' + }, + boxFlastSaleHomeFirstSaleQuan: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 10, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + marginBottom: 10, + }, + boxFlastSaleHomeFirstSaleQuanLeft: { + width: '50%', + paddingRight: 5, + }, + boxFlastSaleHomeFirstSaleQuanLeftCt: { + width: '100%', + height: 15, + borderRadius: 7.5, + backgroundColor: '#FFE2E2', + position: 'relative', + }, + boxFlastSaleHomeFirstSaleQuanLeftDown: { + position: 'absolute', + width: '20%', + top: 0, + left: 0, + backgroundColor: '#D8262F', + zIndex: 2, + height: 15, + borderRadius: 7.5, + }, + boxFlastSaleHomeFirstSaleQuanLeftText: { + marginLeft: 10, + fontSize: 10, + color: '#fff', + lineHeight: 15, + position: 'relative', + zIndex: 5, + }, + boxFlastSaleHomeFirstSaleQuanRight: { + width: '50%', + paddingLeft: 5, + }, + boxFlastSaleHomeFirstSaleQuanRightCt: { + flexDirection: 'row', + alignItems: 'center' + }, + boxFlastSaleHomeFirstSaleQuanRightText: { + fontSize: 13, + }, + boxFlastSaleHomeFirstSaleQuanRightTextRed: { + fontSize: 13, + color: '#D8262F', + marginHorizontal: 5, + }, + boxFlastSaleHomeFirstTime: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + }, + boxFlastSaleHomeFirstTimeTitle: { + fontSize: 14, + width: 100, + }, + boxFlastSaleHomeFirstTimeList: { + width: winWidth - 120, + flexDirection: 'row', + alignItems: 'center', + }, + boxFlastSaleHomeFirstTimeItem: { + width: 48, + backgroundColor: '#3B3B3B', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 10, + }, + boxFlastSaleHomeFirstItemCt: { + height: 34, + backgroundColor: 'rgba(0,0,0,0)', + width: '100%', + borderBottomColor: 'rgba(255,255,255,0.3)', + borderBottomWidth: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + boxFlastSaleHomeFirstTimeNum: { + fontSize: 22, + fontWeight: 'bold', + color: '#fff', + }, + boxFlastSaleHomeFirstTimeText: { + height: 30, + lineHeight: 30, + textTransform: 'uppercase', + color: '#fff', + }, + boxFlastSaleHomeFirstTimeTextChia: { + marginHorizontal: 10, + fontSize: 24, + }, + boxFlastSaleHomeList: { + paddingHorizontal: 10, + marginTop: 10, + }, + boxFlastSaleHomeListItem: { + width: winWidth - 20, + marginRight: 20, + borderWidth: 1, + borderColor: '#e1e1e1', + borderRadius: 10, + padding: 10, + flexDirection: 'row', + }, + boxFlastSaleHomeListItemLast: { + marginRight: 0, + }, + boxFlastSaleHomeListItemImg: { + width: 113, + height: 113, + marginRight: 20, + position: 'relative' + }, + boxFlastSaleHomeListItemInfo: { + width: winWidth - 175, + }, + boxFlastSaleHomeListItemName: { + fontSize: 14, + marginBottom: 10, + }, + boxFlastSaleHomeListItemPrice: { + fontSize: 18, + fontWeight: 'bold', + color: '#D8262F', + marginBottom: 5, + }, + boxFlastSaleHomeListItemOldPriceAll: { + flexDirection: 'row', + alignItems: 'center' + }, + boxFlastSaleHomeListItemOldPrice: { + fontSize: 14, + color: '#A1A1A1', + textDecorationLine: 'line-through', + }, + boxFlastSaleHomeListItemDiscount: { + paddingVertical: 5, + backgroundColor: '#D8262F', + width: 60, + textAlign: 'center', + color: '#fff', + borderRadius: 5, + overflow: 'hidden', + marginLeft: 10, + }, + boxProductHot: { + width: winWidth, + marginBottom: 10, + backgroundColor: '#D8262F', + position: 'relative', + }, + bgProductHot: { + width: winWidth, + height: 200, + position: 'absolute', + zIndex: 1, + top: 0, + left: 0, + }, + boxProductHotTitle: { + paddingHorizontal: 10, + textAlign: 'center', + marginVertical: 15, + fontSize: 20, + textTransform: 'uppercase', + color: '#fff', + fontWeight: 'bold', + position: 'relative', + zIndex: 2, + }, + boxProductHotList: { + width: winWidth, + paddingHorizontal: 10, + backgroundColor: 'rgba(0,0,0,0)', + position: 'relative', + zIndex: 2, + marginBottom: 20, + }, + boxProductHotItem: { + width: 180, + marginRight: 10, + borderRadius: 10, + overflow: 'hidden', + }, + boxProductHotItemLast: { + marginRight: 0, + }, + pContainer: { + width: '100%', + padding: 10, + }, + pImgContent: { + width: '100%', + position: 'relative', + paddingTop: '100%', + marginBottom: 10, + }, + pNew: { + width: 24, + height: 18, + position: 'absolute', + zIndex: 6, + top: 0, + left: 0, + }, + pImg: { + width: '100%', + position: 'absolute', + zIndex: 5, + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + pTraGop: { + width: 68, + height: 16, + position: 'absolute', + zIndex: 6, + bottom: 0, + left: '50%', + transform: [{ translateX: -34 }], + }, + pInfo: { + width: '100%', + }, + pName: { + width: '100%', + fontSize: 14, + marginBottom: 10, + }, + pPrice: { + width: '100%', + fontSize: 18, + marginBottom: 10, + color: '#D8262F', + fontWeight: 'bold', + }, + pAllSale: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + pOldPrice: { + color: '#A1A1A1', + fontSize: 14, + textDecorationLine: 'line-through', + }, + pDiscount: { + paddingVertical: 5, + backgroundColor: '#D8262F', + width: 50, + textAlign: 'center', + color: '#fff', + borderRadius: 5, + overflow: 'hidden', + marginLeft: 5, + }, + pOffer: { + flexDirection: 'row', + alignItems: 'center', + }, + pOfferText: { + fontSize: 10, + color: '#A1A1A1', + }, + pOfferPrice: { + fontSize: 10, + color: '#D8262F', + }, + vmWhite: { + width: '100%', + marginBottom: 20, + flexDirection: 'row', + justifyContent: 'center', + backgroundColor: 'rgba(0,0,0,0)' + }, + vmWhiteButton: { + width: 104, + height: 32, + borderRadius: 5, + borderColor: '#fff', + borderWidth: 1, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + vmWhiteText: { + fontSize: 14, + fontStyle: 'italic', + color: '#fff', + marginRight: 10, + }, + vmWhiteIcon: { + fontSize: 14, + fontStyle: 'italic', + color: '#fff', + }, + productBestSale: { + marginBottom: 20, + paddingHorizontal: 10, + backgroundColor: '#f2f2f2', + position: 'relative', + width: winWidth, + }, + productBestSaleTitle: { + width: winWidth - 20, + height: 40, + position: 'relative', + zIndex: 5, + backgroundColor: 'rgba(0,0,0,0)' + }, + productBestSaleTitleImg: { + width: '100%', + height: '100%', + }, + productBestSaleTitleText: { + width: 200, + lineHeight: 40, + fontSize: 22, + fontWeight: 'bold', + color: '#fff', + textTransform: 'uppercase', + position: 'absolute', + zIndex: 2, + top: 0, + left: '50%', + transform: [{ translateX: -100 }], + textAlign: 'center', + fontStyle: 'italic', + }, + productBestSaleList: { + borderWidth: 1, + borderColor: '#D8262F', + borderRadius: 10, + overflow: 'hidden', + marginTop: -20, + paddingTop: 30, + }, + boxProductBestSaleItemStTwo: { + width: '100%', + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + }, + pContainerStTwo: { + flexDirection: 'row', + padding: 10, + }, + pImgContentTwo: { + width: 111, + height: 111, + marginRight: 20, + position: 'relative', + }, + pInfoStTwo: { + width: winWidth - 175, + }, + vmRed: { + width: '100%', + marginBottom: 20, + flexDirection: 'row', + justifyContent: 'center', + backgroundColor: 'rgba(0,0,0,0)', + marginTop: 20, + }, + vmRedButton: { + width: 104, + height: 32, + borderRadius: 5, + borderColor: '#D8262F', + borderWidth: 1, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#fff', + }, + vmRedText: { + fontSize: 14, + fontStyle: 'italic', + color: '#D8262F', + marginRight: 10, + }, + vmRedIcon: { + fontSize: 14, + fontStyle: 'italic', + color: '#D8262F', + }, + boxComboHome: { + width: winWidth, + marginBottom: 20, + }, + boxComboHomeTitle: { + padding: 10, + }, + boxComboHomeTitleText: { + fontSize: 22, + fontWeight: 'bold', + textTransform: 'uppercase', + color: '#D8262F', + fontStyle: 'italic', + }, + boxComboHomeListCombo: { + padding: 10, + width: winWidth, + backgroundColor: '#f2f2f2', + }, + boxComboHomeListComboItem: { + width: 80, + height: 56, + marginRight: 10, + borderRadius: 10, + overflow: 'hidden', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#fff', + }, + boxComboHomeListComboItemActive: { + backgroundColor: '#D8262F', + }, + boxComboHomeListComboItemLast: { + marginRight: 0, + }, + boxComboHomeListComboItemImg: { + width: 28, + height: 28, + }, + boxComboHomeListComboItemText: { + fontWeight: '500', + }, + boxComboHomeListComboItemTextActive: { + color: '#fff', + }, + boxComboHomeListComboContent: { + width: winWidth, + paddingHorizontal: 10, + marginBottom: 10, + }, + boxComboHomeTotalPrice: { + width: winWidth, + padding: 10, + borderTopWidth: 1, + borderTopColor: '#e1e1e1', + flexDirection: 'row', + alignItems: 'center', + }, + boxComboHomeTotalPriceSum: { + width: 40, + fontSize: 40, + color: '#999' + }, + boxComboHomeTotalPriceCotent: { + width: winWidth - 180, + }, + boxComboHomeTotalPriceOldPrice: { + fontSize: 14, + color: '#A1A1A1', + textDecorationLine: 'line-through', + marginBottom: 5, + }, + boxComboHomeTotalPriceAll: { + flexDirection: 'row', + marginBottom: 5, + alignItems: 'flex-end', + }, + boxComboHomeTotalPriceAllText: { + marginRight: 8, + }, + boxComboHomeTotalPriceAllNum: { + fontSize: 16, + fontWeight: 'bold', + color: '#D8262F', + }, + boxComboHomeTotalPriceDiscount: { + color: '#D8262F', + }, + boxComboHomeTotalPriceButton: { + width: 120, + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#D8262F', + borderRadius: 10, + }, + boxComboHomeTotalPriceButtonText: { + fontSize: 16, + fontWeight: 'bold', + color: '#fff', + }, + boxProductHome: { + marginBottom: 20, + backgroundColor: '#f2f2f2' + }, + boxProductHomeListCat: { + width: winWidth, + padding: 10, + }, + boxProductHomeListCatItem: { + width: 58, + marginRight: 20, + flexDirection: 'column', + alignItems: 'center', + }, + boxProductHomeListCatItemLast: { + marginRight: 0, + }, + boxProductHomeListCatImg: { + marginBottom: 5, + }, + boxProductHomeListCatText: { + textAlign: 'center', + }, + boxProductHomeListCatTextActive: { + color: '#D8262F' + }, + boxProductHomeList: { + width: winWidth, + paddingHorizontal: 10, + paddingTop: 10, + backgroundColor: '#f2f2f2', + flexDirection: 'row', + flexWrap: 'wrap', + alignItems: 'center', + }, + boxProductHomeItem: { + width: winWidth/2 - 15, + marginRight: 10, + marginBottom: 10, + borderRadius: 10, + overflow: 'hidden' + }, + boxProductHomeItemChan: { + marginRight: 0, + } +}); diff --git a/screens/MenuCategory.tsx b/screens/MenuCategory.tsx new file mode 100644 index 0000000..70930d4 --- /dev/null +++ b/screens/MenuCategory.tsx @@ -0,0 +1,345 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View } from '../components/Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import { useNavigation } from '@react-navigation/native'; + +export default function MenuCategory() { + return ( + + + + ); +} + +const dataCategory = [ + { + id: 1, + name: 'Điện gia dụng', + image: require('../assets/images/icon-menu1.png'), + imageActive: require('../assets/images/icon-menu1active.png'), + }, + { + id: 2, + name: 'Đồ gia dụng', + image: require('../assets/images/icon-menu2.png'), + imageActive: require('../assets/images/icon-menu2active.png'), + children: [], + }, + { + id: 3, + name: 'Thiết bị nhà bếp', + image: require('../assets/images/icon-menu3.png'), + imageActive: require('../assets/images/icon-menu3active.png'), + children: [], + }, + { + id: 4, + name: 'Điều hòa', + image: require('../assets/images/icon-menu4.png'), + imageActive: require('../assets/images/icon-menu4active.png'), + children: [], + }, + { + id: 5, + name: 'Khâu trang vải', + image: require('../assets/images/icon-menu5.png'), + imageActive: require('../assets/images/icon-menu5active.png'), + children: [], + }, +] + +const dataChildren = [ + { + id: 6, + name: 'Ấm siêu tốc', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 7, + name: 'Bàn là', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 8, + name: 'Bếp hồng ngoại', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 9, + name: 'Bếp từ', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 10, + name: 'Bình thủy điện', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 11, + name: 'Cây nước nóng lạnh', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 12, + name: 'Lẩu điện', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 13, + name: 'Lò nướng', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 14, + name: 'Máy làm mát', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 15, + name: 'Máy lọc nước', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 16, + name: 'Máy sấy tóc', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 17, + name: 'Máy xay sinh tố', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 18, + name: 'Nồi áp xuất điện đa năng', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 19, + name: 'Nồi cơm điện', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 20, + name: 'Quạt đứng', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 22, + name: 'Máy xay thịt', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 23, + name: 'Nồi cơm điện tách đường', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 24, + name: 'Bếp nướng điện lẩu nướng', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 25, + name: 'Nồi chiên không dầu', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 26, + name: 'Lõi lọc Nagakawa', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, + { + id: 27, + name: 'Máy lọc không khí', + image: require('../assets/images/icon-menuc.png'), + imageActive: require('../assets/images/icon-menuc.png'), + }, +] + +const OtherMenuFix = [ + { + id: 'dh', + name: 'Deal hot', + image: require('../assets/images/icon-cat7.png'), + imageActive: require('../assets/images/icon-cat7.png'), + }, + { + id: 'cb', + name: 'Combo', + image: require('../assets/images/icon-cat8.png'), + imageActive: require('../assets/images/icon-cat8.png'), + }, +] + +const ListMenuCat = () => { + const [activeMenu, setActiveMenu] = useState(1); + const [activeMenuOther, setActiveMenuother] = useState(''); + const navigation = useNavigation(); + return ( + + + + { + dataCategory.map((item, index) => { + return ( + + setActiveMenu(item.id)}> + { + activeMenu == item.id ? + + : + } + { + activeMenu == item.id ? + {item.name} + : {item.name} + } + + + + ) + }) + } + { + OtherMenuFix.map((item, index) => { + return ( + + setActiveMenuother(item.id)}> + { + activeMenuOther == item.id ? + + : + } + { + activeMenuOther == item.id ? + {item.name} + : {item.name} + } + + + + ) + }) + } + + + + + + { + dataChildren.map((item, index) => { + return ( + + navigation.navigate('ProductCategory')}> + + {item.name} + + + ) + }) + } + + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + boxMenu: { + width: winWidth, + flexDirection: 'row', + flex: 1, + }, + boxMenuLeft: { + width: 110, + height: winHeight - 100, + }, + boxMenuLeftItem: { + width: 110, + height: 110, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#f2f2f2', + padding: 10, + }, + boxMenuLeftItemActive: { + backgroundColor: '#fff', + }, + boxMenuLeftItemButton: { + width: '100%', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, + boxMenuLeftItemImage: { + marginBottom: 10, + }, + boxMenuLeftItemText: { + textAlign: 'center', + }, + boxMenuLeftItemTextActive: { + color: '#D8262F', + }, + boxMenuRight: { + width: winWidth - 110, + height: winHeight - 130, + }, + boxMenuRightCt: { + flexDirection: 'row', + flexWrap: 'wrap', + width: '100%', + justifyContent: 'center', + }, + boxMenuRightItem: { + width: '33.333%', + padding: 10, + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, + flexDirection: 'column', + alignItems: 'center' + }, + boxMenuRightItemImage: { + width: 52, + height: 52, + marginBottom: 10, + }, + boxMenuRightItemText: { + textAlign: 'center', + }, +}); diff --git a/screens/ProductDetail.tsx b/screens/ProductDetail.tsx new file mode 100644 index 0000000..dd2cc0d --- /dev/null +++ b/screens/ProductDetail.tsx @@ -0,0 +1,1742 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View } from '../components/Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import { useNavigation } from '@react-navigation/native'; +import Swiper from 'react-native-swiper'; +import { Picker } from '@react-native-picker/picker'; +import { RadioButton, Checkbox } from 'react-native-paper'; + +export default function ProductDetail() { + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +} + +const SliderImageProductDetail = () => { + const imageSlider = [ + { + img: require('../assets/images/product.png'), + }, + { + img: require('../assets/images/product.png'), + }, + { + img: require('../assets/images/product.png'), + }, + ] + return ( + + + { + imageSlider.map((item, index) => { + return (); + }) + } + + + ); +} + +const DetailContentTop = () => { + const [openKhuyenMai, setOpenKhuyenMai] = useState(false); + const [openDacTinh, setOpenDacTinh] = useState(false); + const [openDichVu, setOpenDichVu] = useState(false); + const [openConFig, setOpenConFig] = useState(false); + return ( + + + Điều hòa Super Fantastic Nagakawa NS–C(A)24SK15 - Hàng Chính Hãng + + + + 34 + + + + + + + + Giá sốc online + 4.100.000đ + + + 4.500.000đ + -30% + + + + + + + Đã bán 6 + + + + + Đã bán + 6 + / 30 sản phẩm + + + + + Kết thúc trong + + + + 04 + + Giờ + + : + + + 08 + + Phút + + : + + + 56 + + Giây + + + + + + Khuyến mãi + Quà tặng trị giá 3.800.000 + setOpenKhuyenMai(true)} style={styles.boxDetailContentTopButton}> + + + + + + + Đặc tính + Mã sản phẩm, Tình trạng + + setOpenDacTinh(true)} style={styles.boxDetailContentTopButton}> + + + + + + Dịch vụ + + + Mã sản phẩm, Tình trạng + + + setOpenDichVu(true)} style={styles.boxDetailContentTopButton}> + + + + + + Lựa chọn + Công xuất làm lạnh + setOpenConFig(true)} style={styles.boxDetailContentTopButton}> + + + + { setOpenKhuyenMai(!openKhuyenMai); }}> + + setOpenKhuyenMai(!openKhuyenMai)} style={styles.popDetailContentBg}> + + + Khuyến mại + setOpenKhuyenMai(!openKhuyenMai)}> + + + + + + Khuyến mãi trị giá 3.880.000đ. Áp dụng đến 30/3/2021 + + + + + Tặng Máy xay thịt Elmich hoặc Máy xay thịt đa năng Z-000207 + + + + + + Tặng Máy xay thịt Elmich hoặc Máy xay thịt đa năng Z-000207 + + + + + + { setOpenDacTinh(!openDacTinh); }}> + + setOpenDacTinh(!openDacTinh)} style={styles.popDetailContentBg}> + + + Đặc tính + setOpenDacTinh(!openDacTinh)}> + + + + + + + Mã sản phẩm + + + NS-A18BL + + + + Tình trạng + + + Còn hàng + + + + + + + { setOpenDichVu(!openDichVu); }}> + + setOpenDichVu(!openDichVu)} style={styles.popDetailContentBg}> + + + Dịch vụ + setOpenDichVu(!openDichVu)}> + + + + + + + + + + + Hàng chính hãng + Sản phẩm chính hãng 100% + + + + + + + + Bảo hành 24 tháng + Trả bảo hành tận nơi sử dụng + + + + + + + + Giao hàng toàn quốc + Giao hàng tận nơi trong vòng 24 giờ trong phạm vi bán kính 20Km + + + + + + + + Đổi trả hàng miễn phí + Đổi trả hàng miễn phí trong 7 ngày + + + + + + + { setOpenConFig(!openConFig); }}> + + setOpenConFig(!openConFig)} style={styles.popDetailContentBg}> + + + Lựa chọn + setOpenConFig(!openConFig)}> + + + + + + + Chọn công xuất làm lạnh + + + 1HP + 19.990.000đ + + + + + + + 1.6HP + 20.990.000đ + + + 2HP + 22.990.000đ + + + + + Số lượng + + + + + + + + - + + + + + + + + + ) +} + + +const BuyComboDetail = () => { + const [checked, setChecked] = React.useState(false); + return ( + + Sản phẩm thường được mua cùng + + + + + + + + + setChecked(!checked)} /> + + Ấm Siêu Tốc Nagakawa NAG0308 + + 1.292.000đ + + + + + + + + setChecked(!checked)} /> + + Ấm Siêu Tốc Nagakawa NAG0308 + + 1.292.000đ + + + + + + + + setChecked(!checked)} /> + + Ấm Siêu Tốc Nagakawa NAG0308 + + 1.292.000đ + + + + + + Tổng Tiền + 10.338.000đ + 10.738.000đ + + + Thêm tất cả vào giỏ hàng + + 1 sản phẩm được chọn + + + ) +} + +const ProductDetailSpec = () => { + const [showAllSpec, setShowAllSpec] = useState(true); + return ( + + Thông số kỹ thuật + + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + + + setShowAllSpec(!showAllSpec)} style={styles.boxProductDetailSpecVnButton}> + { + showAllSpec + ? Xem thêm + : Rút gọn + } + { + showAllSpec + ? + : + } + + + + ) +} + +const ProductDetailDes = () => { + const [showAllDes, setShowAllDes] = useState(true); + return ( + + Mô tả sản phẩm + + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + Nội dung đang được cập nhật + + + setShowAllDes(!showAllDes)} style={styles.boxProductDetailSpecVnButton}> + { + showAllDes + ? Xem thêm + : Rút gọn + } + { + showAllDes + ? + : + } + + + + ) +} + +const ProductReview = () => { + return ( + + + Đánh giá & Nhận xét + + Xem tất cả + + + + + + 4.5 + /5 + + + + + + + + Q + Quân + + + Đã mua hàng + + + + + Nhận hàng cực nhanh, đóng gói đẹp. + + + + + + + + + Trả lời + + | 22/2/2021 + + + + + + + + + Đức Hào + QTV + + + Cảm ơn bạn đã mua hàng của chúng tôi. + + + + + + + ) +} + +const ProductDetailComment = () => { + const [openPopCmt, setOpenPopCmt] = useState(false) + return ( + + + Hỏi và đáp (3) + + Xem tất cả + + + + + + + + Q + + + Quân + + + Sản phẩm này còn không shop? + + + Đức Hào: Chào bạn, nhân viên sẽ liên hệ lại tư vấn cho bạn ạ. + + + + + setOpenPopCmt(true)} style={styles.commentSubmitButton}> + Đặt câp hỏi + + + { setOpenPopCmt(!openPopCmt); }}> + + setOpenPopCmt(!openPopCmt)} style={styles.popDetailContentBg}> + + + Đặt câu hỏi + setOpenPopCmt(!openPopCmt)}> + + + + + + + + + + Gửi câu hỏi + + + + + + + ) +} + +const ProductCompare = () => { + return ( + + So sánh sản phẩm tương đương + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + + Công suất: 1.0HP - 9000 BTU + Chế độ vận hành khi ngủ + Loại máy lạnh: 2 chiều + + + + + Xem so sánh chi tiết + + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + + Công suất: 1.0HP - 9000 BTU + Chế độ vận hành khi ngủ + Loại máy lạnh: 2 chiều + + + + + Xem so sánh chi tiết + + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + + Công suất: 1.0HP - 9000 BTU + Chế độ vận hành khi ngủ + Loại máy lạnh: 2 chiều + + + + + Xem so sánh chi tiết + + + + + + + + + ) +} + +const ProductDetailFixBot = () => { + return ( + + + + + + Mua trả góp + Thủ tục đơn giản + + + Mua ngay + 4.100.000đ + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + sliderImgDetail: { + width: winWidth, + marginBottom: 20, + }, + sliderSwipperImgDetail: { + height: winWidth, + }, + itemSliderImgDetail: { + width: winWidth, + height: winWidth, + position: 'relative', + overflow: 'hidden', + }, + imgSliderImgDetail: { + position: 'absolute', + width: winWidth, + height: winWidth, + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + boxFlastSaleHomeFirstAllPrice: { + width: '100%', + flexDirection: 'row', + marginBottom: 10, + }, + boxFlastSaleHomeFirstPrice: { + width: '50%', + paddingRight: 5, + }, + boxFlastSaleHomeFirstPriceName: { + fontSize: 14, + fontWeight: 'bold', + marginBottom: 8, + }, + boxFlastSaleHomeFirstPriceText: { + fontSize: 22, + fontWeight: 'bold', + color: '#D8262F' + }, + boxFlastSaleHomeFirstPriceOld: { + width: '50%', + paddingLeft: 5, + }, + boxFlastSaleHomeFirstOldPrice: { + fontSize: 16, + fontWeight: 'bold', + textDecorationLine: 'line-through', + marginBottom: 2, + }, + boxFlastSaleHomeFirstDiscount: { + paddingVertical: 5, + backgroundColor: '#D8262F', + width: 60, + textAlign: 'center', + color: '#fff', + borderRadius: 5, + overflow: 'hidden' + }, + boxFlastSaleHomeFirstSaleQuan: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 10, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + marginBottom: 10, + }, + boxFlastSaleHomeFirstSaleQuanLeft: { + width: '50%', + paddingRight: 5, + }, + boxFlastSaleHomeFirstSaleQuanLeftCt: { + width: '100%', + height: 15, + borderRadius: 7.5, + backgroundColor: '#FFE2E2', + position: 'relative', + }, + boxFlastSaleHomeFirstSaleQuanLeftDown: { + position: 'absolute', + width: '20%', + top: 0, + left: 0, + backgroundColor: '#D8262F', + zIndex: 2, + height: 15, + borderRadius: 7.5, + }, + boxFlastSaleHomeFirstSaleQuanLeftText: { + marginLeft: 10, + fontSize: 10, + color: '#fff', + lineHeight: 15, + position: 'relative', + zIndex: 5, + }, + boxFlastSaleHomeFirstSaleQuanRight: { + width: '50%', + paddingLeft: 5, + }, + boxFlastSaleHomeFirstSaleQuanRightCt: { + flexDirection: 'row', + alignItems: 'center' + }, + boxFlastSaleHomeFirstSaleQuanRightText: { + fontSize: 13, + }, + boxFlastSaleHomeFirstSaleQuanRightTextRed: { + fontSize: 13, + color: '#D8262F', + marginHorizontal: 5, + }, + boxFlastSaleHomeFirstTime: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + }, + boxFlastSaleHomeFirstTimeTitle: { + fontSize: 14, + width: 100, + }, + boxFlastSaleHomeFirstTimeList: { + width: winWidth - 120, + flexDirection: 'row', + alignItems: 'center', + }, + boxFlastSaleHomeFirstTimeItem: { + width: 48, + backgroundColor: '#3B3B3B', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 10, + }, + boxFlastSaleHomeFirstItemCt: { + height: 34, + backgroundColor: 'rgba(0,0,0,0)', + width: '100%', + borderBottomColor: 'rgba(255,255,255,0.3)', + borderBottomWidth: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + boxFlastSaleHomeFirstTimeNum: { + fontSize: 22, + fontWeight: 'bold', + color: '#fff', + }, + boxFlastSaleHomeFirstTimeText: { + height: 30, + lineHeight: 30, + textTransform: 'uppercase', + color: '#fff', + }, + boxFlastSaleHomeFirstTimeTextChia: { + marginHorizontal: 10, + fontSize: 24, + }, + boxDetailContentTop: { + width: winWidth, + backgroundColor: '#f2f2f2' + }, + boxDetailContentTopSt: { + width: winWidth, + padding: 10, + marginBottom: 10, + }, + boxDetailContentName: { + fontSize: 18, + fontWeight: '500', + marginBottom: 10, + }, + boxDetailContentTopRate: { + flexDirection: 'row', + marginBottom: 10, + justifyContent: 'space-between', + alignItems: 'center', + }, + boxDetailContentTopShare: {}, + boxDetailContentTopShareIcon: { + fontSize: 18, + }, + boxDetailContentTopShowPop: { + width: winWidth, + padding: 10, + marginBottom: 10, + flexDirection: 'row', + alignItems: 'center', + }, + boxDetailContentTopTextBold: { + width: 100, + fontSize: 16, + fontWeight: 'bold', + }, + boxDetailContentTopText: { + width: winWidth - 160, + }, + boxDetailContentTopButton: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + }, + boxDetailContentTopButtonIcon: { + fontSize: 26, + }, + boxDetailContentTopShowPopNd: { + width: winWidth, + paddingHorizontal: 10, + }, + boxDetailContentTopShowPopNdCt: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingVertical: 10, + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, + }, + boxDetailContentTopShowPopNdCtLeft: { + width: winWidth - 60, + }, + boxDetailContentTopShowPopNdCtTb: { + fontSize: 16, + fontWeight: 'bold', + marginBottom: 5, + }, + boxDetailContentTopShowPopNdCtT: { + fontSize: 14, + color: '#888888' + }, + boxDetailContentTopShowPopNdCtImgCt: { + flexDirection: 'row', + alignItems: 'flex-end' + }, + boxDetailContentTopShowPopNdCtImg: { + marginRight: 10, + }, + popDetail: { + flex: 1, + backgroundColor: 'rgba(0,0,0,0)', + }, + popDetailContentBg: { + width: winWidth, + height: 180, + backgroundColor: 'rgba(0,0,0,0.5)', + }, + popDetailClose: { + width: 40, + height: 40, + fontSize: 20, + lineHeight: 40, + textAlign: 'center', + }, + headerPopDetail: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + headerPopDetailText: { + width: winWidth - 60, + textAlign: 'center', + fontSize: 16, + fontWeight: 'bold', + }, + red: { + color: '#D8262F', + }, + popDetailList: { + width: winWidth, + padding: 10, + height: winHeight - 220, + }, + itemKm: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + itemKmImg: { + width: 24, + height: 24, + marginRight: 10, + position: 'relative', + }, + itemKmImgCt: { + width: '100%', + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + itemKmText: { + width: winWidth - 45, + }, + itemKmTextLine: { + width: '100%', + marginBottom: 10, + }, + dacTinhItem: { + marginBottom: 10, + }, + dacTinhItemText: { + marginBottom: 5, + }, + dacTinhItemCt: { + flexDirection: 'row', + alignItems: 'center' + }, + dacTinhItemCtIcon: { + marginRight: 5, + color: '#888' + }, + dacTinhItemCtText: { + color: '#A1A1A1' + }, + green: { + color: '#008445' + }, + dichVuItem: { + marginBottom: 10, + flexDirection: 'row', + alignItems: 'center', + }, + dichVuItemImg: { + width: 50, + marginRight: 10, + }, + dichVuItemImgCt: { + maxWidth: '100%' + }, + dichVuItemText: { + width: winWidth - 80, + }, + dichVuItemTextSt: { + fontSize: 14, + marginBottom: 2, + }, + dichVuItemTextNd: { + fontSize: 14, + color: '#888' + }, + listConFig: { + marginBottom: 10, + paddingBottom: 20, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + }, + listConFigName: { + marginBottom: 10, + }, + listConFigList: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + flexWrap: 'wrap', + }, + conFigItem: { + width: (winWidth - 50) / 3, + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + padding: 10, + borderWidth: 1, + borderColor: '#C9C9C9', + borderRadius: 8, + position: 'relative', + }, + conFigItemActive: { + borderColor: '#D8262F', + }, + conFigName: { + fontWeight: '500', + }, + conFigItemActiveBg: { + width: 16, + height: 16, + position: 'absolute', + bottom: 0, + right: 0, + backgroundColor: 'rgba(0,0,0,0)' + }, + conFigItemActiveBgImg: { + width: '100%', + height: '100%', + }, + conFigItemActiveBgIcon: { + fontSize: 10, + color: '#fff', + position: 'absolute', + top: 5, + right: 0, + }, + conFigNamePrice: {}, + selecCount: { + flexDirection: 'row', + alignItems: 'center', + }, + selecCountText: { + width: '50%', + fontSize: 14, + }, + selecCountContent: { + width: '50%', + flexDirection: 'row', + justifyContent: 'flex-end', + alignItems: 'center', + }, + selecCountButton: { + width: 40, + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#DFDFDF', + }, + selecCountButtonText: { + fontSize: 24, + }, + selecCountInput: { + width: 60, + height: 40, + textAlign: 'center', + backgroundColor: '#f2f2f2', + fontSize: 22, + }, + comboDetail: { + width: winWidth, + padding: 10, + marginBottom: 10, + }, + comboDetailText: { + marginBottom: 20, + fontSize: 16, + fontWeight: 'bold' + }, + comboDetailList: { + width: '100%', + paddingBottom: 20, + marginBottom: 20, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + }, + comboDetailItem: { + width: 180, + marginRight: 20, + }, + comboDetailItemImg: { + width: 180, + height: 180, + position: 'relative', + marginBottom: 10, + }, + comboDetailItemImgCt: { + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + comboDetailItemInfo: { + width: '100%', + flexDirection: 'row', + marginBottom: 15, + }, + comboDetailItemCheck: { + width: 36, + height: 36, + marginRight: 10, + backgroundColor: '#f2f2f2', + borderRadius: 3, + }, + comboDetailItemName: { + width: 134, + }, + comboDetailItemPrice: { + width: '100%', + textAlign: 'center', + color: '#D8262F', + fontSize: 14, + fontWeight: 'bold', + }, + comboDetailBuy: {}, + comboDetailBuyPrice: { + flexDirection: 'row', + alignItems: 'flex-end', + justifyContent: 'center', + marginBottom: 10, + }, + comboDetailBuyPriceText: { + marginRight: 10, + }, + comboDetailBuyPriceTotal: { + color: '#D8262F', + fontWeight: 'bold', + marginRight: 10, + }, + comboDetailBuyPriceOldTotal: { + color: '#888', + textDecorationLine: 'line-through', + }, + comboDetailBuyButton: { + width: '100%', + height: 40, + borderRadius: 10, + backgroundColor: '#D8262F', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + marginBottom: 10, + }, + comboDetailBuyButtonText: { + fontSize: 16, + fontWeight: 'bold', + textTransform: 'uppercase', + color: '#fff' + }, + comboDetailBuyCount: { + width: '100%', + textAlign: 'center', + }, + boxProductDetailSpec: { + width: winWidth, + padding: 10, + marginBottom: 10, + }, + boxProductDetailSpecTitle: { + fontSize: 16, + fontWeight: 'bold', + marginBottom: 15, + }, + boxProductDetailSpecContent: { + width: '100%', + maxHeight: 100, + overflow: 'hidden', + }, + boxProductDetailSpecContentActive: { + maxHeight: 'auto', + }, + boxProductDetailSpecVn: { + width: '100%', + marginTop: 15, + flexDirection: 'row', + justifyContent: 'center', + }, + boxProductDetailSpecVnButton: { + width: 100, + flexDirection: 'row', + justifyContent: 'center', + height: 30, + alignItems: 'center', + }, + boxProductDetailSpecVmText: { + color: '#D8262F', + marginRight: 10, + }, + boxProductDetailSpecVmIcon: { + color: '#D8262F' + }, + boxProductReview: { + width: winWidth, + padding: 10, + marginBottom: 10, + }, + boxProductReviewHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: 10, + }, + boxProductReviewHeaderTitle: { + fontSize: 16, + fontWeight: 'bold', + }, + boxProductReviewHeaderTitleVm: { + flexDirection: 'row', + alignItems: 'center', + }, + boxProductReviewHeaderTitleVMText: { + fontSize: 12, + fontWeight: '500', + marginRight: 5, + color: '#D8262F', + }, + boxProductReviewHeaderTitleVmIcon: { + color: '#D8262F', + }, + boxProductReviewHeaderRate: { + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 20, + marginBottom: 20, + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, + }, + boxProductReviewHeaderRateCt: { + flexDirection: 'row', + marginRight: 20, + alignItems: 'flex-end' + }, + boxProductReviewHeaderRateTotal: { + fontWeight: '500', + fontSize: 18, + }, + boxProductReviewHeaderRateAll: { + color: '#777', + }, + boxProductReviewHeaderRateImg: {}, + reviewList: {}, + reviewItem: { + marginBottom: 20, + }, + reviewItemHeader: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + reviewItemHeaderNameSort: { + width: 24, + height: 24, + borderRadius: 3, + textAlign: 'center', + lineHeight: 24, + backgroundColor: '#DFDFDF', + fontSize: 16, + fontWeight: 'bold', + color: '#777777', + overflow: 'hidden', + marginRight: 8, + }, + reviewItemHeadername: { + fontSize: 14, + fontWeight: 'bold', + marginRight: 8, + }, + reviewItemHeaderBuy: { + flexDirection: 'row', + alignItems: 'center', + marginRight: 8, + }, + reviewItemHeaderBuyIcon: { + marginRight: 3, + color: '#19B000', + }, + reviewItemHeaderBuyText: { + color: '#19B000', + }, + reviewItemHeaderStar: {}, + reviewItemCt: { + width: '100%', + marginBottom: 10, + }, + reviewItemContent: { + marginBottom: 10, + }, + reviewItemContentImg: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + flexWrap: 'wrap', + }, + reviewItemImg: { + maxWidth: 64, + maxHeight: 64, + marginRight: 10, + }, + reviewItemOther: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + reviewItemOtherButton: { + flexDirection: 'row', + alignItems: 'center', + marginRight: 10, + }, + reviewItemOtherButtonIcon: { + fontSize: 12, + color: '#D8262F', + marginRight: 5, + }, + reviewItemOtherButtonText: { + fontSize: 12, + color: '#D8262F', + fontWeight: '700', + }, + reviewItemOtherTime: { + fontSize: 12, + color: '#888888', + }, + reviewItemReplyList: { + width: '100%', + padding: 10, + backgroundColor: '#F1F1F1', + borderRadius: 5, + position: 'relative', + }, + reviewItemReplyListBefore: { + fontSize: 24, + position: 'absolute', + left: 20, + top: -16, + zIndex: 1, + color: '#F1F1F1', + }, + reviewItemReplyItem: { + width: '100%', + marginBottom: 10, + backgroundColor: 'rgba(0,0,0,0)', + }, + reviewItemReplyItemHeader: { + flexDirection: 'row', + alignItems: 'center', + backgroundColor: 'rgba(0,0,0,0)', + marginBottom: 10, + }, + reviewItemReplyItemHeaderLogo: { + width: 24, + height: 24, + backgroundColor: '#D8262F', + borderRadius: 5, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + marginRight: 10, + }, + reviewItemReplyItemHeaderLogoImg: {}, + reviewItemReplyItemHeaderName: { + fontWeight: 'bold', + marginRight: 10, + }, + reviewItemReplyItemHeaderQtv: { + paddingHorizontal: 8, + paddingVertical: 3, + backgroundColor: '#D8262F', + color: '#fff', + borderRadius: 3, + overflow: 'hidden', + fontSize: 10, + }, + reviewItemReplyItemCt: { + backgroundColor: 'rgba(0,0,0,0)', + }, + reviewItemReplyItemContent: {}, + boxProductDetailComment: { + width: winWidth, + padding: 10, + marginBottom: 10, + }, + commentList: {}, + commentItem: { + marginBottom: 10, + }, + commentItemHeader: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + commentItemHeaderLogo: { + width: 32, + height: 28, + position: 'relative', + borderRadius: 3, + backgroundColor: '#D8262F', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + marginRight: 10, + }, + commentItemHeaderLogoText: { + fontSize: 18, + fontWeight: 'bold', + color: '#fff' + }, + commentItemHeaderIcon: { + fontSize: 24, + color: '#D8262F', + zIndex: 1, + position: 'absolute', + left: 0, + bottom: -12, + }, + commentItemHeadername: { + fontWeight: 'bold', + }, + commentItemCt: { + marginTop: 5, + marginBottom: 10, + }, + commentItemCtText: {}, + commentItemRep: { + marginBottom: 10, + }, + commentItemRepText: { + color: '#888' + }, + commentSubmit: { + paddingTop: 10, + borderTopColor: '#e1e1e1', + borderTopWidth: 1, + flexDirection: 'row', + justifyContent: 'center', + }, + commentSubmitButton: {}, + commentSubmitText: { + color: '#D8262F', + fontWeight: '500', + }, + popArea: { + width: '100%', + height: 110, + borderWidth: 1, + padding: 10, + borderColor: '#e1e1e1', + marginBottom: 10, + borderRadius: 5, + }, + popInput: { + width: '100%', + height: 40, + borderWidth: 1, + paddingHorizontal: 10, + borderColor: '#e1e1e1', + marginBottom: 10, + borderRadius: 5, + }, + popSubmit: { + width: '100%', + height: 40, + paddingHorizontal: 10, + marginBottom: 10, + borderRadius: 5, + backgroundColor: '#D8262F', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + popSubmitText: { + textTransform: 'uppercase', + color: '#fff' + }, + pContainer: { + width: '100%', + padding: 10, + }, + pImgContent: { + width: '100%', + position: 'relative', + paddingTop: '100%', + marginBottom: 10, + }, + pNew: { + width: 24, + height: 18, + position: 'absolute', + zIndex: 6, + top: 0, + left: 0, + }, + pImg: { + width: '100%', + position: 'absolute', + zIndex: 5, + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + pTraGop: { + width: 68, + height: 16, + position: 'absolute', + zIndex: 6, + bottom: 0, + left: '50%', + transform: [{ translateX: -34 }], + }, + pInfo: { + width: '100%', + }, + pName: { + width: '100%', + fontSize: 14, + marginBottom: 10, + }, + pPrice: { + width: '100%', + fontSize: 18, + marginBottom: 10, + color: '#D8262F', + fontWeight: 'bold', + }, + pAllSale: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + pOldPrice: { + color: '#A1A1A1', + fontSize: 14, + textDecorationLine: 'line-through', + }, + pDiscount: { + paddingVertical: 5, + backgroundColor: '#D8262F', + width: 50, + textAlign: 'center', + color: '#fff', + borderRadius: 5, + overflow: 'hidden', + marginLeft: 5, + }, + pOffer: { + flexDirection: 'row', + alignItems: 'center', + }, + pOfferText: { + fontSize: 10, + color: '#A1A1A1', + }, + pOfferPrice: { + fontSize: 10, + color: '#D8262F', + }, + boxProductCompare: { + width: winWidth, + padding: 10, + marginBottom: 10, + }, + boxProductCompareTitle: { + fontSize: 16, + marginBottom: 15, + fontWeight: 'bold', + }, + boxProductCompareList: {}, + boxProductCompareItem: { + width: 180, + marginRight: 10, + }, + boxProductCompareSummary: { + marginBottom: 10, + }, + boxProductCompareSummaryText: { + fontSize: 11, + color: '#888888' + }, + boxProductCompareButton: {}, + boxProductCompareButtonText: { + fontSize: 11, + color: '#19B000', + }, + boxFixDetail: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + boxFixDetailWishList: { + width: 40, + height: 40, + backgroundColor: '#DFDFDF', + borderRadius: 8, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + boxFixDetailWishListIcon: { + fontSize: 24, + }, + boxFixDetailBuyGop: { + width: (winWidth - 80) / 2, + height: 40, + backgroundColor: '#008445', + borderRadius: 8, + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, + boxFixDetailBuyTextSt: { + textTransform: 'uppercase', + color: '#fff', + fontWeight: 'bold', + }, + boxFixDetailBuyTextNd: { + fontSize: 10, + color: '#fff' + }, + boxFixDetailBuyNow: { + width: (winWidth - 80) / 2, + height: 40, + backgroundColor: '#D8262F', + borderRadius: 8, + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, +}); diff --git a/screens/ProductList.tsx b/screens/ProductList.tsx new file mode 100644 index 0000000..2bdc050 --- /dev/null +++ b/screens/ProductList.tsx @@ -0,0 +1,772 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View } from '../components/Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import { useNavigation } from '@react-navigation/native'; + +export default function ProductList() { + return ( + + + + + + + + + + + ); +} + +const SortAndFilter = () => { + const [openSort, setopenSort] = useState(true); + const [openFilter, setOpenFilter] = useState(false); + return ( + + + setopenSort(!openSort)}> + Sắp xếp: + Mới nhất + + + + + Mới nhất + + + + Giá giảm dần + + + Giá tăng dần + + + + + setOpenFilter(true)}> + + Lọc + + { setOpenFilter(!openFilter); }}> + + setOpenFilter(!openFilter)} style={styles.filterItemContentBg}> + + + + setOpenFilter(!openFilter)}> + + + Bộ lọc + + + + + + + + + + + + + + + + ) +} + +const PriceFilterList = () => { + const dataPriceFilter = [ + { + url: '/', + name: 'Dưới 200.000', + is_current: 1, + }, + { + url: '/', + name: 'Từ 200.000 đến 500.000', + is_current: 0, + }, + { + url: '/', + name: 'Từ 500.000 đến 1.000.000', + is_current: 0, + }, + { + url: '/', + name: 'Từ 1.000.000 đến 5.000.000', + is_current: 0, + }, + { + url: '/', + name: 'Từ 5.000.000 đến 15.000.000', + is_current: 0, + }, + { + url: '/', + name: 'Trên 15.000.000', + is_current: 0, + }, + ] + return ( + + Khoảng giá + + { + dataPriceFilter.map((item, index) => + + ) + } + + + Hoặc nhập giá ở ô dưới đây + + + + + + + ) +} + +const OtherFilterList = () => { + const [openAllFilter, setOpenAllFilter] = useState(true); + const dataPriceFilter = [ + { + url: '/', + name: '1 - 2 lít', + is_current: 1, + }, + { + url: '/', + name: '2 - 3 lít', + is_current: 0, + }, + { + url: '/', + name: '3 - 4 lít', + is_current: 0, + }, + { + url: '/', + name: '4 - 9 lít', + is_current: 0, + }, + { + url: '/', + name: '9 - 12 lít', + is_current: 0, + }, + { + url: '/', + name: '12 - 15 lít', + is_current: 0, + }, + ] + return ( + + Dung tích + + { + dataPriceFilter.map((item, index) => + + ) + } + + + setOpenAllFilter(!openAllFilter)} style={styles.filterItemBoxVmButton}> + Xem thêm + + + + ) +} + +const OtherFilterListT = () => { + const [openAllFilter, setOpenAllFilter] = useState(true); + const dataPriceFilter = [ + { + url: '/', + name: '30W - 100W', + is_current: 1, + }, + { + url: '/', + name: '100W - 300W', + is_current: 0, + }, + { + url: '/', + name: '300W - 500W', + is_current: 0, + }, + { + url: '/', + name: '500W - 1000W', + is_current: 0, + }, + { + url: '/', + name: '1000W - 2000W', + is_current: 0, + }, + { + url: '/', + name: '2000W - 5000W', + is_current: 0, + }, + ] + return ( + + Công xuất + + { + dataPriceFilter.map((item, index) => + + ) + } + + + setOpenAllFilter(!openAllFilter)} style={styles.filterItemBoxVmButton}> + Xem thêm + + + + ) +} + +const FilterItem = (props: { name: string, isCurrent: number }) => { + const { name, isCurrent } = props; + return ( + 0 ? [styles.filterItem, styles.filterItemActive] : styles.filterItem} onPress={() => Alert.alert('danh muc sp')}> + {name} + { + isCurrent > 0 ? + + + + + : + } + + ); +} + +const ListCatCategory = () => { + const dataCat = [ + { + id: 1, + url: '/', + name: 'Ấm siêu tốc' + }, + { + id: 2, + url: '/', + name: 'Bàn là' + }, + { + id: 3, + url: '/', + name: 'Bếp từ' + }, + { + id: 4, + url: '/', + name: 'Bếp hồng ngoại' + }, + { + id: 5, + url: '/', + name: 'Bình thủy điện' + }, + ] + let dataCatLength = dataCat.length; + return ( + + + { + dataCat.map((item, index) => + + {item.name} + + ) + } + + + ) +} + +const ProductCategory = () => { + const navigation = useNavigation(); + return ( + + + + + + + + + + navigation.navigate('ProductDetail')}> + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + sortAndFilter: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + position: 'relative', + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, + zIndex: 5, + }, + boxSort: { + zIndex: 1, + }, + boxSortButton: { + flexDirection: 'row', + alignItems: 'center', + height: 30, + }, + boxSortButtonTextBold: { + fontSize: 14, + fontWeight: 'bold' + }, + boxSortButtonActive: {}, + boxSortButtonIcon: { + marginLeft: 5, + }, + boxSortList: { + width: winWidth, + paddingHorizontal: 10, + position: 'absolute', + left: -10, + top: 40, + display: 'none', + }, + boxSortListActive: { + display: 'flex', + }, + boxSortItem: { + paddingVertical: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + boxSortItemActive: { + borderBottomColor: '#D8262F', + borderBottomWidth: 1, + }, + boxSortItemText: { + fontSize: 14, + }, + boxSortItemTextActive: { + color: '#D8262F' + }, + boxSortItemTextIcon: { + color: '#D8262F' + }, + boxFilter: { + width: 70, + height: 30, + alignItems: 'center', + flexDirection: 'row', + justifyContent: 'flex-end', + borderLeftWidth: 1, + borderLeftColor: '#e1e1e1' + }, + boxFilterButton: { + flexDirection: 'row', + alignItems: 'center' + }, + boxFilterIcon: { + fontSize: 18, + marginRight: 10, + }, + boxFilterText: { + fontSize: 14, + }, + filterItemContent: { + flex: 1, + justifyContent: 'flex-end', + alignItems: 'flex-end', + backgroundColor: 'rgba(0,0,0,0.5)', + position: 'relative', + zIndex: 1, + flexDirection: 'row', + }, + filterItemContentBg: { + width: winWidth - 300, + height: winHeight, + }, + headerPopFilter: { + width: '100%', + paddingTop: 30, + paddingHorizontal: 10, + flexDirection: 'row', + alignItems: 'center', + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + position: 'relative', + }, + filterItemListClose: { + width: 40, + height: 40, + lineHeight: 40, + fontSize: 26, + }, + headerPopFilterText: { + textAlign: 'center', + fontSize: 17, + fontWeight: 'bold', + width: '100%', + paddingRight: 40, + }, + filterItemList: { + width: 300, + height: winHeight, + backgroundColor: '#fff', + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 2.22, + shadowRadius: 2.22, + elevation: 3, + overflow: 'hidden', + position: 'relative', + zIndex: 2, + }, + listBoxFilter: { + width: '100%', + height: winHeight - 80, + }, + filterItemListTitleName: { + fontWeight: 'bold', + marginBottom: 10, + }, + filterItemBoxList: { + width: '100%', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'space-between', + alignItems: 'center', + }, + filterItem: { + width: 135, + height: 40, + alignItems: 'center', + flexDirection: 'row', + justifyContent: 'center', + backgroundColor: 'rgba(0,0,0,0.2)', + borderRadius: 3, + marginBottom: 10, + borderWidth: 1, + borderColor: 'rgba(0,0,0,0.2)', + position: 'relative', + }, + filterItemActive: { + borderColor: '#D8262F' + }, + filterItemName: { + width: '100%', + textAlign: 'center' + }, + boxProductCategory: { + width: winWidth, + }, + filterItemBox: { + width: '100%', + padding: 10, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + }, + filterCurrent: { + backgroundColor: 'rgba(0,0,0,0)', + position: 'absolute', + right: 0, + top: 0, + }, + filterCurrentImg: { + width: 24, + height: 22, + }, + filterCurrentIcon: { + position: 'absolute', + zIndex: 1, + color: '#fff', + right: 0, + top: 0, + }, + filterItemBoxInput: { + width: '100%', + marginTop: 10, + }, + filterItemBoxInputText: { + marginBottom: 10, + }, + filterItemBoxInputCtList: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + filterItemBoxInputCt: { + width: 135, + height: 40, + paddingHorizontal: 10, + borderColor: '#e1e1e1', + borderWidth: 1, + borderRadius: 3, + }, + filterItemBoxListHeight: { + width: '100%', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'space-between', + alignItems: 'center', + maxHeight: 100, + overflow: 'hidden' + }, + filterItemBoxListHeightAuto: { + maxHeight: 'auto' + }, + filterItemBoxVm: { + width: '100%', + marginBottom: 10, + flexDirection: 'row', + justifyContent: 'center', + marginTop: 10, + }, + filterItemBoxVmButton: { + width: 128, + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + borderWidth: 1, + borderColor: '#56C4F5', + borderRadius: 3, + }, + filterItemBoxVmButtonText: { + color: '#56C4F5', + fontSize: 14, + }, + boxCatCategory: { + padding: 10, + }, + boxCatCategoryItem: { + display: 'flex', + padding: 10, + backgroundColor: 'rgba(0,0,0,0.08)', + marginRight: 10, + }, + boxCatCategoryItemLast: { + marginRight: 0, + }, + boxCatCategoryItemText: { + fontSize: 14, + }, + pContainer: { + width: '100%', + padding: 10, + }, + pImgContent: { + width: '100%', + position: 'relative', + paddingTop: '100%', + marginBottom: 10, + }, + pNew: { + width: 24, + height: 18, + position: 'absolute', + zIndex: 6, + top: 0, + left: 0, + }, + pImg: { + width: '100%', + position: 'absolute', + zIndex: 5, + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + pTraGop: { + width: 68, + height: 16, + position: 'absolute', + zIndex: 6, + bottom: 0, + left: '50%', + transform: [{ translateX: -34 }], + }, + pInfo: { + width: '100%', + }, + pName: { + width: '100%', + fontSize: 14, + marginBottom: 10, + }, + pPrice: { + width: '100%', + fontSize: 18, + marginBottom: 10, + color: '#D8262F', + fontWeight: 'bold', + }, + pAllSale: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + pOldPrice: { + color: '#A1A1A1', + fontSize: 14, + textDecorationLine: 'line-through', + }, + pDiscount: { + paddingVertical: 5, + backgroundColor: '#D8262F', + width: 50, + textAlign: 'center', + color: '#fff', + borderRadius: 5, + overflow: 'hidden', + marginLeft: 5, + }, + pOffer: { + flexDirection: 'row', + alignItems: 'center', + }, + pOfferText: { + fontSize: 10, + color: '#A1A1A1', + }, + pOfferPrice: { + fontSize: 10, + color: '#D8262F', + }, + pItem: { + width: winWidth / 2 - 15, + marginBottom: 10, + borderRadius: 5, + overflow: 'hidden', + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.27, + shadowRadius: 4.65, + elevation: 6, + }, + boxProductCategoryList: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + flexWrap: 'wrap', + backgroundColor: '#f2f2f2', + }, +}); diff --git a/screens/TabOneScreen.tsx b/screens/TabOneScreen.tsx deleted file mode 100644 index f9554c6..0000000 --- a/screens/TabOneScreen.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import { StyleSheet } from 'react-native'; - -import EditScreenInfo from '../components/EditScreenInfo'; -import { Text, View } from '../components/Themed'; - -export default function TabOneScreen() { - return ( - - Tab One - - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, - title: { - fontSize: 20, - fontWeight: 'bold', - }, - separator: { - marginVertical: 30, - height: 1, - width: '80%', - }, -}); diff --git a/screens/TabTwoScreen.tsx b/screens/TabTwoScreen.tsx deleted file mode 100644 index e30dd7a..0000000 --- a/screens/TabTwoScreen.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import { StyleSheet } from 'react-native'; - -import EditScreenInfo from '../components/EditScreenInfo'; -import { Text, View } from '../components/Themed'; - -export default function TabTwoScreen() { - return ( - - Tab Two - - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, - title: { - fontSize: 20, - fontWeight: 'bold', - }, - separator: { - marginVertical: 30, - height: 1, - width: '80%', - }, -}); diff --git a/types.tsx b/types.tsx index b363d43..dc2be28 100644 --- a/types.tsx +++ b/types.tsx @@ -5,13 +5,13 @@ export type RootStackParamList = { export type BottomTabParamList = { TabOne: undefined; - TabTwo: undefined; + TabTwo: undefined; }; export type TabOneParamList = { - TabOneScreen: undefined; + HomePage: undefined; }; export type TabTwoParamList = { - TabTwoScreen: undefined; + ProductList: undefined; };