From 5dec1645bd2ac2ebf3df1476f59b48d7a38966ca Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Thu, 24 Oct 2024 10:48:41 -0300
Subject: [PATCH] feat: create button component

---
 src/components/Button.tsx | 34 ++++++++++++++++++++++++++++++++++
 src/screens/SignIn.tsx    |  5 +++++
 2 files changed, 39 insertions(+)
 create mode 100644 src/components/Button.tsx

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..1a0953e
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,34 @@
+import { ButtonSpinner, Button as GSButton, Text } from "@gluestack-ui/themed";
+import { ComponentProps } from "react";
+
+type Props = ComponentProps<typeof GSButton> & {
+  title: string,
+  isLoading?: boolean,
+}
+
+export function Button({ title, isLoading = false, ...others }: Props) {
+  return (
+    <GSButton
+      w="$full"
+      h="$14"
+      bg="$green700"
+      rounded="$sm"
+      borderColor="$green500"
+      $active-bg="$green500"
+      disabled={isLoading}
+      {...others}
+    >
+      { isLoading ? (
+        <ButtonSpinner color="$white" />
+      ) : (
+        <Text
+          color="$white"
+          fontFamily="$heading"
+          fontSize="$sm"
+        >
+          {title}
+        </Text>
+      )}
+    </GSButton>
+  )
+}
diff --git a/src/screens/SignIn.tsx b/src/screens/SignIn.tsx
index d4c7bf7..3f8dbbb 100644
--- a/src/screens/SignIn.tsx
+++ b/src/screens/SignIn.tsx
@@ -3,6 +3,7 @@ import { Center, Heading, Image, Text, VStack } from "@gluestack-ui/themed";
 import BackgroundImg from '@assets/background.png';
 import Logo from '@assets/logo.svg';
 import { Input } from "@components/Input";
+import { Button } from "@components/Button";
 
 export function SignIn() {
   return (
@@ -41,6 +42,10 @@ export function SignIn() {
             autoCapitalize="none"
             secureTextEntry
           />
+
+          <Button
+            title="Acessar"
+          />
         </Center>
       </VStack>
     </VStack>