reza added cart

src/components/Header.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {View, Text, Dimensions, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function Header({icon, title, description, background}) {
+  return (
+    <View
+      style={[
+        tw.style('w-full flex flex-col items-center justify-end pb-3 relative'),
+        {height: height / 4, backgroundColor: '#196EC015'},
+      ]}>
+      <Image source={background} style={[tw.style('absolute left-0 top-0'), {}]} />
+      <Image source={icon} style={[{width : width / 5, height : height / 10}]} />
+      <Text
+        style={[
+          {fontSize: width / 14, color: '#196EC0'},
+          tw.style('font-bold'),
+        ]}>
+        {title}
+      </Text>
+      <Text
+        style={[
+          {color: '#86A0B9', fontSize: width / 30},
+          tw.style('font-semibold mb-2'),
+        ]}>
+        {description}
+      </Text>
+    </View>
+  );
+}

src/components/Pressable.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Pressable, Text, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+
+const fullWidth = Dimensions.get('window').width;
+
+export default function Pressable1({
+  title,
+  backgroundColor,
+  color,
+  border,
+  width,
+}) {
+  return (
+    <Pressable
+      style={[
+        tw.style('rounded-md py-3 flex flex-row justify-center mb-3'),
+        {
+          backgroundColor: backgroundColor,
+          borderWidth: border.width,
+          borderColor: border.color,
+          width : width,
+        },
+      ]}>
+      <Text style={{fontSize: fullWidth / 27, color: color}}>{title}</Text>
+    </Pressable>
+  );
+}

src/screens/Product/components/Book.js

@@ -0,0 +1,192 @@
+import {t} from 'i18next';
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  Dimensions,
+  ScrollView,
+  Pressable,
+} from 'react-native';
+import CustomPressable from '../../../components/Pressable';
+import Description from './Description';
+import LinkBox from './LinkBox';
+import Comments from './Comments';
+import Rates from './Rates';
+import tw from 'tailwind-react-native-classnames';
+import arrowMoreIcon from '../assets/arrowMore.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function Book({product}) {
+  return (
+    <ScrollView style={[tw.style('flex flex-col flex-1')]}>
+      <View style={tw.style('flex flex-row-reverse')}>
+        <View
+          style={[
+            tw.style('rounded-md'),
+            {height: height / 5, width: width / 3.5},
+          ]}>
+          <Image
+            source={{uri: product.imageUrl}}
+            style={[tw.style('rounded-md h-full w-full')]}
+          />
+        </View>
+
+        <View
+          style={[
+            tw.style('flex flex-col flex-1 justify-between items-end'),
+            {
+              paddingRight: 10,
+            },
+          ]}>
+          <View style={tw.style('flex flex-col items-end')}>
+            <Text
+              style={{
+                color: '#05335F',
+                fontSize: width / 17,
+                marginBottom: 5,
+              }}>
+              {product.name}
+            </Text>
+            <Text style={{color: '#196EC0', fontSize: width / 30}}>
+              {product.grade}
+            </Text>
+          </View>
+          <Text
+            style={[
+              tw.style('text-right w-full'),
+              {color: '#323232', fontSize: width / 32},
+            ]}>
+            {product.text}
+          </Text>
+        </View>
+      </View>
+      <View
+        style={tw.style(
+          'flex flex-row-reverse items-center justify-around py-6',
+        )}>
+        <View>
+          <Text
+            style={{
+              color: '#196EC0',
+              textAlign: 'center',
+              fontSize: width / 27,
+            }}>
+            {' '}
+            {473 + '\n' + 'صفحه'}
+          </Text>
+        </View>
+        <View
+          style={{backgroundColor: '#196EC055', height: 20, width: 2}}></View>
+        <View>
+          <Text
+            style={{
+              color: '#196EC0',
+              textAlign: 'center',
+              fontSize: width / 27,
+            }}>
+            {' '}
+            {'فیزیکی- دیجیتالی - ویدئو' + '\n' + 'در دسترس'}
+          </Text>
+        </View>
+        <View
+          style={{backgroundColor: '#196EC055', height: 20, width: 2}}></View>
+        <View>
+          <Text
+            style={{
+              color: '#196EC0',
+              textAlign: 'center',
+              fontSize: width / 27,
+            }}>
+            {' '}
+            {4.8 + '\n' + 'امتیاز'}
+          </Text>
+        </View>
+      </View>
+      <View style={'flex flex-col mt-3'}>
+        <Text
+          style={[
+            tw.style('w-full text-right font-medium'),
+            {color: '#196EC0', fontSize: width / 26},
+          ]}>
+          نسخه محصول را انتخاب کنید
+        </Text>
+        <View style={tw.style('flex justify-between')}></View>
+      </View>
+      <View
+        style={tw.style(
+          'flex flex-row-reverse justify-between flex-wrap py-3',
+        )}>
+        <CustomPressable
+          title={'نسخه فیزیکی'}
+          backgroundColor="transparent"
+          color={'#196EC0'}
+          border={{color: '#196EC0', width: 1}}
+          width={'49%'}
+        />
+        <CustomPressable
+          title={'نسخه دیجیتال'}
+          backgroundColor="transparent"
+          color={'#196EC0'}
+          border={{color: '#196EC0', width: 1}}
+          width={'49%'}
+        />
+        <CustomPressable
+          title={'خرید با قیمت 245.000 تومان'}
+          backgroundColor="#196EC0"
+          color={'white'}
+          border={{color: '#196EC0', width: 0}}
+          width={'65%'}
+        />
+        <CustomPressable
+          title={'مشاهده نمونه'}
+          backgroundColor="transparent"
+          color={'#196EC0'}
+          border={{color: '#196EC0', width: 1}}
+          width={'33%'}
+        />
+        <Pressable
+          style={[
+            tw.style(
+              'w-full rounded-md flex flex-row justify-center items-center py-3.5',
+            ),
+            {backgroundColor: '#196EC01a'},
+          ]}>
+          <Image
+            source={arrowMoreIcon}
+            style={{width: 12, height: 16, marginRight: 10}}
+          />
+
+          <Text
+            style={[tw.style(''), {color: '#275077', fontSize: width / 27}]}>
+            مشاهده دوره ویدئویی این محصول
+          </Text>
+        </Pressable>
+      </View>
+      <Description description={product.description} />
+      <LinkBox title="مشخصات محصول" path="" />
+      <LinkBox title="نقد بررسی و توضیحات تکمیلی محصول" path="" />
+      <LinkBox title="پرسش و پاسخ" path="" />
+      <View
+        style={tw.style(
+          'flex flex-row-reverse justify-between items-center my-4',
+        )}>
+        <Text
+          style={[
+            {fontSize: width / 25, color: '#275077'},
+            tw.style('semibold'),
+          ]}>
+          امتیازات و نظرات
+        </Text>
+        <Image
+          source={arrowMoreIcon}
+          style={{width: 12, height: 16, marginRight: 10}}
+        />
+      </View>
+      <Rates rates={product.rates} />
+      <Comments comments={product.comments} />
+    </ScrollView>
+  );
+}

