diff --git a/package-lock.json b/package-lock.json
index 1c6e5d0..e8f1bdf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,9 +10,12 @@
"dependencies": {
"@react-native-async-storage/async-storage": "^1.15.9",
"@react-native-community/async-storage": "^1.12.1",
+ "@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.4",
+ "i18next": "^21.5.3",
"react": "17.0.2",
+ "react-i18next": "^11.14.3",
"react-native": "0.66.0",
"react-native-awesome-alerts": "^1.5.2",
"react-native-camera": "^4.2.1",
@@ -2097,6 +2100,23 @@
"resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz",
"integrity": "sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ=="
},
+ "node_modules/@react-navigation/bottom-tabs": {
+ "version": "6.0.9",
+ "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.0.9.tgz",
+ "integrity": "sha512-uRoq6Zd7lPNnLqNQkKC28eR62tpqcDeuakZU1sO8N46FtvrcTuNLoIlssrGty3GF7ALBIxCypn4A93t3nbmMrQ==",
+ "dependencies": {
+ "@react-navigation/elements": "^1.2.1",
+ "color": "^3.1.3",
+ "warn-once": "^0.1.0"
+ },
+ "peerDependencies": {
+ "@react-navigation/native": "^6.0.0",
+ "react": "*",
+ "react-native": "*",
+ "react-native-safe-area-context": ">= 3.0.0",
+ "react-native-screens": ">= 3.0.0"
+ }
+ },
"node_modules/@react-navigation/core": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.1.0.tgz",
@@ -5875,6 +5895,14 @@
"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
"dev": true
},
+ "node_modules/html-parse-stringify": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+ "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+ "dependencies": {
+ "void-elements": "3.1.0"
+ }
+ },
"node_modules/html-tags": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
@@ -5934,6 +5962,14 @@
"node": ">=10.17.0"
}
},
+ "node_modules/i18next": {
+ "version": "21.5.3",
+ "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.5.3.tgz",
+ "integrity": "sha512-9R8127a0/N5okiD7eeo6XBPQsHgHsLr1GdQEa35Pcw305ArC9KZDLs9kbgdn3xuVUNYlVu8+gWzz73eVkna0gA==",
+ "dependencies": {
+ "@babel/runtime": "^7.12.0"
+ }
+ },
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -10035,6 +10071,19 @@
}
}
},
+ "node_modules/react-i18next": {
+ "version": "11.14.3",
+ "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.14.3.tgz",
+ "integrity": "sha512-Hf2aanbKgYxPjG8ZdKr+PBz9sY6sxXuZWizxCYyJD2YzvJ0W9JTQcddVEjDaKyBoCyd3+5HTerdhc9ehFugc6g==",
+ "dependencies": {
+ "@babel/runtime": "^7.14.5",
+ "html-parse-stringify": "^3.0.1"
+ },
+ "peerDependencies": {
+ "i18next": ">= 19.0.0",
+ "react": ">= 16.8.0"
+ }
+ },
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -12401,6 +12450,14 @@
"resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
"integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="
},
+ "node_modules/void-elements": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+ "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/src/assets/icons/search.png b/src/assets/icons/search.png
new file mode 100644
index 0000000..02bc530
Binary files /dev/null and b/src/assets/icons/search.png differ
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 0000000..4f4849f
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,55 @@
+import React, {useState} from 'react';
+import {
+ TextInput,
+ View,
+ Dimensions,
+ StyleSheet,
+ Pressable,
+ Image,
+} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import searchIcon from '../assets/icons/search.png';
+
+const width = Dimensions.get('window').width;
+const Search = ({
+ placeholder,
+ textAlign,
+ direction,
+ onChange,
+ value,
+}) => {
+ const styles = StyleSheet.create({
+ inputStyle: {
+ fontSize: width / 30,
+ color: '#000',
+ borderWidth: 0.5,
+ borderColor: '#DBDBDB',
+ paddingVertical: 10,
+ paddingHorizontal: 10,
+ direction: direction,
+ textAlign: textAlign,
+ backgroundColor: '#F9F9F9',
+ },
+ });
+ return (
+
+ onChange(text)}
+ placeholder={placeholder}
+ placeholderTextColor={'#cccccc'}
+ value={value}
+ />
+
+
+
+
+ );
+};
+
+export default Search;
+
+Search.defaultProps = {
+ direction: 'rtl',
+ textAlign: 'right',
+};
\ No newline at end of file
diff --git a/src/components/Select.js b/src/components/Select.js
index 8e527f0..dc05e44 100644
--- a/src/components/Select.js
+++ b/src/components/Select.js
@@ -1,36 +1,39 @@
import React from 'react';
-import {Image} from 'react-native';
+import {Image, Dimensions} from 'react-native';
import SelectDropdown from 'react-native-select-dropdown';
import dropdownIcon from '../assets/icons/dropdown.png';
+import tw from 'tailwind-react-native-classnames';
-function Select({iconPosition, options, onChange, value, name}) {
+function Select({iconPosition, options, onChange, value, width, defaultValue}) {
return (
{
- onChange(name, selectedItem);
+ onSelect={selectedItem => {
+ onChange(selectedItem);
}}
renderDropdownIcon={() => (
-
+
)}
/>
);
@@ -39,10 +42,6 @@ function Select({iconPosition, options, onChange, value, name}) {
export default Select;
Select.defaultProps = {
- options : [
- "1",
- "2",
- "3"
- ],
- iconPosition : "left"
-}
+ options: ['1', '2', '3'],
+ iconPosition: 'left',
+};
diff --git a/src/screens/Products/Card/index.js b/src/screens/Products/Card/index.js
deleted file mode 100644
index 5919255..0000000
--- a/src/screens/Products/Card/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import {View, Image, Text, StyleSheet, Pressable, Dimensions} from 'react-native';
-
-function Product({
- item = {
- name: 'ریاضی',
- price: '145.000 تومان',
- imageUrl: 'https://dnvn.ir/api/v1/file/2105',
- },
-}) {
- return (
-
-
- {item.name}
-
-
- قیمت
- {item.price}
-
- {/*
- اضافه کردن به سبد خرید
- */}
-
-
- );
-}
-
-const fullWidth = Dimensions.get('window').width;
-
-var styles = StyleSheet.create({
- product: {
- display: 'flex',
- width: fullWidth / 2 - 25,
- flexDirection: 'column',
- alignItems: 'flex-end',
- padding: 10,
- marginBottom: 20,
- borderRadius: 10,
- // shadowColor: '#000',
- // shadowOffset: {
- // width: 0,
- // height: 2,
- // },
- // shadowOpacity: 0.25,
- // shadowRadius: 3.84,
- // elevation: 5,
- borderWidth : 1,
- borderColor: '#ccc'
- },
- productImage: {
- width: '100%',
- height: 200,
- borderRadius: 10,
- },
- productInfo: {
- flex: 1,
- flexDirection: 'row-reverse',
- justifyContent: 'space-between',
- alignItems: 'center',
- minWidth: '100%',
- marginTop: 5,
- },
- productPrice: {
- flexDirection: 'column',
- alignItems: 'flex-end',
- // flex: 1,
- },
- addToCart: {
- backgroundColor: 'white',
- borderWidth: 1,
- borderColor: 'gray',
- color: 'gray',
- paddingVertical: 10,
- paddingHorizontal: 10,
- borderRadius: 10,
- },
- productName: {
- marginTop: 10,
- fontSize: 20,
- fontWeight: '600',
- },
-});
-
-export default Product;
diff --git a/src/screens/Products/assets/poster.png b/src/screens/Products/assets/poster.png
new file mode 100644
index 0000000..c109e7c
Binary files /dev/null and b/src/screens/Products/assets/poster.png differ
diff --git a/src/screens/Products/components/Book.js b/src/screens/Products/components/Book.js
new file mode 100644
index 0000000..b9e89ff
--- /dev/null
+++ b/src/screens/Products/components/Book.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import {View, Image, Text, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+function Book({
+ item = {
+ name: 'ریاضی',
+ price: '145.000 تومان',
+ grade : '4',
+ imageUrl: 'https://dnvn.ir/api/v1/file/2105',
+ },
+}) {
+ return (
+
+
+
+ {item.name}
+
+ {'پایه' + ' ' + item.grade }
+ {item.price}
+
+ );
+}
+
+export default Book;
diff --git a/src/screens/Products/components/Video.js b/src/screens/Products/components/Video.js
new file mode 100644
index 0000000..55a92f6
--- /dev/null
+++ b/src/screens/Products/components/Video.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import {View, Image, Text, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import posterImage from '../assets/poster.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+function Video({
+ item = {
+ name: 'ریاضی',
+ price: '145.000 تومان',
+ grade: '4',
+ imageUrl: 'https://dnvn.ir/api/v1/file/2105',
+ poster: posterImage,
+ },
+}) {
+ return (
+
+
+ {/* */}
+
+
+
+
+ {item.name}
+
+
+
+
+ {item.price}
+
+
+ {'پایه' + ' ' + item.grade}
+
+
+
+ );
+}
+
+export default Video;
diff --git a/src/screens/Products/index.js b/src/screens/Products/index.js
index db13acd..666f565 100644
--- a/src/screens/Products/index.js
+++ b/src/screens/Products/index.js
@@ -1,37 +1,90 @@
-import React from 'react';
-import {
- View,
- Text,
- ScrollView,
- StyleSheet,
- SafeAreaView,
- Dimensions,
-} from 'react-native';
+import React, {useState} from 'react';
+
+import {View, ScrollView, StyleSheet, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+
import {connect} from 'react-redux';
-import Card from './Card';
+import Book from './components/Book';
+import Video from './components/Video';
+import Search from '../../components/Search';
+import Select from '../../components/Select';
-function Products({}) {
+function Products({grades, productTypes}) {
+ const [productType, setProductType] = useState('');
+ const [grade, setGrade] = useState('');
+ const [search, setSearch] = useState('');
+ const onChange = (name, value) => {};
return (
-
-
-
- {[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) => (
-
- ))}
-
-
-
+
+
+
+
+
+
+
+ {[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) =>
+ productType === 'ویدئوها' ? : ,
+ )}
+
+
);
}
-export default Products;
-
const styles = StyleSheet.create({
+ contentContainerStyle: {
+ paddingBottom: 50,
+ },
container: {
- flex: 1,
- paddingHorizontal: 20,
- flexDirection: 'row',
- flexWrap: 'wrap',
- justifyContent: 'space-between'
+ width: Dimensions.get('window').width,
+ backgroundColor: 'white',
+ flexDirection: 'column',
+ paddingVertical: 5,
+ paddingHorizontal: 10,
},
});
+
+export default Products;
+
+Products.defaultProps = {
+ grades: [
+ 'پیش دبستان',
+ 'اول',
+ 'دوم',
+ 'سوم',
+ 'چهارم',
+ 'پنجم',
+ 'ششم',
+ 'هفتم',
+ 'هشتم',
+ 'نهم',
+ 'دهم',
+ 'یازدهم',
+ 'دوازدهم',
+ ],
+ productTypes: ['کتاب فیزیکی', 'کتاب دیجیتال', 'ویدئوها', 'اشتراک'],
+};
diff --git a/yarn.lock b/yarn.lock
index 4745b07..4177401 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -694,7 +694,7 @@
"pirates" "^4.0.0"
"source-map-support" "^0.5.16"
-"@babel/runtime@^7.12.1", "@babel/runtime@^7.15.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
"integrity" "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw=="
"resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz"
"version" "7.15.4"
@@ -1211,6 +1211,15 @@
"resolved" "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz"
"version" "2.0.0"
+"@react-navigation/bottom-tabs@^6.0.9":
+ "integrity" "sha512-uRoq6Zd7lPNnLqNQkKC28eR62tpqcDeuakZU1sO8N46FtvrcTuNLoIlssrGty3GF7ALBIxCypn4A93t3nbmMrQ=="
+ "resolved" "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.0.9.tgz"
+ "version" "6.0.9"
+ dependencies:
+ "@react-navigation/elements" "^1.2.1"
+ "color" "^3.1.3"
+ "warn-once" "^0.1.0"
+
"@react-navigation/core@^6.1.0":
"integrity" "sha512-LyZqD/ZCXSK9+ES8KiH+0tU+7aL84jUw1N9OxZfEuns/OcnSXKC3sOO+9NQ9XRowB1wLUfJhmqZ8G8rUlg33fQ=="
"resolved" "https://registry.npmjs.org/@react-navigation/core/-/core-6.1.0.tgz"
@@ -2316,7 +2325,7 @@
"color-name" "^1.0.0"
"simple-swizzle" "^0.2.2"
-"color@^3.1.2":
+"color@^3.1.2", "color@^3.1.3":
"integrity" "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA=="
"resolved" "https://registry.npmjs.org/color/-/color-3.2.1.tgz"
"version" "3.2.1"
@@ -3625,6 +3634,13 @@
"resolved" "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz"
"version" "2.0.2"
+"html-parse-stringify@^3.0.1":
+ "integrity" "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg=="
+ "resolved" "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz"
+ "version" "3.0.1"
+ dependencies:
+ "void-elements" "3.1.0"
+
"html-tags@^3.1.0":
"integrity" "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg=="
"resolved" "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz"
@@ -3663,6 +3679,13 @@
"resolved" "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
"version" "2.1.0"
+"i18next@^21.5.3", "i18next@>= 19.0.0":
+ "integrity" "sha512-9R8127a0/N5okiD7eeo6XBPQsHgHsLr1GdQEa35Pcw305ArC9KZDLs9kbgdn3xuVUNYlVu8+gWzz73eVkna0gA=="
+ "resolved" "https://registry.npmjs.org/i18next/-/i18next-21.5.3.tgz"
+ "version" "21.5.3"
+ dependencies:
+ "@babel/runtime" "^7.12.0"
+
"iconv-lite@0.4.24":
"integrity" "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="
"resolved" "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -6060,6 +6083,14 @@
"shell-quote" "^1.6.1"
"ws" "^7"
+"react-i18next@^11.14.3":
+ "integrity" "sha512-Hf2aanbKgYxPjG8ZdKr+PBz9sY6sxXuZWizxCYyJD2YzvJ0W9JTQcddVEjDaKyBoCyd3+5HTerdhc9ehFugc6g=="
+ "resolved" "https://registry.npmjs.org/react-i18next/-/react-i18next-11.14.3.tgz"
+ "version" "11.14.3"
+ dependencies:
+ "@babel/runtime" "^7.14.5"
+ "html-parse-stringify" "^3.0.1"
+
"react-is@^16.12.0 || ^17.0.0", "react-is@^17.0.1", "react-is@^17.0.2":
"integrity" "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
"resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
@@ -6259,7 +6290,7 @@
"react-shallow-renderer" "^16.13.1"
"scheduler" "^0.20.2"
-"react@*", "react@^16.0.0 || ^17.0.0", "react@^16.3.0", "react@^16.8", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@>=16.13.1", "react@>=16.8.6", "react@17.0.2":
+"react@*", "react@^16.0.0 || ^17.0.0", "react@^16.3.0", "react@^16.8", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@>= 16.8.0", "react@>=16.13.1", "react@>=16.8.6", "react@17.0.2":
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
"version" "17.0.2"
@@ -7433,6 +7464,11 @@
"resolved" "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz"
"version" "1.0.1"
+"void-elements@3.1.0":
+ "integrity" "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+ "resolved" "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz"
+ "version" "3.1.0"
+
"w3c-hr-time@^1.0.2":
"integrity" "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ=="
"resolved" "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"