authentication component

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
-  },
-});