src/screens/Product/components/Comments.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+
+const width = Dimensions.get('window').width;
+
+export default function Commnets({comments}) {
+  return (
+    <ScrollView horizontal={true} style={{direction: 'rtl', marginTop: 20}}>
+      {comments.map((comment, index) => (
+        <Comment comment={comment} key={index} />
+      ))}
+    </ScrollView>
+  );
+}
+
+const Comment = ({comment}) => {
+  return (
+    <View
+      style={[
+        tw.style('flex flex-col rounded-md p-4 ml-2'),
+        {width: width / 1.3, borderWidth: 1, borderColor: '#7070701a'},
+      ]}>
+      <View style={[tw.style('flex flex-row justify-between items-center')]}>
+        <View style={tw.style('flex flex-row items-center')}>
+          <Image
+            source={comment.imageUrl}
+            style={[tw.style('rounded-full'), {width: 35, height: 35}]}
+          />
+          <Text
+            style={[
+              {fontSize: width / 25, color: '#132F52'},
+              tw.style('font-bold'),
+            ]}>
+            {comment.name}
+          </Text>
+        </View>
+        <View style={tw.style('flex flex-row items-center')}>
+          <Text style={{fontSize: width / 38, color: '#196EC0'}}>18:20</Text>
+          <View
+            style={{
+              backgroundColor: '#196EC055',
+              height: 12,
+              width: 2,
+              marginHorizontal: 4,
+            }}></View>
+          <Text style={{fontSize: width / 38, color: '#196EC0'}}>
+            1400/08/19
+          </Text>
+        </View>
+      </View>
+      <Text
+        style={[
+          {fontSize: width / 32, lineHeight: 20, color: '#132F52'},
+          tw.style('text-left mt-2'),
+        ]}>
+        {comment.message}
+      </Text>
+    </View>
+  );
+};

