adicionando componente Button

Author: Lucaslpa

src/components/Button/Button.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {Text} from '../Text';
+
+import {ActivityIndicator} from 'react-native';
+import {TouchableOpacityBox} from '../TouchableOpacityBox';
+import {ButtonProps} from './types';
+import {buttonThemes} from './theme';
+
+export function Button({loading, text, buttonType}: ButtonProps) {
+  const theme = buttonThemes[buttonType];
+  return (
+    <TouchableOpacityBox
+      paddingHorizontal="s20"
+      height={50}
+      alignItems="center"
+      justifyContent="center"
+      borderRadius="s16"
+      backgroundColor={theme.background}
+      borderWidth={theme.borderWidth}
+      borderColor={theme.borderColor}>
+      {!loading ? (
+        <Text type="headingMedium" color={theme.backgroundContrast}>
+          {text}
+        </Text>
+      ) : (
+        <ActivityIndicator color="white" />
+      )}
+    </TouchableOpacityBox>
+  );
+}

src/components/Button/theme.tsx

@@ -0,0 +1,15 @@
+import {ButtonTheme, ButtonTypes} from './types';
+
+export const buttonThemes: Record<ButtonTypes, ButtonTheme> = {
+  primary: {
+    background: 'primary',
+    backgroundContrast: 'primaryContrast',
+    borderWidth: 0,
+  },
+  outline: {
+    background: 'white',
+    backgroundContrast: 'primary',
+    borderWidth: 1,
+    borderColor: 'primary',
+  },
+};

src/components/Button/types.tsx

@@ -0,0 +1,17 @@
+import {Colors} from '../../theme';
+import {TouchableOpacityBoxProps} from '../TouchableOpacityBox';
+
+export interface ButtonTheme {
+  background: Colors;
+  backgroundContrast: Colors;
+  borderWidth: number;
+  borderColor?: Colors;
+}
+
+export type ButtonTypes = 'primary' | 'outline';
+
+export interface ButtonProps extends TouchableOpacityBoxProps {
+  loading?: boolean;
+  text: string;
+  buttonType: ButtonTypes;
+}