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;