import React, { useState } from 'react'; import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native'; import { Calendar, Clock, Trophy, BarChart2, Users, MapPin, Plus, Play, Star } from "lucide-react-native"; export default function Home() { const [activeTab, setActiveTab] = useState('reservations'); // Mock data for reservations const upcomingReservations = [ { id: 1, date: 'May 15', time: '18:00', court: 'Court 3', duration: '1h' }, { id: 2, date: 'May 18', time: '14:30', court: 'Court 1', duration: '1.5h' }, ]; // Mock data for recent matches const recentMatches = [ { id: 1, opponent: 'Alex Johnson', result: 'Win', score: '6-4, 7-5', date: 'May 10' }, { id: 2, opponent: 'Maria Garcia', result: 'Loss', score: '4-6, 3-6', date: 'May 5' }, ]; // Mock data for performance stats const performanceStats = [ { title: 'Win Rate', value: '72%', change: '+5%' }, { title: 'Aces/Match', value: '4.2', change: '+0.8' }, { title: '1st Serve %', value: '68%', change: '+3%' }, ]; // Mock data for rankings const rankings = [ { id: 1, name: 'You', rank: 1, wins: 18, losses: 7, avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop' }, { id: 2, name: 'Alex Johnson', rank: 2, wins: 15, losses: 10, avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop' }, { id: 3, name: 'Maria Garcia', rank: 3, wins: 14, losses: 11, avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=100&h=100&fit=crop' }, ]; return ( {/* Header */} TennisHub Pro Welcome back, Player! {/* Tab Navigation */} setActiveTab('reservations')} > Reservations setActiveTab('matches')} > Matches setActiveTab('rankings')} > Rankings {/* Content Area */} {activeTab === 'reservations' && ( <> {/* Upcoming Reservations */} Upcoming Reservations View All Court Reservation May 15 • 18:00 - 19:00 Tennis Center • Court 3 Details New Reservation {/* Quick Stats */} This Month Hours Played 12.5 Win Rate 72% )} {activeTab === 'matches' && ( <> {/* Record Match */} Record New Match {/* Recent Matches */} Recent Matches {recentMatches.map((match) => ( {match.opponent} {match.result} {match.score} {match.date} ))} View All Matches {/* Performance Stats */} Performance Stats {performanceStats.map((stat, index) => ( {stat.title} {stat.value} ({stat.change}) ))} Detailed Analytics )} {activeTab === 'rankings' && ( <> {/* Your Rank */} Your Ranking #1 You 18 Wins • 7 Losses {/* Leaderboard */} Leaderboard {rankings.map((player) => ( {player.rank} {player.name} {player.wins}W • {player.losses}L ))} )} {/* Bottom Navigation */} Reserve Matches Rankings Courts ); }

React Native TennisHub Pro App Preview

Project Screens for TennisHub Pro App