62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
import { View, ScrollView, StyleSheet } from 'react-native';
|
|
import { Text, Card } from 'react-native-paper';
|
|
import { useLocalSearchParams } from 'expo-router';
|
|
import useLocationStore from '@/store';
|
|
|
|
export default function Location() {
|
|
const { id } = useLocalSearchParams();
|
|
const location = useLocationStore((state) =>
|
|
state.locations.find((loc) => loc.id == id)
|
|
);
|
|
|
|
if (!location) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.text}>Brak lokalizacji - {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.description}</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>
|
|
</Card.Content>
|
|
</Card>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#25292e',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
text: {
|
|
color: '#fff',
|
|
},
|
|
}); |