reza added some page

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.tabSize": 2
+}

ios/Podfile

@@ -3,6 +3,9 @@ require_relative '../node_modules/@react-native-community/cli-platform-ios/nativ
 
 platform :ios, '11.0'
 
+install! 'cocoapods', :disable_input_output_paths => true
+
+
 target 'RnDanovin' do
   config = use_native_modules!
 

ios/Podfile.lock

@@ -341,11 +341,11 @@ PODS:
     - React-jsi (= 0.66.0)
     - React-logger (= 0.66.0)
     - React-perflogger (= 0.66.0)
-  - RNCAsyncStorage (1.15.9):
+  - RNCAsyncStorage (1.15.11):
     - React-Core
   - RNDeviceInfo (8.4.5):
     - React-Core
-  - RNScreens (3.8.0):
+  - RNScreens (3.9.0):
     - React-Core
     - React-RCTImage
   - RNVectorIcons (8.1.0):
@@ -537,8 +537,8 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 6a05173dc0142abc582bd4edd2d23146b8cc218a
   React-jsinspector: be95ad424ba9f7b817aff22732eb9b1b810a000a
   React-logger: 9a9cd87d4ea681ae929b32ef580638ff1b50fb24
-  react-native-restart: d4ea7637e193da7558d229b3704d500ec0d75f9c
+  react-native-restart: 733a51ad137f15b0f8dc34c4082e55af7da00979
-  react-native-safe-area-context: 5cf05f49df9d17261e40e518481f2e334c6cd4b5
+  react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
   React-perflogger: 1f554c2b684e2f484f9edcdfdaeedab039fbaca8
   React-RCTActionSheet: 610d5a5d71ab4808734782c8bca6a12ec3563672
   React-RCTAnimation: ec6ed97370ace32724c253f29f0586cafcab8126
@@ -551,13 +551,13 @@ SPEC CHECKSUMS:
   React-RCTVibration: 53b92d54b923283638cb0186da7a5c2d2b70a49b
   React-runtimeexecutor: 4bb657a97aa74568d9ed634c8bd478299bb8a3a6
   ReactCommon: eb059748e842a1a86025ebbd4ac9d99e74492f88
-  RNCAsyncStorage: d599364c12b1ddb042cc2d7ab6f8258962b83097
+  RNCAsyncStorage: eb05c0284dd6b50b32f92fad55e2a41e03358c43
-  RNDeviceInfo: 3b3bbe00f478907223daa580b6882f0bae162f72
+  RNDeviceInfo: ec64a28e7ddf30399f34c04708fdf702560d083a
-  RNScreens: 6e1ea5787989f92b0671049b808aef64fa1ef98c
+  RNScreens: 4d79118be80f79fa1f4aa131909a1d6e86280af3
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   Yoga: c11abbf5809216c91fcd62f5571078b83d9b6720
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 6cae9eef1f72dc71152195633cb3c42ab335e42b
+PODFILE CHECKSUM: 1d3cf75671155630e15c50127f84b9f3a71b91a1
 
 COCOAPODS: 1.11.2

ios/RnDanovin.xcodeproj/project.pbxproj

