Reza_ashrafi
3 years ago
parent
ebaefb4b66
commit
8667e32d67
7 changed files with 260 additions and 9 deletions
@ -0,0 +1,19 @@ |
||||
import React from "react"; |
||||
import { View, Text } from "react-native"; |
||||
import tw from "tailwind-rn"; |
||||
|
||||
const Divider = ({ type }) => { |
||||
return ( |
||||
<View |
||||
style={[ |
||||
tw(`bg-gray-100 my-4`), |
||||
{ |
||||
height: type === "horizontal" ? "100%" : 1, |
||||
width: type === 'horizontal' ? 1 : "100%", |
||||
}, |
||||
]} |
||||
></View> |
||||
); |
||||
}; |
||||
|
||||
export default Divider; |
||||
@ -0,0 +1,110 @@ |
||||
import React from "react"; |
||||
import { View, FlatList, Pressable, Image, Dimensions, Text } from "react-native"; |
||||
import {useNavigation} from '@react-navigation/native'; |
||||
import tw from "tailwind-rn"; |
||||
|
||||
const { width, height } = Dimensions.get("window"); |
||||
|
||||
import Header from "../../Home/components/Header"; |
||||
import posterImage from "../../Products/assets/poster.png"; |
||||
|
||||
function MostViewedVideo({}) { |
||||
const navigation = useNavigation(); |
||||
const Video = ({ video }) => { |
||||
return ( |
||||
<Pressable |
||||
style={[ |
||||
{ |
||||
width : 320, |
||||
}, |
||||
tw("flex flex-col items-end rounded-md ml-4"), |
||||
]} |
||||
onPress={() => navigation.navigate("Product")} |
||||
> |
||||
<View |
||||
style={[ |
||||
tw( |
||||
"w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden" |
||||
), |
||||
{ height: height / 3.8 }, |
||||
]} |
||||
> |
||||
<Image |
||||
source={video.poster} |
||||
style={tw("w-full h-full absolute left-0 top-0 rounded-md")} |
||||
/> |
||||
<Image |
||||
source={{ uri: video.imageUrl }} |
||||
style={[ |
||||
tw("rounded-md h-full absolute left-2 inset-y-1/4 rounded-md"), |
||||
{ width: 70, height: 100 }, |
||||
]} |
||||
/> |
||||
</View> |
||||
<Text |
||||
style={{ |
||||
fontSize: width / 27, |
||||
marginTop: 5, |
||||
color: "#05335F", |
||||
fontFamily: "bold", |
||||
}} |
||||
> |
||||
{video.name} |
||||
</Text> |
||||
|
||||
<View |
||||
style={tw("w-full flex flex-row justify-between items-center")} |
||||
> |
||||
<Text |
||||
style={[ |
||||
tw(""), |
||||
{ |
||||
marginTop: 10, |
||||
color: "#132F52", |
||||
fontFamily: "light", |
||||
fontSize: width / 37, |
||||
}, |
||||
]} |
||||
> |
||||
{video.price} |
||||
</Text> |
||||
<Text |
||||
style={{ |
||||
color: "#196EC0", |
||||
fontFamily: "light", |
||||
fontSize: width / 37, |
||||
marginTop: 5, |
||||
}} |
||||
> |
||||
{"پایه" + " " + video.grade} |
||||
</Text> |
||||
</View> |
||||
</Pressable> |
||||
); |
||||
}; |
||||
return ( |
||||
<View style={tw("w-full flex flex-col w-full")}> |
||||
<Header title="پربازدیدترین" /> |
||||
<FlatList |
||||
horizontal={true} |
||||
inverted={true} |
||||
style={tw("pb-1.5 mt-3 flex flex-row w-full")} |
||||
data={[0,1,2]} |
||||
renderItem={({ item }) => ( |
||||
<Video |
||||
video={{ |
||||
name: "ریاضی", |
||||
price: "145.000 تومان", |
||||
grade: "4", |
||||
imageUrl: "https://dnvn.ir/api/v1/file/2105", |
||||
poster: posterImage, |
||||
}} |
||||
/> |
||||
)} |
||||
keyExtractor={(item) => item} |
||||
/> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
export default MostViewedVideo; |
||||
@ -0,0 +1,43 @@ |
||||
import React from "react"; |
||||
import { View, Text, FlatList, TouchableOpacity } from "react-native"; |
||||
import { connect } from "react-redux"; |
||||
import tw from "tailwind-rn"; |
||||
import Header from "../../Home/components/Header"; |
||||
|
||||
const VerticalGradeFilter = ({ grades }) => { |
||||
const Grade = ({ grade }) => { |
||||
return ( |
||||
<TouchableOpacity |
||||
style={[ |
||||
tw("p-3 rounded-sm border border-gray-300 mt-2 ml-2"), |
||||
{ backgroundColor: "#f9f9f9" }, |
||||
]} |
||||
> |
||||
<Text style={[tw("text-xs text-gray-600"), { fontFamily: "light" }]}> |
||||
{grades[grade]} |
||||
</Text> |
||||
</TouchableOpacity> |
||||
); |
||||
}; |
||||
return ( |
||||
<View style={tw("w-full flex flex-col mt-3")}> |
||||
<Header title={"پایه تحصیلی"} /> |
||||
<FlatList |
||||
style={tw("flex flex-row w-full pb-1.5")} |
||||
horizontal={true} |
||||
inverted={true} |
||||
data={Object.keys(grades)} |
||||
renderItem={({ item }) => <Grade grade={item} />} |
||||
keyExtractor={(item) => item} |
||||
/> |
||||
|
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
grades: state.publicApi.grades, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(VerticalGradeFilter); |
||||
Loading…
Reference in new issue