authentication component

app/header-button.tsx

@@ -1,12 +1,12 @@
+import { globalStyles } from "@/constants/global-styles";
 import { Stack } from "expo-router";
-import { Button, Text, Image } from "react-native";
 import { useState } from "react";
-import { styles } from "@/constants/styles";
+import { Button, Image, Text } from "react-native";
 
 function LogoTitle(props: { children?: React.ReactNode }) {
   return (
     <Image
-      style={styles.image}
+      style={globalStyles.image}
       source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
     />
   );

app/index.tsx

@@ -1,24 +1,17 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import Spacing from "@/components/_ShareComponent/Spacing";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import { TextInputCustom } from "@/components/TextInput/TextInputCustom";
 import { MainColor } from "@/constants/color-palet";
-import { styles } from "@/constants/styles";
-import { useNavigation } from "expo-router";
+import { globalStyles } from "@/constants/global-styles";
+import { useNavigation, useRouter } from "expo-router";
 import { useEffect, useState } from "react";
-import {
-  ImageBackground,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { Text, View } from "react-native";
 
-export default function Home() {
+export default function Login() {
+  const router = useRouter();
   const navigation = useNavigation();
-  const assetBackground = require("../assets/images/main-background.png");
   const [phone, setPhone] = useState("");
-  const [price, setPrice] = useState("");
 
   useEffect(() => {
     navigation.setOptions({
@@ -27,100 +20,54 @@ export default function Home() {
   }, [navigation]);
 
   return (
-    <SafeAreaView
-      edges={[]}
-      style={{
-        flex: 1,
-        // paddingTop: StatusBar.currentHeight,
-      }}
-    >
-      <ScrollView contentContainerStyle={{ flexGrow: 2 }}>
-        <ImageBackground
-          source={assetBackground}
-          resizeMode="cover"
-          style={styles.imageBackground}
-        >
-          <View style={styles.container}>
-            <View
-              style={{
-                flex: 1,
-                justifyContent: "center",
-                height: "100%",
-              }}
-            >
-              <View>
-                <View style={stylesHome.container}>
-                  {/* Teks "WELCOME TO" */}
-                  <Text style={stylesHome.welcomeTo}>WELCOME TO</Text>
-
-                  {/* Spacing antara "WELCOME TO" dan "HIPMI BADUNG APPS" */}
-                  <View style={stylesHome.spacing} />
-
-                  {/* Teks "HIPMI BADUNG APPS" */}
-                  <Text style={stylesHome.hipmiBadungApps}>
-                    HIPMI BADUNG APPS
-                  </Text>
-
-                  {/* Spacing antara "HIPMI BADUNG APPS" dan "powered by muku.id" */}
-                  <View style={stylesHome.spacing} />
-                </View>
-                {/* Teks "powered by muku.id" */}
-                <Text style={stylesHome.poweredBy}>powered by muku.id</Text>
-              </View>
-
-              {/* Input dengan prefix teks */}
-              <TextInputCustom
-                label="Nomor Telepon"
-                placeholder="Masukkan nomor"
-                value={phone}
-                onChangeText={setPhone}
-                iconLeft="+62"
-                keyboardType="phone-pad"
-              />
-
-              <ButtonCustom
-                title="Login"
-                backgroundColor={MainColor.yellow}
-                textColor={MainColor.black}
-                radius={10}
-                onPress={() => alert("Pressed!")}
-                // iconLeft={<MaterialIcons name="login" size={20} color="#000" />}
-              />
-            </View>
+    <ViewWrapper>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        <View>
+          <View style={globalStyles.authContainer}>
+            <Text style={globalStyles.authSubTitle}>WELCOME TO</Text>
+            <Spacing height={5} />
+            <Text style={globalStyles.authTitle}>HIPMI BADUNG APPS</Text>
+            <Spacing height={5} />
           </View>
-        </ImageBackground>
-      </ScrollView>
-    </SafeAreaView>
+          <Text
+            style={{
+              position: "absolute",
+              bottom: 30,
+              right: 20,
+              fontSize: 10,
+              fontWeight: "thin",
+              fontStyle: "italic",
+              color: MainColor.white,
+            }}
+          >
+            powered by muku.id
+          </Text>
+        </View>
+
+        {/* Input dengan prefix teks */}
+        <TextInputCustom
+          label="Nomor Telepon"
+          placeholder="Masukkan nomor"
+          value={phone}
+          onChangeText={setPhone}
+          iconLeft="+62"
+          keyboardType="phone-pad"
+        />
+
+        <ButtonCustom
+          title="Login"
+          backgroundColor={MainColor.yellow}
+          textColor={MainColor.black}
+          radius={10}
+          onPress={() => router.push("/verification")}
+        />
+      </View>
+    </ViewWrapper>
   );
 }
-
-const stylesHome = StyleSheet.create({
-  container: {
-    // backgroundColor: "#0A192F", // Warna latar belakang biru tua
-    justifyContent: "center",
-    alignItems: "center",
-    marginBottom: 50,
-  },
-  welcomeTo: {
-    fontSize: 22,
-    color: MainColor.yellow, // Warna kuning
-    fontWeight: "bold",
-  },
-  hipmiBadungApps: {
-    fontSize: 27,
-    color: MainColor.yellow, // Warna kuning
-    fontWeight: "bold",
-  },
-  spacing: {
-    height: 5, // Jarak antar teks
-  },
-  poweredBy: {
-    position: "absolute",
-    bottom: 30, // sesuaikan jarak dari bawah
-    right: 20, // sesuaikan jarak dari kanan
-    fontSize: 10,
-    fontWeight: "thin",
-    fontStyle: "italic",
-    color: MainColor.white, // Warna putih
-  },
-});

app/new-detail.tsx

@@ -1,5 +1,5 @@
-import { styles } from "@/constants/styles";
-import { useRouter, useLocalSearchParams, Stack } from "expo-router";
+import { globalStyles } from "@/constants/global-styles";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import { Text, View } from "react-native";
 
 export default function NewDetail() {
@@ -7,7 +7,7 @@ export default function NewDetail() {
   const params = useLocalSearchParams();
 
   return (
-    <View style={styles.container}>
+    <View style={globalStyles.container}>
       <Stack.Screen
         options={{
           title: params.name as string,

app/set-screen-dynamic.tsx

@@ -1,13 +1,13 @@
-import { styles } from "@/constants/styles";
+import { globalStyles } from "@/constants/global-styles";
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
-import { View, Text } from "react-native";
+import { Text, View } from "react-native";
 
 export default function Details() {
   const router = useRouter();
   const params = useLocalSearchParams();
 
   return (
-    <View style={styles.container}>
+    <View style={globalStyles.container}>
       <Stack.Screen
         options={{
           title: params.name as string,

app/verification.tsx

@@ -0,0 +1,74 @@
+import ButtonCustom from "@/components/Button/ButtonCustom";
+import Spacing from "@/components/_ShareComponent/Spacing";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { globalStyles } from "@/constants/global-styles";
+import { useNavigation, useRouter } from "expo-router";
+import { useEffect } from "react";
+import { Text, View } from "react-native";
+import { OtpInput } from "react-native-otp-entry";
+
+export default function Validasi() {
+  const router = useRouter();
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
+  return (
+    <ViewWrapper>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        <View>
+          <View style={globalStyles.authContainer}>
+            <Text style={globalStyles.authTitle}>Verifikasi KOde OTP</Text>
+            <Spacing height={30} />
+            <Text style={globalStyles.textLabel}>Masukan 4 digit kode otp</Text>
+            <Text style={globalStyles.textLabel}>
+              Yang di kirim ke +6282xxxxxxxxx
+            </Text>
+            <Spacing height={30} />
+            <OtpInput
+              numberOfDigits={4}
+              theme={{
+                pinCodeContainerStyle: {
+                  backgroundColor: MainColor.login,
+                  borderRadius: 10,
+                  borderWidth: 1,
+                  borderColor: MainColor.yellow,
+                  width: 60,
+                  height: 60,
+                },
+                containerStyle: {
+                  paddingLeft: 10,
+                  paddingRight: 10,
+                },
+              }}
+            />
+            <Spacing height={30} />
+            <Text style={globalStyles.textLabel}>
+              Tidak menerima kode ?{" "}
+              <Text style={{ ...globalStyles.textLabel }}>Kirim Ulang</Text>
+            </Text>
+          </View>
+        </View>
+
+        <ButtonCustom
+          title="Verifikasi"
+          backgroundColor={MainColor.yellow}
+          textColor={MainColor.black}
+          radius={10}
+          onPress={() => router.push("/")}
+        />
+      </View>
+    </ViewWrapper>
+  );
+}