first commit

components/Button/ButtonCustom.tsx

@@ -0,0 +1,46 @@
+// components/Button/Button.tsx
+
+import React from "react";
+import { Text, TouchableOpacity } from "react-native";
+import buttonStyles from "./buttonStyles";
+
+// Definisi props dengan TypeScript
+interface ButtonProps {
+  onPress: () => void;
+  title?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  radius?: number;
+  disabled?: boolean;
+  iconLeft?: React.ReactNode;
+}
+
+const ButtonCustom: React.FC<ButtonProps> = ({
+  onPress,
+  title = "Button",
+  backgroundColor = "#007AFF",
+  textColor = "#FFFFFF",
+  radius = 8,
+  disabled = false,
+  iconLeft,
+}) => {
+  const styles = buttonStyles({
+    backgroundColor,
+    textColor,
+    borderRadius: radius,
+  });
+
+  return (
+    <TouchableOpacity
+      style={[styles.button, disabled && styles.disabled]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      {/* Render icon jika tersedia */}
+      {iconLeft && iconLeft}
+      <Text style={styles.buttonText}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default ButtonCustom;

components/Button/buttonStyles.ts

@@ -0,0 +1,30 @@
+// components/Button/buttonStyles.js
+
+import { StyleSheet } from "react-native";
+
+export default function buttonStyles({
+  backgroundColor = "#007AFF",
+  textColor = "#FFFFFF",
+  borderRadius = 8,
+}) {
+  return StyleSheet.create({
+    button: {
+      backgroundColor,
+      paddingVertical: 12,
+      paddingHorizontal: 20,
+      borderRadius,
+      flexDirection: "row", // 👈 Tambahkan baris ini
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+    },
+    buttonText: {
+      color: textColor,
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    disabled: {
+      opacity: 0.5,
+    },
+  });
+}