Untitled

import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity, SafeAreaView } from 'react-native';

const TOURNAMENTS = [
      { id: '1', title: 'Taiwan Class Solo Battle', prize: '₹500', fee: 'Free', time: '10:00 PM' },
        { id: '2', title: 'Taiwan Class Duo Mismatch', prize: '₹1000', fee: '₹20', time: '08:00 PM' },
          { id: '3', title: 'Taiwan Class Squad Pro', prize: '₹2000', fee: '₹50', time: '06:00 PM' },
];

export default function App() {
      const renderItem = ({ item }) => (
            <View style={styles.card}>
                  <Text style={styles.matchTitle}>{item.title}</Text>
                        <View style={styles.detailsRow}>
                                <Text style={styles.detailText}>Prize: {item.prize}</Text>
                                        <Text style={styles.detailText}>Entry: {item.fee}</Text>
                                              </View>
                                                    <Text style={styles.timeText}>Time: {item.time}</Text>
                                                          <TouchableOpacity style={styles.button}>
                                                                  <Text style={styles.buttonText}>Join Now</Text>
                                                                        </TouchableOpacity>
                                                                            </View>
      );

        return (
                <SafeAreaView style={styles.container}>
                      <View style={styles.header}>
                              <Text style={styles.headerText}>TAIWAN CLASS</Text>
                                      <Text style={styles.subHeader}>Esports Tournaments</Text>
                                            </View>
                                                  
                                                        <FlatList
                                                                data={TOURNAMENTS}
                                                                        renderItem={renderItem}
                                                                                keyExtractor={item => item.id}
                                                                                        contentContainerStyle={{ padding: 20 }}
                                                                                              />
                                                                                                  </SafeAreaView>
        );
}

const styles = StyleSheet.create({
      container: { flex: 1, backgroundColor: '#121212' },
        header: { padding: 20, backgroundColor: '#ff4d4d', alignItems: 'center' },
          headerText: { fontSize: 24, fontWeight: 'bold', color: '#fff', letterSpacing: 2 },
            subHeader: { color: '#fff', opacity: 0.8 },
              card: { 
                    backgroundColor: '#1e1e1e', 
                        padding: 15, 
                            borderRadius: 10, 
                                marginBottom: 15,
                                    borderLeftWidth: 5,
                                        borderLeftColor: '#ff4d4d'
              },
                matchTitle: { color: '#fff', fontSize: 18, fontWeight: 'bold' },
                  detailsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 },
                    detailText: { color: '#bbb' },
                      timeText: { color: '#ff4d4d', marginTop: 5, fontWeight: 'bold' },
                        button: { 
                                backgroundColor: '#ff4d4d', 
                                    padding: 10, 
                                        borderRadius: 5, 
                                            marginTop: 10, 
                                                alignItems: 'center' 
                        },
                          buttonText: { color: '#fff', fontWeight: 'bold' }
});
import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity, SafeAreaView } from 'react-native';

const TOURNAMENTS = [
      { id: '1', title: 'Taiwan Class Solo Battle', prize: '₹500', fee: 'Free', time: '10:00 PM' },
        { id: '2', title: 'Taiwan Class Duo Mismatch', prize: '₹1000', fee: '₹20', time: '08:00 PM' },
          { id: '3', title: 'Taiwan Class Squad Pro', prize: '₹2000', fee: '₹50', time: '06:00 PM' },
];

export default function App() {
      const renderItem = ({ item }) => (
            <View style={styles.card}>
                  <Text style={styles.matchTitle}>{item.title}</Text>
                        <View style={styles.detailsRow}>
                                <Text style={styles.detailText}>Prize: {item.prize}</Text>
                                        <Text style={styles.detailText}>Entry: {item.fee}</Text>
                                              </View>
                                                    <Text style={styles.timeText}>Time: {item.time}</Text>
                                                          <TouchableOpacity style={styles.button}>
                                                                  <Text style={styles.buttonText}>Join Now</Text>
                                                                        </TouchableOpacity>
                                                                            </View>
      );

        return (
                <SafeAreaView style={styles.container}>
                      <View style={styles.header}>
                              <Text style={styles.headerText}>TAIWAN CLASS</Text>
                                      <Text style={styles.subHeader}>Esports Tournaments</Text>
                                            </View>
                                                  
                                                        <FlatList
                                                                data={TOURNAMENTS}
                                                                        renderItem={renderItem}
                                                                                keyExtractor={item => item.id}
                                                                                        contentContainerStyle={{ padding: 20 }}
                                                                                              />
                                                                                                  </SafeAreaView>
        );
}

