update button

components/ButtonCreateNewHaulOrTrip.tsx

@@ -0,0 +1,107 @@
+import { AntDesign } from "@expo/vector-icons";
+import React, { useState } from "react";
+import { Alert, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+interface StartButtonProps {
+  title?: string;
+  onPress?: () => void;
+}
+
+const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
+  title = "Bắt đầu mẻ lưới",
+  onPress,
+}) => {
+  const [isStarted, setIsStarted] = useState(false);
+
+  const handlePress = () => {
+    if (isStarted) {
+      Alert.alert(
+        "Kết thúc mẻ lưới",
+        "Bạn có chắc chắn muốn kết thúc mẻ lưới này?",
+        [
+          {
+            text: "Hủy",
+            style: "cancel",
+          },
+          {
+            text: "Kết thúc",
+            onPress: () => {
+              setIsStarted(false);
+              Alert.alert("Thành công", "Đã kết thúc mẻ lưới!");
+            },
+          },
+        ]
+      );
+    } else {
+      Alert.alert("Bắt đầu mẻ lưới", "Bạn có muốn bắt đầu mẻ lưới mới?", [
+        {
+          text: "Hủy",
+          style: "cancel",
+        },
+        {
+          text: "Bắt đầu",
+          onPress: () => {
+            setIsStarted(true);
+            Alert.alert("Thành công", "Đã bắt đầu mẻ lưới mới!");
+          },
+        },
+      ]);
+    }
+
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={[styles.button, isStarted && styles.buttonActive]}
+      onPress={handlePress}
+      activeOpacity={0.8}
+    >
+      <View style={styles.content}>
+        <AntDesign
+          name={isStarted ? "close" : "plus"}
+          size={18}
+          color="#fff"
+          style={styles.icon}
+        />
+        <Text style={styles.text}>
+          {isStarted ? "Kết thúc mẻ lưới" : title}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#4ecdc4", // màu ngọc lam
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    alignSelf: "flex-start",
+    shadowColor: "#000",
+    shadowOpacity: 0.15,
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 3, // hiệu ứng nổi trên Android
+  },
+  buttonActive: {
+    backgroundColor: "#e74c3c", // màu đỏ khi đang hoạt động
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  icon: {
+    marginRight: 6,
+  },
+  text: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});
+
+export default ButtonCreateNewHaulOrTrip;