@@ -343,11 +343,9 @@
 			files = (
 			);
 			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-RnDanovin/Pods-RnDanovin-frameworks-${CONFIGURATION}-input-files.xcfilelist",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-RnDanovin/Pods-RnDanovin-frameworks-${CONFIGURATION}-output-files.xcfilelist",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -360,7 +358,6 @@
 			files = (
 			);
 			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-RnDanovin/Pods-RnDanovin-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputFileListPaths = (
@@ -420,11 +417,9 @@
 			files = (
 			);
 			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-RnDanovin-RnDanovinTests/Pods-RnDanovin-RnDanovinTests-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-RnDanovin-RnDanovinTests/Pods-RnDanovin-RnDanovinTests-resources-${CONFIGURATION}-output-files.xcfilelist",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -437,11 +432,9 @@
 			files = (
 			);
 			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-RnDanovin-RnDanovinTests/Pods-RnDanovin-RnDanovinTests-frameworks-${CONFIGURATION}-input-files.xcfilelist",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-RnDanovin-RnDanovinTests/Pods-RnDanovin-RnDanovinTests-frameworks-${CONFIGURATION}-output-files.xcfilelist",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -634,7 +627,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -700,7 +693,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;

navigation.js

@@ -1,37 +1,73 @@
 import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import {NavigationContainer} from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import Splash from './src/screens/Splash';
 import Home from './src/screens/Home';
 import Login from './src/screens/Login';
 import Otp from './src/screens/Otp';
-import { connect } from 'react-redux';
+import Product from './src/screens/Product';
+import Products from './src/screens/Products';
+import ShoppingCart from './src/screens/ShoppingCart';
+import QR from './src/screens/QR/index';
+import {connect} from 'react-redux';
 
 const mapStateToProps = state => {
   return {
-    profile: state.profile
+    profile: state.profile,
-  }
+  };
-}
+};
 
 const Stack = createNativeStackNavigator();
 
 function Navigator(props) {
   return (
-      <NavigationContainer>
+    <NavigationContainer>
-        <Stack.Navigator>
+      <Stack.Navigator>
-          <Stack.Screen options={{headerShown: false}} name="Splash" component={Splash} />
+        <Stack.Screen
-          {!props.profile.token ? (
+          options={{headerShown: false}}
-            <>
+          name="Splash"
-              <Stack.Screen name="Login" component={Login} options={{headerShown: false}} />
+          component={Splash}
-              <Stack.Screen name="Otp" component={Otp} options={{headerShown: false}} />
+        />
-            </>
+        {!props.profile.token ? (
-          ) : (
+          <>
+            <Stack.Screen
+              name="Login"
+              component={Login}
+              options={{headerShown: false}}
+            />
+            <Stack.Screen
+              name="Otp"
+              component={Otp}
+              options={{headerShown: false}}
+            />
+          </>
+        ) : (
           <>
             <Stack.Screen name="Home" component={Home} />
           </>
-          )}
+        )}
-        </Stack.Navigator>
+        <Stack.Screen
-      </NavigationContainer>
+          name="Product"
+          component={Product}
+          options={{headerShown: false}}
+        />
+        <Stack.Screen
+          name="Products"
+          component={Products}
+          options={{headerShown: false}}
+        />
+        <Stack.Screen
+          name="QR"
+          component={QR}
+          options={{headerShown: true}}
+        />
+        <Stack.Screen
+          name="سبد خرید"
+          component={ShoppingCart}
+          options={{headerShown: true}}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
 

package.json

@@ -28,7 +28,8 @@
     "redux": "^4.1.1",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "tailwind-react-native-classnames": "^1.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",

src/constants/Colors.js

@@ -0,0 +1,8 @@
+const Colors = {
+    green: "#7dc241",
+    green1: "#00cc69",
+    red: "#E14C4C"
+  };
+  
+  export default Colors;
+  

src/screens/Login/components/IranFlag.js

@@ -1,17 +1,21 @@
 import React from 'react';
-import {Image, Dimensions} from "react-native";
+import {Image, Dimensions} from 'react-native';
 
-const {width} = Dimensions.get('window')
+const {width} = Dimensions.get('window');
 
 function IranFlag() {
-	return (
+  return (
-		<Image source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABHNCSVQICAgIfAhkiAAAAiBJREFUSEvtVkFrU0EQ/mb3vTRJ08bURAVFA4K0CIKCNw8WQQQPKqj/oN56qgePnv0Vnjy0YPAiItWLFw8VtWhF9BClGE3S5tnmxaR5u+PuPgIKSnlQ46UDww6zM/PtNztveTR3HwEIeQxRBHCS5irgIWI6KAKmd4GH0nXX6sWVO+6Ou9F3p2kvj0LmCD6uPcXB8VO/+X89lY2rbS4jnz6ErD/h4npGD4ydQOvHJ2z2aiiNTrqUQV1rV1vPUMxOzlC1/uKD4khJ8qRd7aa1NVQkID3rE+QJc0oaxLkBqX0TNDYOlcsozZG2OWyEjPwtZ5D/ZWN5lsIwTDTV4u076GIR/uMn6J8/B9FsQh+fSnpFpxMBU70B+XwJ+mgZqYUH6N6chf9oEWrqWFLwZMCWrah+hi4fjoFv34I/X3Fs+9evJGGdDNgxfv0G1AogV94jOnsG7ElwYc+/ZewotUN4Sy+RunvPAW9dvQTkRpOwtbGGcRB8hVJbkNI3a99VEDJFWndZihHrM4OqWcS2266uZtHeUBDCM4PVBbOxTY5ZWZBwcSQkBratzeal1DGObKzfoN58hanTAYUd6FLR3SGX9gIjKdBqzdm03gKUju3GGnhfMX5zbU4mbTDMs8+mslGdy5kdY7fbloDzW+H9JVC9abQBnijMEF+8luhzStrTP8YTT+8C70gnty3y31rN5g+EL1wuw/PK255ypwI0BfRw4dVPHMAgJ7WnxBQAAAAASUVORK5CYII='}}
+    <Image
-					 style={{
+      source={{
-						 width: width / 8,
+        uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABHNCSVQICAgIfAhkiAAAAiBJREFUSEvtVkFrU0EQ/mb3vTRJ08bURAVFA4K0CIKCNw8WQQQPKqj/oN56qgePnv0Vnjy0YPAiItWLFw8VtWhF9BClGE3S5tnmxaR5u+PuPgIKSnlQ46UDww6zM/PtNztveTR3HwEIeQxRBHCS5irgIWI6KAKmd4GH0nXX6sWVO+6Ou9F3p2kvj0LmCD6uPcXB8VO/+X89lY2rbS4jnz6ErD/h4npGD4ydQOvHJ2z2aiiNTrqUQV1rV1vPUMxOzlC1/uKD4khJ8qRd7aa1NVQkID3rE+QJc0oaxLkBqX0TNDYOlcsozZG2OWyEjPwtZ5D/ZWN5lsIwTDTV4u076GIR/uMn6J8/B9FsQh+fSnpFpxMBU70B+XwJ+mgZqYUH6N6chf9oEWrqWFLwZMCWrah+hi4fjoFv34I/X3Fs+9evJGGdDNgxfv0G1AogV94jOnsG7ElwYc+/ZewotUN4Sy+RunvPAW9dvQTkRpOwtbGGcRB8hVJbkNI3a99VEDJFWndZihHrM4OqWcS2266uZtHeUBDCM4PVBbOxTY5ZWZBwcSQkBratzeal1DGObKzfoN58hanTAYUd6FLR3SGX9gIjKdBqzdm03gKUju3GGnhfMX5zbU4mbTDMs8+mslGdy5kdY7fbloDzW+H9JVC9abQBnijMEF+8luhzStrTP8YTT+8C70gnty3y31rN5g+EL1wuw/PK255ypwI0BfRw4dVPHMAgJ7WnxBQAAAAASUVORK5CYII=',
-						 height: width / 8 / 1.5,
+      }}
-						 left: 5
+      style={{
-					 }} />
+        width: width / 8,
-	)
+        height: width / 8 / 1.5,
+        left: 5,
+      }}
+    />
+  );
 }
 
 export default IranFlag;

src/screens/Product/index.js

@@ -1,13 +1,218 @@
-import React from 'react'
+import React from 'react';
-import { View, Text } from 'react-native';
+import {
+  View,
+  Image,
+  Text,
+  StyleSheet,
+  Pressable,
+  Dimensions,
+  ScrollView,
+  SafeAreaView,
+} from 'react-native';
+import Colors from '../../constants/Colors';
 import {connect} from 'react-redux';
 
-function Product({}) {
+function Product({
+  item = {
+    name: 'ریاضی',
+    price: '145.000 تومان',
+    imageUrl: 'https://dnvn.ir/api/v1/file/2105',
+    grade: 'پایه هفتم ابتدایی',
+  },
+}) {
   return (
-    <View>
+    <SafeAreaView>
-      <Text></Text>
+      <ScrollView>
-    </View>
+        <View style={styles.container}>
-  )
+          <Image source={{uri: item.imageUrl}} style={styles.productImage} />
+          <Text style={styles.productName}>{item.name}</Text>
+          <Text style={styles.productGrade}>{item.grade}</Text>
+          <View style={styles.flexRow}>
+            <Pressable style={[styles.addToCart, styles.paperVersion]}>
+              <Text style={styles.paperVersionText}>خرید نسخه چاپی</Text>
+            </Pressable>
+            <Pressable style={[styles.addToCart, styles.digitalVersion]}>
+              <Text style={styles.digitalVersionText}>خرید نسخه دیجیتال</Text>
+            </Pressable>
+          </View>
+          <View style={styles.flexRow}>
+            <Pressable style={[styles.addToCart, styles.example]}>
+              <Text style={styles.exampleText}>مطالعه نمونه کتاب</Text>
+            </Pressable>
+          </View>
+          <View style={styles.flexColumn}>
+            <Text style={styles.summaryTitle}>خلاصه ای از کتاب </Text>
+            <Text style={styles.summaryText}>
+              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+              استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
+              در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
+              نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+              کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان
+              جامعه و{' '}
+            </Text>
+          </View>
+          <BookOptions
+            backgroundColor="#BAFFDD66"
+            title="این کتاب شامل چه محتویاتی است ؟"
+            items={[
+              'پک هدیه شامل یک عدد جلد سخت ',
+              'عینک واقعیت مجازی',
+              'کارت گرافیک مناسب جهت اجرای موارد',
+            ]}
+          />
+          <BookOptions
+            backgroundColor="#1F6FB566"
+            title="نکته های که باید در هنگام خرید به آن توجه داشته باشید"
+            items={[
+              'پک هدیه شامل یک عدد جلد سخت ',
+              'عینک واقعیت مجازی',
+              'کارت گرافیک مناسب جهت اجرای موارد',
+            ]}
+          />
+          <View style={styles.flexColumn}>
+            <Text style={styles.summaryTitle}>نظرات خریداران</Text>
+            <ScrollView horizontal="true">
+              <View style={styles.flexRow}>
+                <Comment />
+                <Comment />
+                <Comment />
+              </View>
+            </ScrollView>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
 }
 
+const BookOptions = props => {
+  return (
+    <View
+      style={[
+        styles.flexColumn,
+        styles.bookOptions,
+        {backgroundColor: props.backgroundColor},
+      ]}>
+      <Text style={styles.bookOptionsTitle}>{props.title}</Text>
+      {props.items.map((item, i) => (
+        <Text style={styles.bookOptionsItems} key={i}>
+          {'+' + ' ' + item}
+        </Text>
+      ))}
+    </View>
+  );
+};
+
+const Comment = props => {
+  return <View style={styles.comment}></View>;
+};
+
+const fullWidth = Dimensions.get('window').width;
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 10,
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  productImage: {
+    width: 250,
+    height: 350,
+    borderRadius: 10,
+  },
+  productName: {
+    marginTop: 8,
+    fontSize: 26,
+    fontWeight: 600,
+    color: Colors.green,
+  },
+  productGrade: {
+    marginTop: 10,
+    fontSize: 12,
+    fontWeight: 600,
+    color: 'black',
+  },
+  addToCart: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingVertical: 12,
+  },
+  digitalVersion: {
+    backgroundColor: '#e9e9e9',
+    borderTopRightRadius: 10,
+    borderBottomRightRadius: 10,
+  },
+  paperVersion: {
+    backgroundColor: Colors.green1,
+    borderTopLeftRadius: 10,
+    borderBottomLeftRadius: 10,
+  },
+  paperVersionText: {
+    color: 'white',
+  },
+  example: {
+    borderWidth: 1,
+    borderColor: Colors.red,
+    borderRadius: 10
+  },
+  exampleText: {
+    color: Colors.red,
+    textAlign: 'right',
+  },
+  summaryText: {
+    fontSize: 14,
+    textAlign: 'right',
+    marginBottom: 20,
+  },
+  summaryTitle: {
+    fontSize: 18,
+    marginBottom: 5,
+    marginTop: 10,
+    fontWeight: 600,
+    textAlign: 'right',
+  },
+  bookOptions: {
+    marginTop: 10,
+    marginBottom: 15,
+    borderRadius: 8,
+    paddingVertical: 20,
+    paddingHorizontal: 10,
+    alignItems: 'flex-end',
+  },
+  bookOptionsTitle: {
+    fontSize: 16,
+    marginBottom: 10,
+  },
+  bookOptionsItems: {
+    marginBottom: 5,
+    fontSize: 13,
+  },
+  comment: {
+    width: 200,
+    height: 100,
+    backgroundColor: '#FFFAC9',
+    borderRadius: 10,
+    marginLeft: 20,
+  },
+  flexRow: {
+    marginTop: 10,
+    width: fullWidth,
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    paddingHorizontal : 10
+  },
+  flexColumn: {
+    marginTop: 10,
+    width: fullWidth,
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});
+
 export default Product;

src/screens/Products/Card/index.js

@@ -0,0 +1,84 @@
+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 (
+    <View style={styles.product}>
+      <Image source={{uri: item.imageUrl}} style={styles.productImage} />
+      <Text style={styles.productName}>{item.name}</Text>
+      <View style={styles.productInfo}>
+        <View style={styles.productPrice}>
+          <Text>قیمت</Text>
+          <Text>{item.price}</Text>
+        </View>
+        {/* <Pressable style={styles.addToCart}>
+          <Text style={styles.text}>اضافه کردن به سبد خرید</Text>
+        </Pressable> */}
+      </View>
+    </View>
+  );
+}
+
+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;

