text: import { StyleSheet, View, Text, Image, SafeAreaView, TouchableOpacity } from 'react-native';
  import { Ionicons, MaterialIcons } from '@expo/vector-icons';
  import { LinearGradient } from 'expo-linear-gradient';
  import Relogio from './relogio';
  import React from 'react';
  
  export default function({navigation}) {
  
    return (
      <SafeAreaView style={{flex: 1, alignItems: 'center', paddingTop: 20, backgroundColor:'#426366'}}>
      <LinearGradient colors={['#426366','#243B3D','#182526','#0C0E0F']} style={{width:'100%',height:'100%',flex: 1, alignItems: 'center', paddingTop:"10%",}}>
  
        <View style={styles.head}></View>
  
        <Relogio/>
  
        <View style={{position:'absolute',bottom:0,width:'100%',height:'67%',alignItems:'center',justifyContent:'flex-end',}}>
        
          <View style={{paddingRight:20,paddingBottom:5,flexDirection:"row-reverse"}}>
            <TouchableOpacity onPress={()=> navigation.navigate('Verprazos')} style={styles.ver_prazo_btn}>
  
              <Text style={styles.prazo_text}>Prazos</Text>
              <MaterialIcons name="schedule" size={32} color="#ADCCCC" style={{position:'absolute', right:50, top:23 }}/>
  
            </TouchableOpacity>        
          </View>
  
          <View style={{width:'90%',paddingBottom:10,paddingTop:10}}>
            <TouchableOpacity onPress={()=> navigation.navigate('Tarefas')} style={styles.tarefas}>
  
              <Text style={{ left:30, fontSize: 24, fontWeight: '700', color: '#D8D8C3',}}>Tarefas</Text>
              <Ionicons name='list-circle-outline' size={34} color="#D8D8C3" style={{ position:'absolute', right:25, top:23 }}/>
  
            </TouchableOpacity>
          </View>
          
          <View style={{paddingBottom:30,}}>
          
            <View style={{paddingLeft:20,flexDirection:"row-reverse",paddingBottom:2,paddingTop:5}}>
  
                <TouchableOpacity style={styles.ocorr_btn} onPress={()=> navigation.navigate('Add_ocorrencia')}>
                    <Text style={styles.prazo_text2}>Adicionar ocorrencia</Text>                  
                    <Ionicons name="add-circle-outline" size={34} color="#C2C2D3" style={styles.icone}/>
  
                </TouchableOpacity>
            </View>
  
            <View  style={{paddingLeft:20,flexDirection:"row-reverse",paddingBottom:5,}}>
  
                <TouchableOpacity style={styles.ver_ocorr_btn} onPress={()=> navigation.navigate('Ocorrencias')}>
                  <Text style={styles.prazo_text2}>Ver ocorrencias</Text>
                  <Ionicons name="chevron-down-circle-outline" size={34} color="#C2C2D3" style={styles.icone}/>  
  
                </TouchableOpacity>
            </View>
  
          </View>
        
        </View>
  
        <Image source={require('../assets/gotask_logo.png')} style={{position:'absolute',top:"5%",width:'50%',resizeMode:'contain'}}/>
      </LinearGradient>
      </SafeAreaView>
    );
  }
  
  const styles = StyleSheet.create({
  linha:{
    height:1, 
    width:'100%',
    top:-17,
    backgroundColor:'grey',
  },
  linha2:{
    width:'100%',
    height:1,
    backgroundColor:'dimgray'
  },
  head: {
    paddingBottom:30,
    width:100,
    height:'13%',
  },
  prazo_text:{
    left:30,
    fontSize: 24,
    fontWeight: '700',
    color: '#ADCCCC',
  },
  prazo_text2:{
    left:50,
    fontSize: 24,
    fontWeight: '700',
    color: '#C2C2D3',
  },
  prazo_btn:{
    flexDirection:'row',
    borderTopLeftRadius:10,
    alignItems:'center',
    backgroundColor:'#333F3D',
    width: '100%',
    height: 70,
  },
  ver_prazo_btn:{
    flexDirection:'row',
    borderBottomLeftRadius:10,
    borderTopLeftRadius:10,
    alignItems:'center',
    backgroundColor:'#2C3F3C',
    width: '100%',
    height: 80,
  },
  icone:{
    position:'absolute',
    right:25,
    top:18
  },
  tarefas:{
    marginTop:10,
    marginBottom:10,
    backgroundColor:'#38352A',
    flexDirection:'row',
    alignItems:'center',
    borderRadius:15,
    width: '100%',
    height: 80,
  },
  ocorr_btn:{
    flexDirection:'row',
    borderTopRightRadius:20,
    alignItems:'center',
    backgroundColor:'#35394C',
    width: '100%',
    height: 70,
  },
  ver_ocorr_btn:{
    flexDirection:'row',
    borderBottomRightRadius:20,
    alignItems:'center',
    backgroundColor:'#35394C',
    width: '100%',
    height: 70,
  },
  });