You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
2.8 KiB
110 lines
2.8 KiB
import React from 'react'; |
|
import {View, Text, ScrollView, Image, Dimensions} from 'react-native'; |
|
import tw from 'tailwind-react-native-classnames'; |
|
import olum2Image from '../assets/olum2.png'; |
|
import olum1Image from '../assets/olum1.png'; |
|
import zist11Image from '../assets/zist11.png'; |
|
|
|
const width = Dimensions.get('window').width; |
|
const height = Dimensions.get('window').height; |
|
export default function MyBooks({myBooks}) { |
|
return ( |
|
<View |
|
style={[ |
|
tw.style( |
|
'flex flex-col shadow-sm rounded-md py-4 px-2 border items-start', |
|
), |
|
{ |
|
backgroundColor: '#E9F0FF', |
|
borderColor: '#D2E0FD', |
|
direction: 'rtl', |
|
}, |
|
]}> |
|
<Text |
|
style={[ |
|
tw.style('text-blue-500 mb-4 font-semibold'), |
|
{fontSize: width / 18, color : '#196EC0'}, |
|
]}> |
|
کتاب من |
|
</Text> |
|
<ScrollView |
|
horizontal={true} |
|
style={[tw.style('')]} |
|
showsHorizontalScrollIndicator={false}> |
|
|
|
{myBooks.map((book, index) => ( |
|
<View style={[tw.style('flex flex-col mr-4 items-start')]} key={index}> |
|
<Image |
|
style={ |
|
[{width: width / 3, height: height / 4}, tw.style('rounded-md')] |
|
} |
|
source={book.imageUrl} |
|
/> |
|
<Text |
|
style={[ |
|
{marginVertical: 10, color: '#05335F', fontSize: width / 27}, |
|
tw.style('font-semibold'), |
|
]}> |
|
{book.name} |
|
</Text> |
|
<Text style={{color: '#196EC0', fontSize: width / 30}}> |
|
{book.grade} |
|
</Text> |
|
<View |
|
style={[ |
|
tw.style('rounded-md mt-4'), |
|
{height: 6, width: '100%', backgroundColor: '#D3E9FF'}, |
|
]}> |
|
<View |
|
style={[ |
|
tw.style('h-full rounded-md'), |
|
{width: book.progress + '%', backgroundColor : "#2B8DEB"}, |
|
]}></View> |
|
</View> |
|
</View> |
|
))} |
|
</ScrollView> |
|
</View> |
|
); |
|
} |
|
|
|
MyBooks.defaultProps = { |
|
myBooks: [ |
|
{ |
|
name: 'علوم تجربی', |
|
imageUrl: zist11Image, |
|
grade: 3, |
|
progress: 70, |
|
}, |
|
{ |
|
name: 'زیست شناسی', |
|
imageUrl: zist11Image, |
|
grade: 4, |
|
progress: 60, |
|
}, |
|
{ |
|
name: 'علوم اجتماعی', |
|
imageUrl: zist11Image, |
|
grade: 12, |
|
progress: 90, |
|
}, |
|
{ |
|
name: 'علوم تجربی', |
|
imageUrl: zist11Image, |
|
grade: 3, |
|
progress: 70, |
|
}, |
|
{ |
|
name: 'زیست شناسی', |
|
imageUrl: zist11Image, |
|
grade: 4, |
|
progress: 60, |
|
}, |
|
{ |
|
name: 'علوم اجتماعی', |
|
imageUrl: zist11Image, |
|
grade: 12, |
|
progress: 90, |
|
}, |
|
], |
|
};
|
|
|