feat: buttons component | theme config

src/components/Button/index.tsx

@@ -0,0 +1,23 @@
+import React, { FC, ReactNode } from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+
+import { styling } from './styles';
+import { ButtonVariants } from '../../types/components';
+
+type Props = {
+  children?: ReactNode;
+  variant?: ButtonVariants;
+  onPress?: () => void;
+};
+
+const Button: FC<Props> = ({ children, variant, onPress }) => {
+  const styles = styling(variant ?? ButtonVariants.FILL);
+
+  return (
+    <TouchableOpacity style={styles.touchableOpacity} onPress={onPress}>
+      <Text style={styles.text}>{children}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default Button;

src/components/Button/styles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../theme';
+import { ButtonVariants } from '../../types/components';
+
+export const styling = (variant: ButtonVariants) => {
+  return StyleSheet.create({
+    touchableOpacity: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 8,
+      backgroundColor: variant,
+      gap: 10,
+      padding: 12,
+      borderStyle: variant === ButtonVariants.OPACITY ? 'solid' : undefined,
+      borderWidth: variant === ButtonVariants.OPACITY ? 1 : undefined,
+      borderColor: variant === ButtonVariants.OPACITY ? 'rgba(255, 255, 255, 0.4)' : undefined
+    },
+    text: {
+      fontSize: 16,
+      color: Colors.WHITE,
+      fontFamily: 'redhat-700'
+    }
+  });
+};

src/theme.ts

@@ -0,0 +1,5 @@
+export enum Colors {
+  ORANGE = '#ED9334',
+  DARK_BLUE = '#0F3F4F',
+  WHITE = '#FFF'
+}

src/types/components/button.ts

@@ -0,0 +1,6 @@
+import { Colors } from '../../theme';
+
+export enum ButtonVariants {
+  FILL = Colors.ORANGE,
+  OPACITY = 'rgba(33, 37, 41, 0.2)'
+}

src/types/components/index.ts

@@ -0,0 +1 @@
+export * from './button';