import React from 'react'; import { Image, View, ScrollView, Text, StyleSheet, Dimensions } from 'react-native'; import MapView, { Marker } from 'react-native-maps'; import { Feather, FontAwesome } from '@expo/vector-icons'; import mapMarkerImg from '../images/map-marker.png'; import { RectButton } from 'react-native-gesture-handler'; export default function OrphanageDetails() { return ( <ScrollView style={styles.container}> <View style={styles.imagesContainer}> <ScrollView horizontal pagingEnabled> <Image style={styles.image} source={{ uri: 'https://fmnova.com.br/images/noticias/safe_image.jpg' }} /> <Image style={styles.image} source={{ uri: 'https://fmnova.com.br/images/noticias/safe_image.jpg' }} /> <Image style={styles.image} source={{ uri: 'https://fmnova.com.br/images/noticias/safe_image.jpg' }} /> </ScrollView> </View> <View style={styles.detailsContainer}> <Text style={styles.title}>Orf. Esperança</Text> <Text style={styles.description}>Presta assistência a crianças de 06 a 15 anos que se encontre em situação de risco e/ou vulnerabilidade social.</Text> <View style={styles.mapContainer}> <MapView initialRegion={{ latitude: -27.2092052, longitude: -49.6401092, latitudeDelta: 0.008, longitudeDelta: 0.008, }} zoomEnabled={false} pitchEnabled={false} scrollEnabled={false} rotateEnabled={false} style={styles.mapStyle} > <Marker icon={mapMarkerImg} coordinate={{ latitude: -27.2092052, longitude: -49.6401092 }} /> </MapView> <View style={styles.routesContainer}> <Text style={styles.routesText}>Ver rotas no Google Maps</Text> </View> </View> <View style={styles.separator} /> <Text style={styles.title}>Instruções para visita</Text> <Text style={styles.description}>Venha como se sentir a vontade e traga muito amor e paciência para dar.</Text> <View style={styles.scheduleContainer}> <View style={[styles.scheduleItem, styles.scheduleItemBlue]}> <Feather name="clock" size={40} color="#2AB5D1" /> <Text style={[styles.scheduleText, styles.scheduleTextBlue]}>Segunda à Sexta 8h às 18h</Text> </View> <View style={[styles.scheduleItem, styles.scheduleItemGreen]}> <Feather name="info" size={40} color="#39CC83" /> <Text style={[styles.scheduleText, styles.scheduleTextGreen]}>Atendemos fim de semana</Text> </View> </View> <RectButton style={styles.contactButton} onPress={() => {}}> <FontAwesome name="whatsapp" size={24} color="#FFF" /> <Text style={styles.contactButtonText}>Entrar em contato</Text> </RectButton> </View> </ScrollView> ) } const styles = StyleSheet.create({ container: { flex: 1, }, imagesContainer: { height: 240, }, image: { width: Dimensions.get('window').width, height: 240, resizeMode: 'cover', }, detailsContainer: { padding: 24, }, title: { color: '#4D6F80', fontSize: 30, fontFamily: 'Nunito_700Bold', }, description: { fontFamily: 'Nunito_600SemiBold', color: '#5c8599', lineHeight: 24, marginTop: 16, }, mapContainer: { borderRadius: 20, overflow: 'hidden', borderWidth: 1.2, borderColor: '#B3DAE2', marginTop: 40, backgroundColor: '#E6F7FB', }, mapStyle: { width: '100%', height: 150, }, routesContainer: { padding: 16, alignItems: 'center', justifyContent: 'center', }, routesText: { fontFamily: 'Nunito_700Bold', color: '#0089a5' }, separator: { height: 0.8, width: '100%', backgroundColor: '#D3E2E6', marginVertical: 40, }, scheduleContainer: { marginTop: 24, flexDirection: 'row', justifyContent: 'space-between' }, scheduleItem: { width: '48%', padding: 20, }, scheduleItemBlue: { backgroundColor: '#E6F7FB', borderWidth: 1, borderColor: '#B3DAE2', borderRadius: 20, }, scheduleItemGreen: { backgroundColor: '#EDFFF6', borderWidth: 1, borderColor: '#A1E9C5', borderRadius: 20, }, scheduleText: { fontFamily: 'Nunito_600SemiBold', fontSize: 16, lineHeight: 24, marginTop: 20, }, scheduleTextBlue: { color: '#5C8599' }, scheduleTextGreen: { color: '#37C77F' }, contactButton: { backgroundColor: '#3CDC8C', borderRadius: 20, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 56, marginTop: 40, }, contactButtonText: { fontFamily: 'Nunito_800ExtraBold', color: '#FFF', fontSize: 16, marginLeft: 16, } })