feature

deskripsi:
- new component select
- fix styles login dan verifikasi

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

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   ButtonCustom,
+  SelectCustom,
   StackCustom,
   TextCustom,
   TextInputCustom,
@@ -9,7 +10,7 @@ import {
 import { MainColor } from "@/constants/color-palet";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
-import { Text } from "react-native";
+import { StyleSheet, Text } from "react-native";
 
 export default function ProfileEdit() {
   const { id } = useLocalSearchParams();
@@ -18,14 +19,28 @@ export default function ProfileEdit() {
   const [email, setEmail] = useState("bagasbanuna@gmail.com");
   const [alamat, setAlamat] = useState("Bandar Lampung");
 
+  const [selectedValue, setSelectedValue] = useState<string | number>("");
+
+  const options = [
+    { label: "React", value: "react" },
+    { label: "Vue", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+    { label: "Next.js", value: "nextjs" },
+    { label: "Nuxt.js", value: "nuxtjs" },
+    { label: "Remix", value: "remix" },
+    { label: "Sapper", value: "sapper" },
+    { label: "SvelteKit", value: "sveltekit" },
+  ];
+
   return (
     <ViewWrapper
       bottomBarComponent={
         <ButtonCustom
-          disabled={!nama || !email || !alamat}
+          disabled={!nama || !email || !alamat || !selectedValue}
           onPress={() => {
-            console.log("data >>", nama, email, alamat);
+            console.log("data >>", nama, email, alamat, selectedValue);
-            // router.back();
+            router.back();
           }}
         >
           Simpan
@@ -33,6 +48,17 @@ export default function ProfileEdit() {
       }
     >
       <StackCustom gap={"xs"}>
+        <SelectCustom
+          label="Framework"
+          placeholder="Pilih framework favoritmu"
+          data={options}
+          value={selectedValue}
+          onChange={setSelectedValue}
+        />
+        {/* {selectedValue && (
+        <Text style={styles.result}>Terpilih: {selectedValue}</Text>
+      )} */}
+
         <TextInputCustom
           label="Nama"
           placeholder="Nama"
@@ -64,3 +90,16 @@ export default function ProfileEdit() {
     </ViewWrapper>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    padding: 20,
+  },
+  result: {
+    marginTop: 20,
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});

components/Drawer/DrawerCustom.tsx

@@ -19,6 +19,12 @@ interface DrawerCustomProps {
   //   openLogoutAlert: () => void;
 }
 
+
+/**
+ * 
+ * @param drawerAnim 
+ * @example   const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar
+ */
 export default function DrawerCustom({
   children,
   height,

components/Select/SelectCustom.tsx

@@ -0,0 +1,123 @@
+// components/Select.tsx
+import { MainColor } from "@/constants/color-palet";
+import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+
+type SelectItem = {
+  label: string;
+  value: string | number;
+};
+
+type SelectProps = {
+  label?: string;
+  placeholder?: string;
+  data: SelectItem[];
+  value?: string | number | null;
+  onChange: (value: string | number) => void;
+};
+
+const SelectCustom: React.FC<SelectProps> = ({
+  label,
+  placeholder = "Pilih opsi",
+  data,
+  value,
+  onChange,
+}) => {
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const selectedItem = data.find((item) => item.value === value);
+
+  return (
+    <View style={styles.container}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <Pressable style={styles.input} onPress={() => setModalVisible(true)}>
+        <Text style={selectedItem ? styles.text : styles.placeholder}>
+          {selectedItem?.label || placeholder}
+        </Text>
+      </Pressable>
+
+      <Modal visible={modalVisible} transparent animationType="fade">
+        <TouchableOpacity
+          style={styles.modalOverlay}
+          activeOpacity={1}
+          onPressOut={() => setModalVisible(false)}
+        >
+          <View style={styles.modalContent}>
+            <FlatList
+              data={data}
+              keyExtractor={(item) => String(item.value)}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={styles.option}
+                  onPress={() => {
+                    onChange(item.value);
+                    setModalVisible(false);
+                  }}
+                >
+                  <Text>{item.label}</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+};
+
+export default SelectCustom;
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: TEXT_SIZE_MEDIUM,
+    marginBottom: 4,
+    color: MainColor.white,
+    fontWeight: "500",
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    padding: 12,
+    borderRadius: 8,
+    minHeight: 48,
+    justifyContent: "center",
+    backgroundColor: MainColor.white,
+  },
+  text: {
+    fontSize: TEXT_SIZE_MEDIUM,
+  },
+  placeholder: {
+    fontSize: TEXT_SIZE_MEDIUM,
+    color: MainColor.placeholder,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.3)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modalContent: {
+    width: "80%",
+    maxHeight: 300,
+    backgroundColor: "white",
+    borderRadius: 8,
+    overflow: "hidden",
+  },
+  option: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#eee",
+  },
+});

components/TextInput/textInputStyles.ts

@@ -34,7 +34,7 @@ export const textInputStyles = StyleSheet.create({
     alignItems: "center",
     borderWidth: 1,
     borderColor: AccentColor.white,
-    backgroundColor: MainColor.login,
+    backgroundColor: MainColor.white,
     paddingHorizontal: 12,
     height: 50,
   },

components/index.ts

@@ -21,6 +21,8 @@ import BaseBox from "./Box/BaseBox";
 import AvatarCustom from "./Avatar/AvatarCustom"
 // Stack
 import StackCustom from "./Stack/StackCustom";
+// Select
+import SelectCustom from "./Select/SelectCustom";
 
 export {
   AlertCustom,
@@ -45,4 +47,6 @@ export {
   AvatarCustom,
   // Stack
   StackCustom,
+  // Select
+  SelectCustom,
 };

constants/color-palet.ts

@@ -7,7 +7,8 @@ export const MainColor = {
   red: "#FF4B4C",
   orange: "#FF7043",
   green: "#4CAF4F",
-  login: "#EDEBEBFF",
+  text_input: "#EDEBEBFF",
+  placeholder: "#999",
   disabled: "#606360",
 };
 

screens/Authentication/LoginView.tsx

@@ -24,15 +24,17 @@ export default function LoginView() {
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
     const fixNumber = callingCode + inputValue;
     // console.log("fixNumber", fixNumber); 
-    // router.navigate("/verification");
+    
-
     const randomAlfabet = Math.random().toString(36).substring(2, 8);
     const randomNumber = Math.floor(Math.random() * 1000000);
     const id = randomAlfabet + randomNumber + fixNumber;
     console.log("user id :", id);
-
+    
-    router.navigate(`/(application)/profile/${id}`);
+    router.navigate("/verification");
+    // router.navigate(`/(application)/profile/${id}`);
     // router.navigate("/(application)/home");
+    // router.navigate(`/(application)/profile/${id}/edit`);
+
   }
 
   return (

screens/Authentication/VerificationView.tsx

@@ -29,7 +29,7 @@ export default function VerificationView() {
                 numberOfDigits={4}
                 theme={{
                   pinCodeContainerStyle: {
-                    backgroundColor: MainColor.login,
+                    backgroundColor: MainColor.text_input,
                     borderRadius: 10,
                     borderWidth: 1,
                     borderColor: MainColor.yellow,