53 lines
1.5 KiB
TypeScript

import { StackNavigationProp } from "@react-navigation/stack";
import React from "react";
import { StyleSheet, TouchableOpacity, View } from "react-native";
import sampleVideoImage from "../../assets/sample_session.png";
import VideoCard from "../../component/video-card/video-card";
// Define the types for your navigation stack
type VideoStackParamList = {
Video: undefined; // Add other screens as needed
};
type VideoFeedNavigationProp = StackNavigationProp<
VideoStackParamList,
"Video"
>;
// Define the props for VideoFeed component
interface VideoFeedProps {
navigation: VideoFeedNavigationProp;
}
const VideoFeed: React.FC<VideoFeedProps> = ({ navigation }) => {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => navigation.push("Video")}>
<VideoCard
playerName="Dean Machine"
location="Family Billiards, San Francisco"
gameType="Straight Pool"
makePercent="34"
medianRun="7.3"
duration="5:03:10"
shotPacing="0:00:26"
imageURL={sampleVideoImage}
videoName="Dusting off the chalk"
lastPlayed="Today at 2:37pm"
profileImageURL="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-File.png"
locationIconURL="https://www.shutterstock.com/image-vector/blank-map-marker-vector-illustration-260nw-1150566347.jpg"
/>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f0f0f0", // Light gray background
alignItems: "center",
},
});
export default VideoFeed;