Reza
3 years ago
parent
0e8ad43d2e
commit
fd519fd751
29 changed files with 20728 additions and 5794 deletions
@ -0,0 +1,3 @@ |
||||
{ |
||||
"editor.tabSize": 2 |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 834 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,8 @@ |
||||
const Colors = { |
||||
green: "#7dc241", |
||||
green1: "#00cc69", |
||||
red: "#E14C4C" |
||||
}; |
||||
|
||||
export default Colors; |
||||
|
||||
@ -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 ( |
||||
<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 |
||||
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=', |
||||
}} |
||||
style={{ |
||||
width: width / 8, |
||||
height: width / 8 / 1.5, |
||||
left: 5 |
||||
}} /> |
||||
) |
||||
left: 5, |
||||
}} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
export default IranFlag; |
||||
|
||||
@ -1,13 +1,218 @@ |
||||
import React from 'react' |
||||
import { View, Text } from 'react-native'; |
||||
import React from 'react'; |
||||
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> |
||||
<Text></Text> |
||||
<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> |
||||
</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; |
||||
|
||||
@ -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; |
||||
@ -1,13 +1,37 @@ |
||||
import React from 'react' |
||||
import { View, Text } from 'react-native'; |
||||
import React from 'react'; |
||||
import { |
||||
View, |
||||
Text, |
||||
ScrollView, |
||||
StyleSheet, |
||||
SafeAreaView, |
||||
Dimensions, |
||||
} from 'react-native'; |
||||
import {connect} from 'react-redux'; |
||||
import Card from './Card'; |
||||
|
||||
function Products({}) { |
||||
return ( |
||||
<View> |
||||
<Text></Text> |
||||
<SafeAreaView> |
||||
<ScrollView> |
||||
<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' |
||||
}, |
||||
}); |
||||
|
||||
@ -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> |
||||
); |
||||
} |
||||
@ -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> |
||||
); |
||||
} |
||||
@ -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> |
||||
); |
||||
} |
||||
@ -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> |
||||
); |
||||
} |
||||
@ -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> |
||||
); |
||||
} |
||||
@ -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, |
||||
}, |
||||
}; |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -1,13 +1,102 @@ |
||||
import React from 'react' |
||||
import { View, Text } from 'react-native'; |
||||
import React from 'react'; |
||||
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> |
||||
<Text></Text> |
||||
<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 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: [ "وبسایت آموزشی دانوین" , "وبسایت رسمی مدیریت راهبردی کشور", "سازمان تبلیغات صنایع سبک " ] |
||||
}, |
||||
}; |
||||
|
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
); |
||||
} |
||||
@ -1,13 +1,84 @@ |
||||
import React from 'react' |
||||
import { View, Text } from 'react-native'; |
||||
import React, {useState} from 'react'; |
||||
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'; |
||||
|
||||
const PriceStatus = ({name, value}) => { |
||||
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> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const iosHeight = Dimensions.get('window').height - 170; |
||||
const ios = Platform.OS === 'ios'; |
||||
|
||||
function ShoppingCart({}) { |
||||
const [array, setArray] = useState([40, 60]); |
||||
return ( |
||||
<View> |
||||
<Text></Text> |
||||
<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; |
||||
|
||||
Loading…
Reference in new issue