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 { |
||||
View, |
||||
Text, |
||||
ScrollView, |
||||
StyleSheet, |
||||
SafeAreaView, |
||||
Dimensions, |
||||
} from 'react-native'; |
||||
import React, {useState} from 'react'; |
||||
|
||||
import {View, ScrollView, StyleSheet, Dimensions} from 'react-native'; |
||||
import tw from 'tailwind-react-native-classnames'; |
||||
|
||||
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 ( |
||||
<SafeAreaView> |
||||
<ScrollView> |
||||
<View style={styles.container}> |
||||
{[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) => ( |
||||
<Card /> |
||||
))} |
||||
<ScrollView |
||||
contentContainerStyle={styles.contentContainerStyle} |
||||
style={styles.container}> |
||||
<Search |
||||
value={search} |
||||
onChange={setSearch} |
||||
placeholder={'نام کتاب یا دوره را جستجو کنید'} |
||||
/> |
||||
<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> |
||||
</SafeAreaView> |
||||
); |
||||
} |
||||
|
||||
export default Products; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
contentContainerStyle: { |
||||
paddingBottom: 50, |
||||
}, |
||||
container: { |
||||
flex: 1, |
||||
paddingHorizontal: 20, |
||||
flexDirection: 'row', |
||||
flexWrap: 'wrap', |
||||
justifyContent: 'space-between' |
||||
width: Dimensions.get('window').width, |
||||
backgroundColor: 'white', |
||||
flexDirection: 'column', |
||||
paddingVertical: 5, |
||||
paddingHorizontal: 10, |
||||
}, |
||||
}); |
||||
|
||||
export default Products; |
||||
|
||||
Products.defaultProps = { |
||||
grades: [ |
||||
'پیش دبستان', |
||||
'اول', |
||||
'دوم', |
||||
'سوم', |
||||
'چهارم', |
||||
'پنجم', |
||||
'ششم', |
||||
'هفتم', |
||||
'هشتم', |
||||
'نهم', |
||||
'دهم', |
||||
'یازدهم', |
||||
'دوازدهم', |
||||
], |
||||
productTypes: ['کتاب فیزیکی', 'کتاب دیجیتال', 'ویدئوها', 'اشتراک'], |
||||
}; |
||||
|
||||
Loading…
Reference in new issue