src/screens/Product/components/Description.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {View, Text, Dimensions, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import arrowMoreIcon from '../assets/arrowMore.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function Description({description}) {
+  return (
+    <View style={[tw.style('w-full flex flex-col pt-6 mt-2 mb-3'), {borderTopWidth : 1, borderColor : '#86A0B944'}]}>
+      <View
+        style={tw.style('flex flex-row-reverse justify-between items-center mb-2')}>
+        <Text
+          style={[
+            {fontSize: width / 25, color: '#275077'},
+            tw.style('semibold'),
+          ]}>
+          توضیحات
+        </Text>
+        <Image
+          source={arrowMoreIcon}
+          style={{width: 12, height: 16, marginRight: 10}}
+        />
+      </View>
+      <Text
+        style={[
+          tw.style('w-full text-right mt-2'),
+          {fontSize: width / 30, color: '#323232bb', lineHeight: 20},
+        ]}>
+        {description}
+      </Text>
+    </View>
+  );
+}

src/screens/Product/components/LinkBox.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {View, Text, Dimensions, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import arrowMoreIcon from '../assets/arrowMore.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function Description({title, path}) {
+  return (
+    <View
+      style={[
+        tw.style('flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 py-4'),
+        {
+          backgroundColor: '#50A9FF33'
+        }
+      ]}>
+      <Text
+        style={[
+          {fontSize: width / 30, color: '#275077'},
+          tw.style('semibold'),
+        ]}>
+        {title}
+      </Text>
+      <Image
+        source={arrowMoreIcon}
+        style={{width: 12, height: 16, marginRight: 10}}
+      />
+    </View>
+  );
+}

