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

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;