1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import React from "react";
import {
TouchableOpacity,
Text,
StyleSheet,
ActivityIndicator,
ViewStyle,
View,
TextStyle,
} from "react-native";
import { Feather } from "@expo/vector-icons";
import { useThemeColors, ColorScheme } from "../constants";
interface SendButtonProps {
onPress: () => void;
isLoading?: boolean;
disabled?: boolean;
label?: string;
style?: ViewStyle;
textStyle?: TextStyle;
}
const SendButton: React.FC<SendButtonProps> = ({
onPress,
isLoading = false,
disabled = false,
label = "Send",
style,
}) => {
const isButtonDisabled = isLoading || disabled;
const colors = useThemeColors();
return (
<TouchableOpacity
style={[
styles.sendButton,
{ backgroundColor: colors.button },
isButtonDisabled && styles.disabledButton,
style,
]}
onPress={onPress}
disabled={isButtonDisabled}
>
{isLoading ? (
<View
style={{
flexDirection: "row",
alignItems: "center",
width: "100%",
flex: 1,
justifyContent: "center",
}}
>
<ActivityIndicator color="#fff" />
</View>
) : (
<>
<Text
style={[
styles.sendText,
isButtonDisabled && styles.disabledText,
{ color: colors.buttonText },
]}
>
{label}
</Text>
<Feather
name="arrow-right"
size={16}
color={isButtonDisabled ? colors.border : colors.buttonText}
/>
</>
)}
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
sendButton: {
// paddingVertical: 10,
paddingHorizontal: 16,
borderRadius: 8,
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
gap: 8,
height: 48,
},
sendText: {
fontSize: 16,
fontWeight: 600,
flex: 1,
},
disabledButton: {
backgroundColor: "#4B5563",
},
disabledText: {
color: "#eee",
},
});
export default SendButton;
|
