Emoji done

src/components/Button.tsx

@@ -1,38 +1,74 @@
+import { Feather } from '@expo/vector-icons'
 import React from 'react'
 import { Pressable, StyleSheet, Text } from 'react-native'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 
-export interface Props {
+type PropsBase = {
   onPress: () => void
-  text: string
-  fontSize?: 'S' | 'M' | 'L'
+  disabled?: boolean
+  buttonSize?: 'S' | 'M'
 }
 
-const Button: React.FC<Props> = ({ onPress, text, fontSize = 'M' }) => {
+export interface PropsText extends PropsBase {
+  text: string
+  icon?: string
+  size?: 'S' | 'M' | 'L'
+}
+
+export interface PropsIcon extends PropsBase {
+  text?: string
+  icon: string
+  size?: 'S' | 'M' | 'L'
+}
+
+const Button: React.FC<PropsText | PropsIcon> = ({
+  onPress,
+  disabled = false,
+  buttonSize = 'M',
+  text,
+  icon,
+  size = 'M'
+}) => {
   const { theme } = useTheme()
 
   return (
     <Pressable
-      onPress={onPress}
-      style={[styles.button, { borderColor: theme.primary }]}
+      {...(!disabled && { onPress })}
+      style={[
+        styles.button,
+        {
+          borderColor: disabled ? theme.secondary : theme.primary,
+          paddingTop: StyleConstants.Spacing[buttonSize === 'M' ? 'S' : 'XS'],
+          paddingBottom: StyleConstants.Spacing[buttonSize === 'M' ? 'S' : 'XS']
+        }
+      ]}
     >
-      <Text
-        style={[
-          styles.text,
-          { color: theme.primary, fontSize: StyleConstants.Font.Size[fontSize] }
-        ]}
-      >
-        {text}
-      </Text>
+      {icon ? (
+        <Feather
+          name={icon}
+          size={StyleConstants.Font.Size[size]}
+          color={disabled ? theme.secondary : theme.primary}
+        />
+      ) : (
+        <Text
+          style={[
+            styles.text,
+            {
+              color: disabled ? theme.secondary : theme.primary,
+              fontSize: StyleConstants.Font.Size[size]
+            }
+          ]}
+        >
+          {text}
+        </Text>
+      )}
     </Pressable>
   )
 }
 
 const styles = StyleSheet.create({
   button: {
-    paddingTop: StyleConstants.Spacing.S,
-    paddingBottom: StyleConstants.Spacing.S,
     paddingLeft: StyleConstants.Spacing.M,
     paddingRight: StyleConstants.Spacing.M,
     borderWidth: 1,