src/screens/Product/components/Rates.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import {View, Text, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+
+const width = Dimensions.get('window').width;
+
+export default function Rates({rates}) {
+  return (
+    <View style={tw.style('flex flex-row-reverse')}>
+      <View
+        style={[
+          tw.style('flex flex-col items-center justify-center'),
+          {width: '25%'},
+        ]}>
+        <Text
+          style={[
+            tw.style('font-bold'),
+            {fontSize: width / 10, color: '#05335F'},
+          ]}>
+          {rates.mid}
+        </Text>
+        <Text style={{fontSize: width / 30, color: '#707070'}}>
+          {'از' + ' ' + rates.allRates + ' ' + 'نفر'}
+        </Text>
+      </View>
+      <View style={[tw.style('flex flex-col flex-1'), {width: '60%'}]}>
+        {rates.fields.map((field, index) => (
+          <Progress key={index} data={field} />
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const Progress = ({data}) => {
+  return (
+    <View style={[tw.style('flex flex-1 flex-row items-center py-0.5')]}>
+      <Text style={{fontSize: width / 30, color: '#05335F'}}>{data.name}</Text>
+      <View
+        style={[
+          tw.style('rounded-md ml-2 flex-1'),
+          {height: 6, backgroundColor: '#D3E9FF'},
+        ]}>
+        <View
+          style={[
+            tw.style('h-full rounded-md my-auto'),
+            {width: data.value + '%', backgroundColor: '#2B8DEB'},
+          ]}></View>
+      </View>
+      <Text
+        style={{
+          fontSize: width / 30,
+          width: width / 7.5,
+          textAlign: 'center',
+          color: '#05335F',
+        }}>
+        {data.value + '%'}
+      </Text>
+    </View>
+  );
+};

src/screens/Product/components/Video.js

@@ -0,0 +1,207 @@
+import {t} from 'i18next';
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  Dimensions,
+  ScrollView,
+  Pressable,
+} from 'react-native';
+import CustomPressable from '../../../components/Pressable';
+import Description from './Description';
+import LinkBox from './LinkBox';
+import Comments from './Comments';
+import Rates from './Rates';
+import tw from 'tailwind-react-native-classnames';
+import arrowMoreIcon from '../assets/arrowMore.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function Video({product}) {
+  return (
+    <ScrollView style={[tw.style('flex flex-col flex-1')]}>
+      <View style={tw.style('flex flex-column')}>
+        <View
+          style={[
+            tw.style(
+              'w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden',
+            ),
+            {height: height / 3.8},
+          ]}>
+          {/* <View
+          style={[
+            tw.style('rounded-full bg-black bg-opacity-20 z-50'),
+            {width: 50, height: 50},
+          ]}></View> */}
+          <Image
+            source={product.poster}
+            style={tw.style('w-full rounded-md h-full absolute left-0 top-0')}
+          />
+          <Image
+            source={{uri: product.imageUrl}}
+            style={[
+              tw.style('rounded-md h-full rounded-md ml-2'),
+              {width: width / 5, height: height / 7},
+            ]}
+          />
+        </View>
+
+        <View
+          style={[
+            tw.style('flex flex-col flex-1 justify-between items-end'),
+            {
+              paddingRight: 10,
+            },
+          ]}>
+          <View style={tw.style('flex flex-col items-end')}>
+            <Text
+              style={{
+                marginTop : 5,
+                color: '#05335F',
+                fontSize: width / 17,
+                marginBottom: 5,
+              }}>
+              {product.name}
+            </Text>
+            <Text style={{color: '#196EC0', fontSize: width / 30, marginBottom: 10}}>
+              {product.grade}
+            </Text>
+          </View>
+          <Text
+            style={[
+              tw.style('text-right w-full'),
+              {color: '#323232', fontSize: width / 32},
+            ]}>
+            {product.text}
+          </Text>
+        </View>
+      </View>
+      <View
+        style={tw.style(
+          'flex flex-row-reverse items-center justify-around py-6',
+        )}>
+        <View>
+          <Text
+            style={{
+              color: '#196EC0',
+              textAlign: 'center',
+              fontSize: width / 27,
+            }}>
+            {' '}
+            {473 + '\n' + 'صفحه'}
+          </Text>
+        </View>
+        <View
+          style={{backgroundColor: '#196EC055', height: 20, width: 2}}></View>
+        <View>
+          <Text
+            style={{
+              color: '#196EC0',
+              textAlign: 'center',
+              fontSize: width / 27,
+            }}>
+            {' '}
+            {'فیزیکی- دیجیتالی - ویدئو' + '\n' + 'در دسترس'}
+          </Text>
+        </View>
+        <View
+          style={{backgroundColor: '#196EC055', height: 20, width: 2}}></View>
+        <View>
+          <Text
+            style={{
+              color: '#196EC0',
+              textAlign: 'center',
+              fontSize: width / 27,
+            }}>
+            {' '}
+            {4.8 + '\n' + 'امتیاز'}
+          </Text>
+        </View>
+      </View>
+      <View style={'flex flex-col mt-3'}>
+        <Text
+          style={[
+            tw.style('w-full text-right font-medium'),
+            {color: '#196EC0', fontSize: width / 26},
+          ]}>
+          نسخه محصول را انتخاب کنید
+        </Text>
+        <View style={tw.style('flex justify-between')}></View>
+      </View>
+      <View
+        style={tw.style(
+          'flex flex-row-reverse justify-between flex-wrap py-3',
+        )}>
+        <CustomPressable
+          title={'نسخه فیزیکی'}
+          backgroundColor="transparent"
+          color={'#196EC0'}
+          border={{color: '#196EC0', width: 1}}
+          width={'49%'}
+        />
+        <CustomPressable
+          title={'نسخه دیجیتال'}
+          backgroundColor="transparent"
+          color={'#196EC0'}
+          border={{color: '#196EC0', width: 1}}
+          width={'49%'}
+        />
+        <CustomPressable
+          title={'خرید با قیمت 245.000 تومان'}
+          backgroundColor="#196EC0"
+          color={'white'}
+          border={{color: '#196EC0', width: 0}}
+          width={'65%'}
+        />
+        <CustomPressable
+          title={'مشاهده نمونه'}
+          backgroundColor="transparent"
+          color={'#196EC0'}
+          border={{color: '#196EC0', width: 1}}
+          width={'33%'}
+        />
+        <Pressable
+          style={[
+            tw.style(
+              'w-full rounded-md flex flex-row justify-center items-center py-3.5',
+            ),
+            {backgroundColor: '#196EC01a'},
+          ]}>
+          <Image
+            source={arrowMoreIcon}
+            style={{width: 12, height: 16, marginRight: 10}}
+          />
+
+          <Text
+            style={[tw.style(''), {color: '#275077', fontSize: width / 27}]}>
+            مشاهده دوره ویدئویی این محصول
+          </Text>
+        </Pressable>
+      </View>
+      <Description description={product.description} />
+      <LinkBox title="مشخصات محصول" path="" />
+      <LinkBox title="نقد بررسی و توضیحات تکمیلی محصول" path="" />
+      <LinkBox title="پرسش و پاسخ" path="" />
+      <View
+        style={tw.style(
+          'flex flex-row-reverse justify-between items-center my-4',
+        )}>
+        <Text
+          style={[
+            {fontSize: width / 25, color: '#275077'},
+            tw.style('semibold'),
+          ]}>
+          امتیازات و نظرات
+        </Text>
+        <Image
+          source={arrowMoreIcon}
+          style={{width: 12, height: 16, marginRight: 10}}
+        />
+      </View>
+      <Rates rates={product.rates} />
+      <Comments comments={product.comments} />
+    </ScrollView>
+  );
+}

src/screens/Product/index.js

@@ -1,218 +1,76 @@
 import React from 'react';
-import {
-  View,
-  Image,
-  Text,
-  StyleSheet,
-  Pressable,
-  Dimensions,
-  ScrollView,
-  SafeAreaView,
-} from 'react-native';
-import Colors from '../../constants/Colors';
+import {View, StyleSheet, Dimensions, ScrollView} from 'react-native';
+import Book from './components/Book';
+import Video from './components/Video';
 import {connect} from 'react-redux';
+import userImage from './assets/user.png';
+import poster from './assets/poster.png';
 
 function Product({
-  item = {
+  product = {
+    type: 'ویدئوها',
     name: 'ریاضی',
     price: '145.000 تومان',
     imageUrl: 'https://dnvn.ir/api/v1/file/2105',
+    poster : poster,
     grade: 'پایه هفتم ابتدایی',
+    text: 'خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ',
+    description:
+      'خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن ',
+    rates: {
+      mid: 4.5,
+      allRates: 2456,
+      fields: [
+        {name: 'field1', value: 49},
+        {name: 'field2', value: 31},
+        {name: 'field3', value: 9},
+        {name: 'field4', value: 5},
+        {name: 'field5', value: 4},
+      ],
+    },
+    comments: [
+      {
+        name: 'سورنا عابدی',
+        imageUrl: userImage,
+        vote: 4,
+        date: new Date(),
+        message:
+          'خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ',
+      },
+      {
+        name: 'سورنا عابدی',
+        imageUrl: userImage,
+        vote: 4,
+        date: new Date(),
+        message:
+          'خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ',
+      },
+    ],
   },
 }) {
   return (
-    <SafeAreaView>
-      <ScrollView>
-        <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
+      contentContainerStyle={styles.contentContainerStyle}
+      style={styles.container}>
+      {product.type === 'ویدئوها' ? (
+        <Video product={product} />
+      ) : (
+        <Book product={product} />
+      )}
     </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({
+const styles = StyleSheet.create({
+  contentContainerStyle: {
+    paddingBottom: 50,
+  },
   container: {
-    flex: 1,
-    padding: 10,
+    width: Dimensions.get('window').width,
+    backgroundColor: 'white',
     flexDirection: 'column',
-    alignItems: 'center',
+    paddingVertical: 5,
     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/ShoppingCart/Code.js

@@ -1,18 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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/components/Code.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {View, Text, Pressable, TextInput, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+const width = Dimensions.get('window').width;
+
+export default function Code({}) {
+  return (
+    <View
+      style={tw.style('flex w-full flex-col items-end mt-5 overflow-hidden')}>
+      <View
+        style={tw.style(
+          'flex w-full flex-row-reverse border border-blue-300 rounded-md mt-3',
+        )}>
+        <TextInput
+          style={[
+            tw.style('border-0 flex-1 text-right pr-4 font-medium'),
+            {fontSize: width / 27},
+          ]}
+          placeholder={'کد تخفیف دارید ؟'}
+          placeholderTextColor="#707070"
+        />
+        <Pressable
+          style={[
+            tw.style('py-4 px-5'),
+            {
+              backgroundColor: '#196EC0',
+              borderTopLeftRadius: 5,
+              borderBottomLeftRadius: 5,
+            },
+          ]}>
+          <Text style={[tw.style('text-white'), {fontSize: width / 25}]}>ثبت کد</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}

src/screens/ShoppingCart/components/Product.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import {View, Text, Image, Dimensions, Pressable} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import bookImage from '../assets/book.png';
+import deleteIcon from '../assets/delete.png';
+import plusIcon from '../assets/+.png';
+import minus from '../assets/_.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function Product({product}) {
+  return (
+    <View
+      style={[
+        tw.style('flex flex-row justify-between py-5'),
+        {borderBottomWidth: 1, borderColor: '#7070701a', direction: 'rtl'},
+      ]}>
+      <View style={tw.style('flex flex-row')}>
+        <Image
+          source={bookImage}
+          style={[
+            tw.style('rounded-md'),
+            {width: width / 4, height: height / 6},
+          ]}
+        />
+        <View style={tw.style('flex flex-col items-start pl-2')}>
+          <Text
+            style={{fontsize: width / 20, color: '#05335F', marginBottom: 5}}>
+            علوم اجتماعی
+          </Text>
+          <Text
+            style={{fontSize: width / 30, color: '#707070', marginBottom: 5}}>
+            پایه دوم
+          </Text>
+          <Text style={{fontSize: width / 30, color: '#707070'}}>
+            نسخه فیزیکی
+          </Text>
+        </View>
+      </View>
+      <View style={tw.style('flex flex-col justify-between items-end')}>
+        <Image source={deleteIcon} style={{width: 17, height: 17}} />
+        <View style={tw.style('flex flex-col items-center')}>
+          <View style={tw.style('flex flex-row items-center mb-3')}>
+            <Pressable
+              style={[
+                tw.style(
+                  'rounded-sm py-1 px-2.5 flex flex-row justify-center items-center border',
+                ),
+                {
+                  borderColor: '#196EC0',
+                },
+              ]}>
+              <Text style={{fontSize: width / 20, color: '#196EC0'}}>+</Text>
+            </Pressable>
+            <Text
+              style={[
+                tw.style('mx-2.5 font-semibold'),
+                {
+                  fontSize: width / 20,
+                  color: '#196EC0',
+                },
+              ]}>
+              1
+            </Text>
+            <Pressable
+              style={[
+                tw.style(
+                  'rounded-sm py-1 px-2.5 flex flex-row justify-center items-center border',
+                ),
+                {
+                  borderColor: '#DBDBDB',
+                },
+              ]}>
+              <Text
+                style={{
+                  fontSize: width / 18,
+                  color: '#DBDBDB',
+                }}>
+                -
+              </Text>
+            </Pressable>
+          </View>
+          <Text style={[tw.style('font-bold', {fontSize: width / 20})]}>
+            145.000
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}

src/screens/ShoppingCart/index.js

@@ -2,83 +2,114 @@ import React, {useState} from 'react';
 import {
   View,
   Text,
-  Image,
   ScrollView,
-  SafeAreaView,
-  Pressable,
   Dimensions,
-  Platform
+  StyleSheet,
+  Pressable,
+  Image
 } from 'react-native';
+import Product from './components/Product';
+import Code from './components/Code';
+import CustomPressable from '../../components/Pressable';
 import tw from 'tailwind-react-native-classnames';
-import Table from './Table';
-import Code from './Code';
+import alertIcon from './assets/alert.png';
+
 import {connect} from 'react-redux';
 
-const PriceStatus = ({name, value}) => {
+const width = Dimensions.get('window').width;
+
+const PriceStatus = ({name, value, type}) => {
   return (
     <View style={tw.style('w-full flex flex-row-reverse justify-between py-2')}>
-      <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>
+      <Text
+        style={[
+          tw.style('font-light'),
+          {fontSize: width / 27, color: '#132F52'},
+        ]}>
+        {name}
+      </Text>
+      <Text
+        style={[
+          tw.style('font-normal'),
+          {
+            color: type === 'error' ? '#F1420D' : '#246E8A',
+            fontSize: width / 27,
+          },
+        ]}>
+        {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} />
+    <ScrollView
+      contentContainerStyle={styles.contentContainerStyle}
+      style={styles.container}>
+      {[0, 1].map((product, index) => (
+        <Product key={index} product={product} />
+      ))}
       <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 تومان" />
+        <PriceStatus name="مبلغ سبد خرید" value="265000 تومان" type="normal" />
+        <PriceStatus name="میزان تخفیف" value="0 تومان" type="error" />
+        <PriceStatus
+          name="مالیات بر ارزش افزوده"
+          value="0 تومان"
+          type="error"
+        />
       </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',
+          'flex flex-row-reverse justify-between items-center w-full py-3',
         )}>
-              جمع کل {'\n'} سبد خرید
+        <Text style={[tw.style('font-medium'), {fontSize: width / 25}]}>
+          جمع کل سبد خرید
         </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
+          style={[
+            tw.style('font-medium'),
+            {fontSize: width / 27, color: '#246E8A'},
+          ]}>
+          235.000 تومان
         </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',
-          ),
+          tw.style('w-full rounded-md flex flex-row justify-end items-center py-3.5 px-3 my-5'),
+          {backgroundColor: '#196EC01a'},
         ]}>
-        <Text style={tw.style('text-white')}>ادامه</Text>
+        <Text style={[tw.style(''), {color: '#275077', fontSize: width / 30}]}>
+          هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
+        </Text>
+        <Image source={alertIcon} style={{width: 18, height: 18, marginLeft : 5}} />
       </Pressable>
-      </View>
-    </SafeAreaView>
+      <CustomPressable
+        title={'ادامه فرایند خرید'}
+        backgroundColor="#196EC0"
+        color={'white'}
+        border={{color: '#196EC0', width: 0}}
+        width={'100%'}
+      />
+    </ScrollView>
   );
 }
 
 export default ShoppingCart;
+
+const styles = StyleSheet.create({
+  contentContainerStyle: {
+    paddingBottom: 50,
+  },
+  container: {
+    width: Dimensions.get('window').width,
+    backgroundColor: 'white',
+    flexDirection: 'column',
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
+});

src/screens/Support/index.js

@@ -1,9 +1,12 @@
 import React, {useState} from 'react';
 import {View, StyleSheet, Dimensions, ScrollView, Text} from 'react-native';
 import tw from 'tailwind-react-native-classnames';
+import Header from '../../components/Header';
 import Select from '../../components/Select';
 import CustomTextInput from '../../components/CustomTextInput';
 import FormButton from '../../components/FormButton';
+import bgContact from './assets/bgContact.png';
+import callIcon from './assets/call.png';
 
 const width = Dimensions.get('window').width;
 
@@ -23,34 +26,12 @@ function Support(props) {
     <ScrollView
       contentContainerStyle={styles.contentContainerStyle}
       style={[tw.style('bg-white flex flex-col p-1'), {width: width}]}>
-      <Text style={tw.style('text-right mt-2 text-gray-500 text-sm')}>
-        برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و پس از
-        انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
-      </Text>
-      <View style={tw.style('w-full mt-10')}>
-        <Select onChange={onChange} name="department" />
-      </View>
-      <View style={tw.style('w-full mt-1')}>
-        <CustomTextInput
-          label={'موضوع'}
-          onChange={onChange}
-          name="title"
-          value={formData.title}
+      <Header
+        background={bgContact}
+        title={'تماس با ما'}
+        description={'تیم پشتیبانی ما اینجاست تا شما رو کمک کنه'}
+        icon={callIcon}
       />
-      </View>
-      <View style={tw.style('w-full mt-1')}>
-        <CustomTextInput
-          label={'متن'}
-          onChange={onChange}
-          name="message"
-          value={formData.message}
-          multiline={true}
-          numberOfLines={6}
-        />
-      </View>
-      <View style={tw.style('w-full mt-4')}>
-        <FormButton text={'ارسال'} color={'#6cbe44'} />
-      </View>
     </ScrollView>
   );
 }