alteração da tela de prestadores

Julio-Pupim · Nov 7, 2024 · 2316b12 · 2316b12
1 parent 0a8d7ca
commit 2316b12
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 18 deletions.
diff --git a/frontend/app/(extra)/prestador.tsx b/frontend/app/(extra)/prestador.tsx
@@ -2,6 +2,7 @@ import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Image, StatusBar}
 import React from 'react';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
+import { router } from 'expo-router';
 
 
 const Prestadores = () => {
@@ -17,33 +18,44 @@ const Prestadores = () => {
         { id: '6', nome: 'Sebastião', titulo: 'Instalação de Grama e Tapetes Verdes' },    
     ]
 
-    const prestadorClick = () =>{  
-      navigation.navigate('');
+    const servicosPrestadorClick = () =>{  
+     router.navigate('/(extra)servicosPrestador');
+    };
+    const inicioClick =()=>{
+      router.navigate('/(tabs)/inicio');
     };
 
     return(
 
     <View style = {styles.container}>
-      <StatusBar hidden/>
       <View style = {styles.topoTela}>
-        <View style={styles.userText}>
-          <Ionicons name="person-circle-outline" size={35} color="white" />
-          <Text style={styles.userName}>Prestadores</Text>
-        </View>
-      </View>
+        <TouchableOpacity onPress={inicioClick}>
+          <Ionicons name="arrow-back-outline" size={30} color="white" />
+        </TouchableOpacity>
+
+         <View style={styles.centralTitulo}>
+            <Ionicons name="bag-handle-outline" size={35} color="white" />
+            <Text style={styles.userName}>Prestadores</Text>
+         </View>
+      </View> 
 
         <ScrollView>
            {tipoPrestador.map(prestador => (
-            <TouchableOpacity key={prestador.id} style = {styles.header} onPress={prestadorClick}>
+            <View style = {styles.header}>
               <View style = {styles.posicao}>
               <Image source={require('../../assets/images/prestador.jpg')} 
               style = {styles.imagem}/>
               <View style = {styles.textoContainer}>
                 <Text style = {styles.nomePrestador}>Nome:{prestador.nome} </Text>
                 <Text style = {styles.infoPrestador}>{prestador.titulo}</Text> 
-               </View>
-               </View>
-             </TouchableOpacity>
+              </View>
+              </View>
+              <View style={styles.botaoServicos} >
+                <TouchableOpacity key={prestador.id} onPress={servicosPrestadorClick}>
+                  <Text  style={styles.textServicos} >Mais serviços</Text>
+                </TouchableOpacity>
+              </View>
+             </View>
            ))}   
         </ScrollView>
 
@@ -64,7 +76,10 @@ const styles = StyleSheet.create({
       borderBottomLeftRadius: 20,
       borderBottomRightRadius: 20,
       padding: 25,
-      marginBottom: 2,
+      marginBottom: 20,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
     },
     userText: {
       flexDirection: 'row',
@@ -82,14 +97,16 @@ const styles = StyleSheet.create({
         flexDirection: 'column',
         justifyContent: 'space-around',
         padding: 19,
-        height: 100,
+        height: 120,
         margin: 4,
         borderRadius: 10,
     },
     imagem:{
         flexDirection: 'row',
         width: 60,
         height: 60, 
+        borderWidth: 1,
+        borderRadius: 10
     },
     nomePrestador:{
       fontSize: 13,
@@ -106,6 +123,25 @@ const styles = StyleSheet.create({
     },
     posicao:{
       flexDirection: 'row'
+    },
+    textServicos:{
+      fontSize: 12,
+      fontWeight: 'bold',
+
+    },
+    botaoServicos:{
+      backgroundColor: '#FFD700',
+      borderRadius: 5,
+      marginVertical: 10,
+      borderColor: 'black',
+      borderWidth: 1,
+      alignItems: 'center'
+    },
+    centralTitulo:{
+      margin:'auto',
+      flexDirection:'row',
+      alignItems:'center',
+      justifyContent:'center'
     }
 
 });

diff --git a/frontend/app/(extra)/servicoPrestador.tsx b/frontend/app/(extra)/servicoPrestador.tsx
diff --git a/frontend/app/(tabs)/inicio.tsx b/frontend/app/(tabs)/inicio.tsx
@@ -1,14 +1,17 @@
-import React from 'react';
-import { View, Text, ScrollView, StyleSheet, Pressable } from 'react-native';
+import React,{useState} from 'react';
+import { View, Text, ScrollView, StyleSheet, Pressable, TextInput } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { StatusBar } from 'expo-status-bar';
 import { router } from 'expo-router';
+import Pesquisa from '../search/[query]';
+//import { useState } from 'react';
 
 const Inicio = () => {
   const promocoes = [
     { id: '1', titulo: 'Serviços de jardinagem', desconto: '20% de desconto' },
     { id: '2', titulo: 'Reparo de celulares', desconto: '15% de desconto' },
   ];
+  const [searchText, setSearchText] = useState('');
 
   const servicosFrequentes = [
     { id: '1', descricao: 'Encanador', icon: 'construct-outline' },
@@ -49,6 +52,9 @@ const Inicio = () => {
   const pesquisaClick = () => {
     router.navigate('/(tabs)/perfil');
   };
+  const prestadorClick =() =>{
+    router.navigate('/(extra)/prestador');
+  }
 
 
   return (
@@ -63,9 +69,18 @@ const Inicio = () => {
 
       <View>
         <Text style={styles.greetings}>Olá, usuário!</Text>
-        <Text style={styles.subText}>O que você procura hoje?</Text>
       </View>
 
+      <View style={styles.pesquisa}>
+        <Ionicons name = "search" size = {20} color = "black" style={styles.iconPesquisa} />
+        <TextInput
+          style={styles.textoPesquisa}  
+          placeholder="O que você procura hoje?" 
+          value={searchText}
+          onChangeText={setSearchText}  
+        />
+        </View>
+
       <View style={styles.promocoesContainer}>
         {promocoes.map(promo => (
           <Pressable key={promo.id} style={styles.promoCard} onPress={pesquisaClick}>
@@ -78,7 +93,7 @@ const Inicio = () => {
       <Text style={styles.sectionTitle}>Serviços frequentes</Text>
       <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.servicosScroll}>
         {servicosFrequentes.map(servico => (
-          <Pressable key={servico.id} style={styles.servicoItem} onPress={agendaClick}>
+          <Pressable key={servico.id} style={styles.servicoItem} onPress={prestadorClick}>
             <Ionicons name={servico.icon} size={35} color="black"/>
             <Text style={styles.servicoText}>{servico.descricao}</Text>
           </Pressable>
@@ -182,6 +197,24 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'bold',
   },
+  pesquisa:{
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 10, 
+    backgroundColor: '#f0f0f0',
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    marginHorizontal: 20,
+    marginBottom: 20,
+    height: 40,
+  },
+  iconPesquisa: {
+    marginRight: 10
+  },
+  textoPesquisa:{
+    flex: 1,
+    fontSize: 16,
+  },
 });
 
 export default Inicio;