Reza_ashrafi
3 years ago
parent
5e8a976514
commit
b9f4596117
10 changed files with 368 additions and 132 deletions
|
After Width: | Height: | Size: 576 B |
@ -0,0 +1,55 @@ |
|||||||
|
import React, {useState} from 'react'; |
||||||
|
import { |
||||||
|
TextInput, |
||||||
|
View, |
||||||
|
Dimensions, |
||||||
|
StyleSheet, |
||||||
|
Pressable, |
||||||
|
Image, |
||||||
|
} from 'react-native'; |
||||||
|
import tw from 'tailwind-react-native-classnames'; |
||||||
|
import searchIcon from '../assets/icons/search.png'; |
||||||
|
|
||||||
|
const width = Dimensions.get('window').width; |
||||||
|
const Search = ({ |
||||||
|
placeholder, |
||||||
|
textAlign, |
||||||
|
direction, |
||||||
|
onChange, |
||||||
|
value, |
||||||
|
}) => { |
||||||
|
const styles = StyleSheet.create({ |
||||||
|
inputStyle: { |
||||||
|
fontSize: width / 30, |
||||||
|
color: '#000', |
||||||
|
borderWidth: 0.5, |
||||||
|
borderColor: '#DBDBDB', |
||||||
|
paddingVertical: 10, |
||||||
|
paddingHorizontal: 10, |
||||||
|
direction: direction, |
||||||
|
textAlign: textAlign, |
||||||
|
backgroundColor: '#F9F9F9', |
||||||
|
}, |
||||||
|
}); |
||||||
|
return ( |
||||||
|
<View style={[{marginTop: 18}, tw.style('w-full relative')]}> |
||||||
|
<TextInput |
||||||
|
style={[styles.inputStyle, tw.style('rounded-md')]} |
||||||
|
onChangeText={text => onChange(text)} |
||||||
|
placeholder={placeholder} |
||||||
|
placeholderTextColor={'#cccccc'} |
||||||
|
value={value} |
||||||
|
/> |
||||||
|
<Pressable style={tw.style('absolute left-3 top-0 transform inset-y-2')}> |
||||||
|
<Image source={searchIcon} style={[{width: 20, height: 20}]} /> |
||||||
|
</Pressable> |
||||||
|
</View> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Search; |
||||||
|
|
||||||
|
Search.defaultProps = { |
||||||
|
direction: 'rtl', |
||||||
|
textAlign: 'right', |
||||||
|
}; |
||||||
@ -1,84 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import {View, Image, Text, StyleSheet, Pressable, Dimensions} from 'react-native'; |
|
||||||
|
|
||||||
function Product({ |
|
||||||
item = { |
|
||||||
name: 'ریاضی', |
|
||||||
price: '145.000 تومان', |
|
||||||
imageUrl: 'https://dnvn.ir/api/v1/file/2105', |
|
||||||
}, |
|
||||||
}) { |
|
||||||
return ( |
|
||||||
<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; |
|
||||||
|
After Width: | Height: | Size: 93 KiB |
@ -0,0 +1,43 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import {View, Image, Text, Dimensions} from 'react-native'; |
||||||
|
import tw from 'tailwind-react-native-classnames'; |
||||||
|
const width = Dimensions.get('window').width; |
||||||
|
const height = Dimensions.get('window').height; |
||||||
|
|
||||||
|
function Book({ |
||||||
|
item = { |
||||||
|
name: 'ریاضی', |
||||||
|
price: '145.000 تومان', |
||||||
|
grade : '4', |
||||||
|
imageUrl: 'https://dnvn.ir/api/v1/file/2105', |
||||||
|
}, |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
{ |
||||||
|
width: width / 2 - 20, |
||||||
|
// shadowColor : "#000",
|
||||||
|
// shadowOffset : {width : 0, height : 2},
|
||||||
|
// shadowRadius : 20,
|
||||||
|
// shadowOpacity : 1,
|
||||||
|
marginBottom: 15, |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: '#ddd', |
||||||
|
}, |
||||||
|
tw.style('flex flex-col items-end p-2 rounded-md'), |
||||||
|
]}> |
||||||
|
<Image |
||||||
|
source={{uri: item.imageUrl}} |
||||||
|
style={[tw.style('w-full rounded-md'), {height: height / 3.8}]} |
||||||
|
/> |
||||||
|
<Text style={{fontSize: width / 22, marginTop: 5, color: '#05335F'}}> |
||||||
|
{item.name} |
||||||
|
</Text> |
||||||
|
<Text style={{ color : "#196EC0", fontSize : width / 32, marginTop : 5}}>{'پایه' + ' ' + item.grade }</Text> |
||||||
|
<Text style={[tw.style('w-full text-center font-semibold'), {marginTop : 10, color : "#132F52"}]}>{item.price}</Text> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Book; |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import {View, Image, Text, Dimensions} from 'react-native'; |
||||||
|
import tw from 'tailwind-react-native-classnames'; |
||||||
|
import posterImage from '../assets/poster.png'; |
||||||
|
|
||||||
|
const width = Dimensions.get('window').width; |
||||||
|
const height = Dimensions.get('window').height; |
||||||
|
|
||||||
|
function Video({ |
||||||
|
item = { |
||||||
|
name: 'ریاضی', |
||||||
|
price: '145.000 تومان', |
||||||
|
grade: '4', |
||||||
|
imageUrl: 'https://dnvn.ir/api/v1/file/2105', |
||||||
|
poster: posterImage, |
||||||
|
}, |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
{ |
||||||
|
// shadowColor : "#000",
|
||||||
|
// shadowOffset : {width : 0, height : 2},
|
||||||
|
// shadowRadius : 20,
|
||||||
|
// shadowOpacity : 1,
|
||||||
|
marginBottom: 15, |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: '#ddd', |
||||||
|
}, |
||||||
|
tw.style('w-full flex flex-col items-end p-2 rounded-md'), |
||||||
|
]}> |
||||||
|
<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={item.poster} |
||||||
|
style={tw.style('w-full h-full absolute left-0 top-0')} |
||||||
|
/> |
||||||
|
<Image |
||||||
|
source={{uri: item.imageUrl}} |
||||||
|
style={[ |
||||||
|
tw.style('rounded-md h-full absolute left-2 bottom-2 rounded-md'), |
||||||
|
{width: width / 5, height: height / 7}, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
<Text style={{fontSize: width / 22, marginTop: 5, color: '#05335F'}}> |
||||||
|
{item.name} |
||||||
|
</Text> |
||||||
|
|
||||||
|
<View |
||||||
|
style={tw.style('w-full flex flex-row justify-between items-center')}> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
tw.style('font-semibold'), |
||||||
|
{marginTop: 10, color: '#132F52'}, |
||||||
|
]}> |
||||||
|
{item.price} |
||||||
|
</Text> |
||||||
|
<Text style={{color: '#196EC0', fontSize: width / 32, marginTop: 5}}> |
||||||
|
{'پایه' + ' ' + item.grade} |
||||||
|
</Text> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Video; |
||||||
@ -1,37 +1,90 @@ |
|||||||
import React from 'react'; |
import React, {useState} from 'react'; |
||||||
import { |
|
||||||
View, |
import {View, ScrollView, StyleSheet, Dimensions} from 'react-native'; |
||||||
Text, |
import tw from 'tailwind-react-native-classnames'; |
||||||
ScrollView, |
|
||||||
StyleSheet, |
|
||||||
SafeAreaView, |
|
||||||
Dimensions, |
|
||||||
} from 'react-native'; |
|
||||||
import {connect} from 'react-redux'; |
import {connect} from 'react-redux'; |
||||||
import Card from './Card'; |
import Book from './components/Book'; |
||||||
|
import Video from './components/Video'; |
||||||
|
import Search from '../../components/Search'; |
||||||
|
import Select from '../../components/Select'; |
||||||
|
|
||||||
function Products({}) { |
function Products({grades, productTypes}) { |
||||||
|
const [productType, setProductType] = useState(''); |
||||||
|
const [grade, setGrade] = useState(''); |
||||||
|
const [search, setSearch] = useState(''); |
||||||
|
const onChange = (name, value) => {}; |
||||||
return ( |
return ( |
||||||
<SafeAreaView> |
<ScrollView |
||||||
<ScrollView> |
contentContainerStyle={styles.contentContainerStyle} |
||||||
<View style={styles.container}> |
style={styles.container}> |
||||||
{[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) => ( |
<Search |
||||||
<Card /> |
value={search} |
||||||
))} |
onChange={setSearch} |
||||||
</View> |
placeholder={'نام کتاب یا دوره را جستجو کنید'} |
||||||
</ScrollView> |
/> |
||||||
</SafeAreaView> |
<View |
||||||
|
style={[ |
||||||
|
tw.style('flex flex-1 flex-row justify-between items-center'), |
||||||
|
{marginTop: 10, width: '100%'}, |
||||||
|
]}> |
||||||
|
<Select |
||||||
|
defaultValue={'کتاب فیزیکی'} |
||||||
|
value={productType} |
||||||
|
onChange={setProductType} |
||||||
|
options={productTypes} |
||||||
|
width={'48%'} |
||||||
|
/> |
||||||
|
<Select |
||||||
|
defaultValue={'همه پایه'} |
||||||
|
value={grade} |
||||||
|
onChange={setGrade} |
||||||
|
options={grades} |
||||||
|
width={'48%'} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={tw.style( |
||||||
|
'flex flex-1 w-full py-5 flex-row flex-wrap justify-between bg-white', |
||||||
|
)}> |
||||||
|
{[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) => |
||||||
|
productType === 'ویدئوها' ? <Video /> : <Book />, |
||||||
|
)} |
||||||
|
</View> |
||||||
|
</ScrollView> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
export default Products; |
|
||||||
|
|
||||||
const styles = StyleSheet.create({ |
const styles = StyleSheet.create({ |
||||||
|
contentContainerStyle: { |
||||||
|
paddingBottom: 50, |
||||||
|
}, |
||||||
container: { |
container: { |
||||||
flex: 1, |
width: Dimensions.get('window').width, |
||||||
paddingHorizontal: 20, |
backgroundColor: 'white', |
||||||
flexDirection: 'row', |
flexDirection: 'column', |
||||||
flexWrap: 'wrap', |
paddingVertical: 5, |
||||||
justifyContent: 'space-between' |
paddingHorizontal: 10, |
||||||
}, |
}, |
||||||
}); |
}); |
||||||
|
|
||||||
|
export default Products; |
||||||
|
|
||||||
|
Products.defaultProps = { |
||||||
|
grades: [ |
||||||
|
'پیش دبستان', |
||||||
|
'اول', |
||||||
|
'دوم', |
||||||
|
'سوم', |
||||||
|
'چهارم', |
||||||
|
'پنجم', |
||||||
|
'ششم', |
||||||
|
'هفتم', |
||||||
|
'هشتم', |
||||||
|
'نهم', |
||||||
|
'دهم', |
||||||
|
'یازدهم', |
||||||
|
'دوازدهم', |
||||||
|
], |
||||||
|
productTypes: ['کتاب فیزیکی', 'کتاب دیجیتال', 'ویدئوها', 'اشتراک'], |
||||||
|
}; |
||||||
|
|||||||
Loading…
Reference in new issue