feature

deskripsi:
- tampilan edit profile
- resourcing stack
- fix text input & buttom

app/(application)/profile/[id]/edit.tsx

@@ -1,17 +1,64 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { TextInputCustom, ViewWrapper } from "@/components";
-import { StackCustom } from "@/components/Stack";
+import {
+  ButtonCustom,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
 import { useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { Text } from "react-native";
 
 export default function ProfileEdit() {
   const { id } = useLocalSearchParams();
+
+  const [nama, setNama] = useState("Bagas Banuna");
+  const [email, setEmail] = useState("bagasbanuna@gmail.com");
+  const [alamat, setAlamat] = useState("Bandar Lampung");
+
   return (
-    <ViewWrapper>
-      <StackCustom>
-        <TextInputCustom label="Nama" value="Nama" required />
-        <TextInputCustom label="Email" value="Email" required />
-        <TextInputCustom label="Alamat" value="Alamat" required />
-        
+    <ViewWrapper
+      bottomBarComponent={
+        <ButtonCustom
+          radius={30}
+          disabled={!nama || !email || !alamat}
+          onPress={() => {
+            console.log("data >>", nama, email, alamat);
+          }}
+        >
+          Simpan
+        </ButtonCustom>
+      }
+    >
+      <StackCustom gap={"xs"}>
+        <TextInputCustom
+          label="Nama"
+          placeholder="Nama"
+          value={nama}
+          onChangeText={(text) => {
+            setNama(text);
+          }}
+          required
+        />
+        <TextInputCustom
+          label="Email"
+          placeholder="Email"
+          value={email}
+          onChangeText={(text) => {
+            setEmail(text);
+          }}
+          required
+        />
+        <TextInputCustom
+          label="Alamat"
+          placeholder="Alamat"
+          value={alamat}
+          onChangeText={(text) => {
+            setAlamat(text);
+          }}
+          required
+        />
       </StackCustom>
     </ViewWrapper>
   );

components/Button/ButtonCustom.tsx

@@ -3,11 +3,13 @@
 import React from "react";
 import { Text, TouchableOpacity } from "react-native";
 import buttonStyles from "./buttonCustomStyles";
+import { RADIUS_BUTTON } from "@/constants/constans-value";
 
 // Definisi props dengan TypeScript
 
 interface ButtonProps {
-  onPress: () => void;
+  children?: React.ReactNode;
+  onPress?: () => void;
   title?: string;
   backgroundColor?: string;
   textColor?: string;
@@ -28,6 +30,7 @@ interface ButtonProps {
  * @example iconLeft={<Icon name="arrow-right" size={20} color={MainColor.black}/>
  */
 const ButtonCustom: React.FC<ButtonProps> = ({
+  children,
   onPress,
   title = "Button",
   backgroundColor = "#007AFF",
@@ -39,7 +42,7 @@ const ButtonCustom: React.FC<ButtonProps> = ({
   const styles = buttonStyles({
     backgroundColor,
     textColor,
-    borderRadius: radius,
+    borderRadius: RADIUS_BUTTON || radius,
   });
 
   return (
@@ -51,7 +54,7 @@ const ButtonCustom: React.FC<ButtonProps> = ({
     >
       {/* Render icon jika tersedia */}
       {iconLeft && iconLeft}
-      <Text style={styles.buttonText}>{title}</Text>
+      <Text style={styles.buttonText}>{children}</Text>
     </TouchableOpacity>
   );
 };

components/Stack/index.ts

@@ -1,3 +0,0 @@
-import StackCustom from "./StackCustom";
-
-export { StackCustom };

components/Text/TextCustom.tsx

@@ -11,7 +11,7 @@ import { Text as RNText, StyleProp, StyleSheet, TextStyle } from "react-native";
 type TextAlign = "left" | "center" | "right";
 
 interface TextCustomProps {
-  children: string;
+  children: string | React.ReactNode;
   style?: StyleProp<TextStyle>;
   bold?: boolean;
   semiBold?: boolean;

components/_ShareComponent/ViewWrapper.tsx

@@ -7,12 +7,14 @@ interface ViewWrapperProps {
   children: React.ReactNode;
   withBackground?: boolean;
   tabBarComponent?: React.ReactNode;
+  bottomBarComponent?: React.ReactNode;
 }
 
 const ViewWrapper = ({
   children,
   withBackground = false,
   tabBarComponent,
+  bottomBarComponent,
 }: ViewWrapperProps) => {
   const assetBackground = require("../../assets/images/main-background.png");
 
@@ -42,10 +44,17 @@ const ViewWrapper = ({
             <View style={GStyles.container}>{children}</View>
           )}
         </ScrollView>
-        {tabBarComponent}
+        {tabBarComponent ? tabBarComponent : null}
+        {bottomBarComponent ? (
+          <View style={GStyles.bottomBar}>
+            <View style={GStyles.bottomBarContainer}>
+              {bottomBarComponent}
+            </View>
+          </View>
+        ) : null}
       </SafeAreaView>
     </>
-    
+
     // <SafeAreaProvider>
     //   <SafeAreaView
     //     edges={[

components/index.ts

@@ -19,6 +19,8 @@ import Grid from "./Grid/GridCustom";
 import BaseBox from "./Box/BaseBox";
 // Avatar
 import AvatarCustom from "./Avatar/AvatarCustom"
+// Stack
+import StackCustom from "./Stack/StackCustom";
 
 export {
   AlertCustom,
@@ -41,4 +43,6 @@ export {
   BaseBox,
   // Avatar
   AvatarCustom,
+  // Stack
+  StackCustom,
 };

constants/constans-value.ts

@@ -5,6 +5,7 @@ export {
   ICON_SIZE_SMALL,
   ICON_SIZE_MEDIUM,
   DRAWER_HEIGHT,
+  RADIUS_BUTTON,
 };
 
 const TEXT_SIZE_SMALL = 12;
@@ -13,3 +14,4 @@ const TEXT_SIZE_LARGE = 16;
 const ICON_SIZE_SMALL = 20;
 const ICON_SIZE_MEDIUM = 24;
 const DRAWER_HEIGHT = 500; // tinggi drawer5
+const RADIUS_BUTTON = 50

styles/global-styles.ts

@@ -135,4 +135,24 @@ export const GStyles = StyleSheet.create({
     backgroundColor: "#007AFF",
   },
   // =============== TAB =============== //
+
+  // =============== BOTTOM BAR =============== //
+  bottomBar: {
+    backgroundColor: MainColor.darkblue,
+    borderTopColor: AccentColor.blue,
+    borderTopWidth: 1,
+    // shadowColor: AccentColor.blue,
+    // shadowOffset: {
+    //   width: 0,
+    //   height: -1,
+    // },
+    // shadowOpacity: 0.9,
+    // shadowRadius: 5,
+    // elevation: 5,
+  },
+  bottomBarContainer: {
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+  },
+  // =============== BOTTOM BAR =============== //
 });