src/screens/Products/index.js

@@ -1,13 +1,37 @@
-import React from 'react'
+import React from 'react';
-import { View, Text } from 'react-native';
+import {
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+  SafeAreaView,
+  Dimensions,
+} from 'react-native';
 import {connect} from 'react-redux';
+import Card from './Card';
 
 function Products({}) {
   return (
-    <View>
+    <SafeAreaView>
-      <Text></Text>
+      <ScrollView>
-    </View>
+        <View style={styles.container}>
-  )
+          {[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) => (
+            <Card />
+          ))}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
 }
 
 export default Products;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between'
+  },
+});

src/screens/QR/Content/Links.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {View, Text, Image, Pressable} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import linkIcon from '../../../assets/icons/link.png';
+
+export default function Links({links}) {
+  return (
+    <View
+      style={tw.style(
+        'w-full flex-row-reverse justify-between items-center rounded-md bg-yellow-100 py-3 px-2 mt-5',
+      )}>
+      <View style={tw.style('flex flex-col items-end')}>
+        <Text>لینک ها</Text>
+        {links.map((link, i) => (
+          <Pressable style={tw.style('')} key={i}>
+            <Text>{link}</Text>
+          </Pressable>
+        ))}
+      </View>
+      <Image source={linkIcon} style={{width: 45, height: 50}} />
+    </View>
+  );
+}

