From e2e14e414de25904d791b503d2852c68b3ac9415 Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Wed, 16 Jul 2025 07:55:57 +0700
Subject: m

---
 components/PrimaryButton.tsx | 102 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 components/PrimaryButton.tsx

(limited to 'components/PrimaryButton.tsx')

diff --git a/components/PrimaryButton.tsx b/components/PrimaryButton.tsx
new file mode 100644
index 0000000..94bd8ce
--- /dev/null
+++ b/components/PrimaryButton.tsx
@@ -0,0 +1,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;
-- 
cgit v1.2.3