Feature/ components paciente #9

mobile/DiarioSaude/src/components/groupItemPacient/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { View, Image, Text } from "react-native";
+import styles from "./styles";
+import { RectButton } from "react-native-gesture-handler";
+
+function GroupItemPacient() {
+  return (
+    <View style={styles.container}>
+      <View style={styles.profile}>
+        <View style={styles.profileInfo}>
+          <Text style={styles.name}>Nome</Text>
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <View style={styles.buttonsContainer}>
+          <RectButton style={styles.contactButton}>
+            <Text style={styles.contactButtonText}>Entrar em contato</Text>
+          </RectButton>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default GroupItemPacient;

mobile/DiarioSaude/src/components/groupItemPacient/styles.ts

@@ -0,0 +1,105 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#e6e6f0",
+    borderRadius: 8,
+    marginBottom: 16,
+    overflow: "hidden",
+    alignItems: "center"
+  },
+
+  profile: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 24
+  },
+
+  avatar: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: "#eee"
+  },
+
+  profileInfo: {
+    marginLeft: 0
+  },
+
+  name: {
+    color: "#32264d",
+    fontSize: 20
+  },
+
+  subject: {
+    color: "#6a6180",
+    fontSize: 12,
+    marginTop: 4
+  },
+
+  bio: {
+    marginHorizontal: 24,
+
+    fontSize: 14,
+    lineHeight: 24,
+    color: "#6a6180"
+  },
+
+  footer: {
+    backgroundColor: "#fafafc",
+    padding: 24,
+    alignItems: "center",
+    marginTop: 24
+  },
+
+  price: {
+    color: "#6a6180",
+    fontSize: 14
+  },
+
+  priceValue: {
+    color: "#8257e5",
+    fontSize: 16
+  },
+
+  buttonsContainer: {
+    flexDirection: "row",
+    marginTop: 16
+  },
+
+  favoriteButton: {
+    backgroundColor: "#8257e5",
+    width: 56,
+    height: 56,
+    borderRadius: 8,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 8
+  },
+
+  favorited: {
+    backgroundColor: "#e33d3d"
+  },
+
+  contactButton: {
+    backgroundColor: "#0124A2",
+    flex: 1,
+    height: 56,
+    borderRadius: 8,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 8
+  },
+
+  contactButtonText: {
+    color: "#fff",
+
+    fontSize: 16,
+    marginLeft: 16
+  }
+});
+
+export default styles;

mobile/DiarioSaude/src/pages/Pacient/index.tsx

@@ -1,20 +1,20 @@
 import React, { useContext } from "react";
-import { Text, View, Button } from "react-native";
+import { Text, View, Button, ScrollView } from "react-native";
 import styles from "../SignupMedic/styles";
 import { RectButton } from "react-native-gesture-handler";
 import AuthContext from "../../contexts/auth";
 import AsyncStorage from "@react-native-community/async-storage";
+import GroupItemPacient from "../../components/groupItemPacient";
 
 function Pacient() {
   const storagedUser = AsyncStorage.getItem("@DiarioSaude:user");
 
   return (
-    <View style={styles.container}>
-      <Text>Paciente</Text>
-      <RectButton>
-        <Text>Sair</Text>
-      </RectButton>
-    </View>
+    <ScrollView>
+      <GroupItemPacient />
+      <GroupItemPacient />
+      <GroupItemPacient />
+    </ScrollView>
   );
 }