src/screens/QR/Content/PDF.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import {View, Text, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import pdfIcon from '../../../assets/icons/pdf.png';
+
+export default function PDF({name, file}) {
+  return (
+    <View
+      style={tw.style(
+        'w-full flex-row-reverse justify-between items-center rounded-md bg-red-100 py-3 px-2 mt-5',
+      )}>
+      <Text style={tw.style('text-right text-xs text-red-900')}>
+        {name}
+      </Text>
+      <Image source={pdfIcon} style={{width: 47, height: 50}} />
+    </View>
+  );
+}

src/screens/QR/Content/PPT.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import {View, Text, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import pptIcon from '../../../assets/icons/ppt.png';
+
+export default function PPT({name, file}) {
+  return (
+    <View
+      style={tw.style(
+        'w-full flex-row-reverse justify-between items-center rounded-md bg-green-100 py-3 px-2 mt-5',
+      )}>
+      <Text style={tw.style('text-right text-xs text-green-900')}>
+        {name}
+      </Text>
+      <Image source={pptIcon} style={{width: 45, height: 50}} />
+    </View>
+  );
+}

src/screens/QR/Content/Video.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+
+export default function Video({name, file}) {
+  return (
+    <View style={tw.style('w-full flex-col mt-5')}>
+      <Text style={tw.style('w-full text-right text-xs text-green-900 mb-2')}>{name}</Text>
+      <View style={[tw.style('w-full bg-blue-200 rounded-md'), {minHeight : 200}]}>
+
+      </View>
+    </View>
+  );
+}

src/screens/QR/Content/Voice.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+
+export default function Voice({name, file}) {
+  return (
+    <View style={tw.style('w-full flex-col rounded-md bg-green-200 py-3 px-2 mt-4')}>
+      <Text style={tw.style('w-full text-right text-xs text-green-900')}>{name}</Text>
+    </View>
+  );
+}

src/screens/QR/Content/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {View, Text, ScrollView, SafeAreaView, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+
+
+export default function Content({data}) {
+  return (
+    <SafeAreaView>
+      <ScrollView>
+        <View style={tw.style('flex flex-1 flex-col px-3')}>
+          <View
+            style={tw.style('flex w-full flex-row-reverse justify-between')}>
+            <View style={tw.style('flex flex-row-reverse')}>
+              <Image
+                source={{uri: 'https://dnvn.ir/api/v1/file/2094'}}
+                style={{width: 80, height: 120}}
+              />
+              <View style={tw.style('flex flex-column items-end')}>
+                <Text>{data.name}</Text>
+                <Text>{data.grade}</Text>
+                <Text>{`شما در حال مشاهده `}</Text>
+              </View>
+            </View>
+            {/* <Image source={} /> */}
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+Content.defaultProps = {
+  data: {
+    name: 'ریاضیات گسسته خیلی پیشرفته',
+    grade: 'پایه هفتم ابتدایی',
+    page: '67',
+    percent: '62',
+    voice: null,
+    video: null,
+    pdf: null,
+    ppt: null,
+    links: null,
+  },
+};

src/screens/QR/Scanner.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+import tw from 'tailwind-react-native-classnames';
+
+export default function Scanner() {
+    return (
+        <View>
+            <Text></Text>
+        </View>
+    )
+}

src/screens/QR/index.js

@@ -1,13 +1,102 @@
-import React from 'react'
+import React from 'react';
-import { View, Text } from 'react-native';
+import {
+  View,
+  Text,
+  ScrollView,
+  SafeAreaView,
+  Image,
+  Dimensions,
+} from 'react-native';
 import {connect} from 'react-redux';
+import tw from 'tailwind-react-native-classnames';
+// import Content from './Content';
+// import Scanner from './Scanner';
+import Voice from './Content/Voice';
+import Video from './Content/Video';
+import PPT from './Content/PPT';
+import PDF from './Content/PDF';
+import Links from './Content/Links';
 
-function QR({}) {
+import bookmarkIcon from '../../assets/icons/bookmark.png';
+
+const width = Dimensions.get('window').width;
+function QR({data}) {
   return (
-    <View>
+    <SafeAreaView>
-      <Text></Text>
+      <ScrollView>
-    </View>
+        <View style={tw.style('flex flex-1 flex-col px-3')}>
-  )
+          <View
+            style={tw.style(
+              'flex w-full flex-row-reverse justify-between py-3',
+            )}>
+            <View style={tw.style('flex flex-row-reverse')}>
+              <Image
+                source={{uri: 'https://dnvn.ir/api/v1/file/2094'}}
+                style={[tw.style('rounded'), {width: width / 5, height: 120}]}
+              />
+              <View
+                style={tw.style('flex flex-column items-end self-end pr-3')}>
+                <Text style={tw.style('text-md text-green-500 font-semibold')}>
+                  {data.name}
+                </Text>
+                <Text
+                  style={tw.style('text-xs text-gray-500 font-normal mt-1')}>
+                  {data.grade}
+                </Text>
+                <Text
+                  style={tw.style('text-xs text-gray-500 font-normal mt-1')}>
+                  شما در حال مطالعه{' '}
+                  <Text
+                    style={tw.style('text-xs text-blue-500 font-medium mt-1')}>
+                    {'صفحه' + ' ' + data.page}
+                  </Text>{' '}
+                  هستید.
+                </Text>
+                <Text
+                  style={tw.style('text-xs text-gray-500 font-normal mt-1')}>
+                  پیشرفت شما در مطالعه کتاب{' '}
+                  <Text style={tw.style('text-xs text-green-500 font-medium')}>
+                    {data.percent + '' + 'درصد'}
+                  </Text>{' '}
+                  میباشد.
+                </Text>
+              </View>
+            </View>
+            <Image source={bookmarkIcon} style={{width: 27, height: 33}} />
+          </View>
+          {data.voice && (
+            <Voice name={data.voice.name} file={data.voice.file} />
+          )}
+          {
+            data.video && <Video name={data.video.name} file={data.voice.file} />
+          }
+          {
+            data.ppt && <PPT name={data.ppt.name} file={data.ppt.file} />
+          }
+          {
+            data.pdf && <PDF name={data.ppt.name} file={data.ppt.file} />
+          }
+          {
+            data.links && <Links links={data.links} />
+          }
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
 }
 
 export default QR;
+
+QR.defaultProps = {
+  data: {
+    name: 'ریاضیات گسسته خیلی پیشرفته',
+    grade: 'پایه هفتم ابتدایی',
+    page: '67',
+    percent: '62',
+    voice: {name: 'استاد رضایی: فصل پنجم توضیح در مورد آتش فشان ها', file: 1},
+    video: {name: 'ویدئوی آزمایش آتشفشان سرکه ای', file: 1},
+    pdf: {name : 'فایل پاورپوینت ارائه درس آتشفشان ها', file: 1},
+    ppt: {name: 'فایل پاورپوینت ارائه درس آتشفشان ها', file: 1},
+    links: [ "وبسایت آموزشی دانوین" , "وبسایت رسمی مدیریت راهبردی کشور", "سازمان تبلیغات صنایع سبک " ]
+  },
+};

src/screens/ShoppingCart/Code.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { View, Text, Pressable, TextInput } from 'react-native'
+import tw from 'tailwind-react-native-classnames';
+
+export default function Code({}) {
+    return (
+        <View style={tw.style('flex w-full flex-col items-end mt-5')}>
+            <Text style={tw.style('font-bold text-lg text-blue-500 mt-1')}>کد تخفیف</Text>
+            <Text style={tw.style('font-xs text-gray-500')}>اگر کد تخفیفی دارید آن را در کادر زیر وارد کنید.</Text>
+            <View style={tw.style('flex w-full flex-row-reverse border border-blue-300 p-1 rounded-md mt-3')}>
+                <TextInput style={tw.style('border-0 flex-1 text-right pr-2')} />
+                <Pressable style={tw.style('bg-blue-500 rounded-md py-2 px-4')}>
+                    <Text style={tw.style('text-white text-sm')}>ثبت کد</Text>
+                </Pressable>
+            </View>
+        </View>
+    )
+}

src/screens/ShoppingCart/Table.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import {View, Text, Pressable, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+
+export default function Table({array}) {
+  return (
+    <View style={tw.style('flex flex-row-reverse w-full justify-between mt-4')}>
+      <View style={tw.style('flex flex-col pl-2')}>
+        <Text
+          style={[
+            tw.style('flex text-right flex-3'),
+            {
+              borderBottomWidth: 2,
+              borderColor: '#777',
+            },
+          ]}>
+          محصولات
+        </Text>
+
+        <View style={tw.style('flex flex-col')}>
+          {array.map((item, i) => (
+            <View style={tw.style('py-3 flex flex-row-reverse')}>
+              <Image
+                source={{uri: 'https://dnvn.ir/api/v1/file/2016'}}
+                style={[{width: 50, height: 80}, tw.style('rounded')]}
+              />
+              <View style={[tw.style('flex flex-col pr-2')]}>
+                <Text
+                  style={tw.style(
+                    'text-md font-bold text-right text-gray-500',
+                  )}>
+                  ریاضی هشتم
+                </Text>
+                <Text
+                  style={tw.style(
+                    'text-md text-green-500 text-right mt-1 font-normal',
+                  )}>
+                  پایه چهارم
+                </Text>
+                <Text
+                  style={tw.style(
+                    'text-xs text-blue-500 text-right mt-1 font-normal',
+                  )}>
+                  همراه با کد فعال سازی محتوای الکترونیک
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      </View>
+      <View style={tw.style('flex flex-col')}>
+        <Text
+          style={[
+            tw.style('w-full text-right'),
+            {
+              borderBottomWidth: 2,
+              borderColor: '#777',
+            },
+          ]}>
+          قیمت
+        </Text>
+        <View style={tw.style('flex flex-col')}>
+          {array.map((item, i) => (
+            <View
+              style={[tw.style('py-3 flex flex-col w-full'), {height: 105}]}>
+              <Text style={tw.style('text-right text-md')}>265.000</Text>
+              <Text
+                style={[
+                  tw.style('text-right font-normal text-gray-500'),
+                  {fontSize: 8},
+                ]}>
+                100.000 هزار تومان
+              </Text>
+              <View
+                style={tw.style(
+                  'flex flex-row-reverse py-2 justify-around border border-gray-400 rounded-md mt-2 w-20',
+                )}>
+                <Pressable>
+                  <Text>+</Text>
+                </Pressable>
+                <Pressable>
+                  <Text>1</Text>
+                </Pressable>
+                <Pressable>
+                  <Text>-</Text>
+                </Pressable>
+              </View>
+            </View>
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}

src/screens/ShoppingCart/index.js

@@ -1,13 +1,84 @@
-import React from 'react'
+import React, {useState} from 'react';
-import { View, Text } from 'react-native';
+import {
+  View,
+  Text,
+  Image,
+  ScrollView,
+  SafeAreaView,
+  Pressable,
+  Dimensions,
+  Platform
+} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import Table from './Table';
+import Code from './Code';
 import {connect} from 'react-redux';
 
-function ShoppingCart({}) {
+const PriceStatus = ({name, value}) => {
   return (
-    <View>
+    <View style={tw.style('w-full flex flex-row-reverse justify-between py-2')}>
-      <Text></Text>
+      <Text style={tw.style('text-md text-gray-700 font-medium')}>{name}</Text>
+      <Text style={tw.style('text-xs text-gray-500 font-normal')}>{value}</Text>
     </View>
-  )
+  );
+};
+
+const iosHeight = Dimensions.get('window').height - 170;
+const ios = Platform.OS === 'ios';
+
+function ShoppingCart({}) {
+  const [array, setArray] = useState([40, 60]);
+  return (
+    <SafeAreaView>
+      <ScrollView>
+        <View
+          style={[
+            tw.style('flex flex-col px-3 w-full relative'),
+            {minHeight: ios ? iosHeight : 0},
+          ]}>
+          <Table array={array} />
+          <Code />
+          <View
+            style={tw.style(
+              'flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6',
+            )}>
+            <PriceStatus name="مبلغ سبد خرید" value="265000 تومان" />
+            <PriceStatus name="میزان تخفیف" value="0 تومان" />
+            <PriceStatus name="مالیات بر ارزش افزوده" value="0 تومان" />
+          </View>
+          <View
+            style={tw.style(
+              'flex flex-row-reverse justify-center items-center w-full py-2',
+            )}>
+            <Text
+              style={tw.style(
+                'text-md font-semibold text-gray-900 leading-5 ml-3',
+              )}>
+              جمع کل {'\n'} سبد خرید
+            </Text>
+            <View style={tw.style('flex flex-row-reverse items-center')}>
+              <Text style={tw.style('text-3xl font-bold text-gray-900')}>
+                235.000
+              </Text>
+              <Text style={tw.style('text-sm font-normal text-gray-700')}>
+                تومان
+              </Text>
+            </View>
+          </View>
+        </View>
+      </ScrollView>
+      <View style={tw.style('flex px-3 w-full')}>
+      <Pressable
+        style={[
+          tw.style(
+            'flex flex-row w-full justify-center bg-green-500 rounded-md py-2',
+          ),
+        ]}>
+        <Text style={tw.style('text-white')}>ادامه</Text>
+      </Pressable>
+      </View>
+    </SafeAreaView>
+  );
 }
 
 export default ShoppingCart;

src/screens/Splash/index.js

@@ -17,7 +17,9 @@ function Splash({navigation, profile}) {
     setTimeout(() => {
       !profile.token ? navigation.reset({
         index: 0,
-        routes: [{ name: 'Login' }],
+        // routes: [{ name: 'Login' }],
+        routes: [{ name: 'QR' }],
+
       }) : navigation.reset({
         index: 0,
         routes: [{ name: 'Home' }],