feat: add name and email inputs on profile screen

src/components/Input.tsx

@@ -1,27 +1,30 @@
-import { Input as GSInput, InputField } from "@gluestack-ui/themed";
+import { Input as GSInput, InputField } from '@gluestack-ui/themed';
-import { ComponentProps } from "react";
+import { ComponentProps } from 'react';
 
-type Props = ComponentProps<typeof InputField>;
+type Props = ComponentProps<typeof InputField> & {
+  isReadOnly?: boolean;
+};
 
-export function Input({ ...others }: Props) {
+export function Input({ isReadOnly = false, ...others }: Props) {
   return (
     <GSInput
-      bg="$gray700"
       h="$14"
-      px="$4"
       borderColor="$gray700"
       borderWidth="$1"
       borderRadius="$md"
       $focus={{
-        borderColor: "$green500"
+        borderColor: '$green500',
       }}
-    >
+      isReadOnly={isReadOnly}
+      opacity={isReadOnly ? 0.5 : 1}>
       <InputField
+        bg="$gray700"
+        px="$4"
         color="$white"
         fontFamily="$body"
         placeholderTextColor="$gray300"
         {...others}
       />
     </GSInput>
-  )
+  );
 }

src/screens/Profile.tsx

@@ -3,6 +3,7 @@ import { Center, Text, VStack } from '@gluestack-ui/themed';
 
 import { ScreenHeader } from '@components/ScreenHeader';
 import { UserPhoto } from '@components/UserPhoto';
+import { Input } from '@components/Input';
 
 export function Profile() {
   return (
@@ -22,6 +23,11 @@ export function Profile() {
               Alterar foto
             </Text>
           </TouchableOpacity>
+
+          <Center w="$full" gap="$4">
+            <Input placeholder="Nome" bg="$gray600" />
+            <Input value="john.doe@email.com" bg="$gray600" isReadOnly />
+          </Center>
         </Center>
       </ScrollView>
     </VStack>