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, 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;
|
|
|