const styles = StyleSheet.create({
      container: { flex: 1, backgroundColor: '#121212' },
        header: { padding: 20, backgroundColor: '#ff4d4d', alignItems: 'center' },
          headerText: { fontSize: 24, fontWeight: 'bold', color: '#fff', letterSpacing: 2 },
            subHeader: { color: '#fff', opacity: 0.8 },
              card: { 
                    backgroundColor: '#1e1e1e', 
                        padding: 15, 
                            borderRadius: 10, 
                                marginBottom: 15,
                                    borderLeftWidth: 5,
                                        borderLeftColor: '#ff4d4d'
              },
                matchTitle: { color: '#fff', fontSize: 18, fontWeight: 'bold' },
                  detailsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 },
                    detailText: { color: '#bbb' },
                      timeText: { color: '#ff4d4d', marginTop: 5, fontWeight: 'bold' },
                        button: { 
                                backgroundColor:import React, { useState } from 'react';
                                import { StyleSheet, Text, View, FlatList, TouchableOpacity, SafeAreaView } from 'react-native';
                                
                                const TOURNAMENTS = [
                                      { id: '1', title: 'Taiwan Class Solo Battle', prize: '₹500', fee: 'Free', time: '10:00 PM' },
                                        { id: '2', title: 'Taiwan Class Duo Mismatch', prize: '₹1000', fee: '₹20', time: '08:00 PM' },
                                          { id: '3', title: 'Taiwan Class Squad Pro', prize: '₹2000', fee: '₹50', time: '06:00 PM' },
                                ];

                                export default function App() {
                                      const renderItem = ({ item }) => (
                                            <View style={styles.card}>
                                                  <Text style={styles.matchTitle}>{item.title}</Text>
                                                        <View style={styles.detailsRow}>
                                                                <Text style={styles.detailText}>Prize: {item.prize}</Text>
                                                                        <Text style={styles.detailText}>Entry: {item.fee}</Text>
                                                                              </View>
                                                                                    <Text style={styles.timeText}>Time: {item.time}</Text>
                                                                                          <TouchableOpacity style={styles.button}>
                                                                                                  <Text style={styles.buttonText}>Join Now</Text>
                                                                                                        </TouchableOpacity>
                                                                                                            </View>
                                      );

                                        return (
                                                <SafeAreaView style={styles.container}>
                                                      <View style={styles.header}>
                                                              <Text style={styles.headerText}>TAIWAN CLASS</Text>
                                                                      <Text style={styles.subHeader}>Esports Tournaments</Text>
                                                                            </View>
                                                                                  
                                                                                        <FlatList
                                                                                                data={TOURNAMENTS}
                                                                                                        renderItem={renderItem}
                                                                                                                keyExtractor={item => item.id}
                                                                                                                        contentContainerStyle={{ padding: 20 }}
                                                                                                                              />
                                                                                                                                  </SafeAreaView>
                                        );
                                }

                                const styles = StyleSheet.create({
                                      container: { flex: 1, backgroundColor: '#121212' },
                                        header: { padding: 20, backgroundColor: '#ff4d4d', alignItems: 'center' },
                                          headerText: { fontSize: 24, fontWeight: 'bold', color: '#fff', letterSpacing: 2 },
                                            subHeader: { color: '#fff', opacity: 0.8 },
                                              card: { 
                                                    backgroundColor: '#1e1e1e', 
                                                        padding: 15, 
                                                            borderRadius: 10, 
                                                                marginBottom: 15,
                                                                    borderLeftWidth: 5,
                                                                        borderLeftColor: '#ff4d4d'
                                              },
                                                matchTitle: { color: '#fff', fontSize: 18, fontWeight: 'bold' },
                                                  detailsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 },
                                                    detailText: { color: '#bbb' },
                                                      timeText: { color: '#ff4d4d', marginTop: 5, fontWeight: 'bold' },
                                                        button: { 
                                                                backgroundColor: '#ff4d4d', 
                                                                    padding: 10, 
                                                                        borderRadius: 5, 
                                                                            marginTop: 10, 
                                                                                alignItems: 'center' 
                                                        },
                                                          buttonText: { color: '#fff', fontWeight: 'bold' }
                                });
                                
                                                        }
                                              }
                                })
                                        )
                                      )
                                }
                                ]                                            marginTop: 10, 
                                                alignItems: 'center' 
                        },
                          buttonText: { color: '#fff', fontWeight: 'bold' }
});

                        }
              }
})
        )
      )
}
]
                        }
              }
})
        )
      )
}
]