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.
126 lines
2.7 KiB
126 lines
2.7 KiB
import { Button, FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { SearchBar } from '@rneui/base';
|
|
import { TouchableHighlight } from 'react-native-gesture-handler';
|
|
import React from 'react';
|
|
|
|
|
|
|
|
export default function Team_Browser(props: { navigation: any }) {
|
|
const { navigation } = props;
|
|
type ItemProps = { title: string };
|
|
const Item = ({title}: ItemProps) => (
|
|
<View style={styles.item}>
|
|
<Text style={styles.title}>{title}</Text>
|
|
</View>
|
|
);
|
|
const DATA = [
|
|
{
|
|
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
|
|
title: 'First Item',
|
|
},
|
|
{
|
|
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
|
|
title: 'Second Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d71',
|
|
title: 'Third Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d78',
|
|
title: 'c Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d76',
|
|
title: 'b Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d75',
|
|
title: 'a Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d73',
|
|
title: 's Item',
|
|
},
|
|
];
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={styles.card}>
|
|
<Text style={styles.text_title}> Browse teams </Text>
|
|
<SearchBar
|
|
platform="default"
|
|
lightTheme
|
|
/>
|
|
<FlatList data={DATA} renderItem={({ item }) =>
|
|
<TouchableHighlight onPress={() => navigation.navigate('Info', { "team": item })}>
|
|
<Item title={item.title} />
|
|
</TouchableHighlight>
|
|
}/>
|
|
</View>
|
|
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
item: {
|
|
backgroundColor: '#C5C5C5',
|
|
padding: 20,
|
|
marginVertical: 8,
|
|
marginHorizontal: 16,
|
|
},
|
|
title: {
|
|
fontSize: 32,
|
|
},
|
|
|
|
search: {
|
|
backgroundColor:'#fff',
|
|
lightTheme: 1,
|
|
},
|
|
|
|
button: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 32,
|
|
borderRadius: 10,
|
|
elevation: 3,
|
|
backgroundColor: '#BF181D',
|
|
},
|
|
|
|
button_text: {
|
|
color:'#fff',
|
|
fontSize:15,
|
|
},
|
|
|
|
text_title: {
|
|
fontSize: 24,
|
|
textAlign:'center',
|
|
padding:10,
|
|
},
|
|
|
|
container: {
|
|
backgroundColor: "#C5C5C5",
|
|
flex:1,
|
|
justifyContent:'center',
|
|
alignItems:'center'
|
|
|
|
},
|
|
|
|
card: {
|
|
flexDirection:'column',
|
|
height: "80%",
|
|
width: "80%",
|
|
backgroundColor: "#fff",
|
|
borderRadius: 15,
|
|
padding: 10,
|
|
elevation: 10,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 3 },
|
|
shadowOpacity: 0.5,
|
|
shadowRadius: 5,
|
|
},
|
|
|
|
});
|