67 lines
2.0 KiB
JavaScript
67 lines
2.0 KiB
JavaScript
import { View, ScrollView, StyleSheet } from 'react-native';
|
|
import { Text, Card } from 'react-native-paper';
|
|
import { useLocalSearchParams } from 'expo-router';
|
|
import { Locations } from '@/constants/Locations';
|
|
|
|
export default function Location() {
|
|
const { id } = useLocalSearchParams();
|
|
const location = Locations.find(loc => loc.id == id);
|
|
|
|
if (!location) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.text}>Brak lokalizaji - {id}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView>
|
|
<Card style={{ margin: 10}}>
|
|
<Card.Cover style={{marginBottom: 10}} source={{ uri: location.image }} />
|
|
<Card.Content style={{marginBottom: 10}}>
|
|
<Text variant="headlineLarge" style={{marginBottom: 10}}>
|
|
{location.name}
|
|
</Text>
|
|
<Text variant="headlineLarge" style={{marginBottom: 10}}>
|
|
Opis:
|
|
</Text>
|
|
<Text variant="bodyMedium">
|
|
{location.longDescription}
|
|
</Text>
|
|
</Card.Content>
|
|
|
|
<Card.Content>
|
|
<Text variant="headlineLarge" style={{marginBottom: 10}}>
|
|
Statystyki:
|
|
</Text>
|
|
<Text variant="bodyMedium" style={{marginBottom: 10}}>
|
|
Powierzchnia: {location.area} km²
|
|
</Text>
|
|
<Text variant="bodyMedium" style={{marginBottom: 10}}>
|
|
Ludność: {location.population} osób
|
|
</Text>
|
|
<Text variant="bodyMedium" style={{marginBottom: 10}}>
|
|
Gęstość zaludnienia: {location.density} osób/km²
|
|
</Text>
|
|
<Text variant="bodyMedium" style={{marginBottom: 10}}>
|
|
Wysokość nad poziomem morza: {location.elevation} m n.p.m.
|
|
</Text>
|
|
</Card.Content>
|
|
</Card>
|
|
</ScrollView></View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#25292e',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
text: {
|
|
color: '#fff',
|
|
},
|
|
});
|