wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix folder component

Browse Source
This commit is contained in:
Bagasbanuna02
2025-06-26 10:29:22 +08:00
parent 33bee642a0
commit bff2a89903
16 changed files with 198 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/(application)/(tabs)/_layout.tsx
View File

@@ -1,11 +1,11 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
//app/(application)/(tabs)/_layout.tsx //app/(application)/(tabs)/_layout.tsx
import { MainColor } from "@/constants/color-palet"; import { MainColor } from "@/constants/color-palet";
import { Entypo, Ionicons } from "@expo/vector-icons"; import { Entypo, Ionicons } from "@expo/vector-icons";
import { router, Tabs } from "expo-router"; import { router, Tabs } from "expo-router";
import { Text, TouchableOpacity } from "react-native";
export default function TabsLayout() { export default function TabsLayout() {
return ( return (
<> <>
<Tabs <Tabs
@@ -26,7 +26,24 @@ export default function TabsLayout() {
<Entypo name="chat" size={20} color={MainColor.white} /> <Entypo name="chat" size={20} color={MainColor.white} />
), ),
headerLeft: () => ( headerLeft: () => (
<Ionicons name="arrow-back" onPress={() => {router.back()}} size={20} color={MainColor.white} /> <Ionicons
name="arrow-back"
onPress={() => {
router.back();
}}
size={20}
color={MainColor.white}
/>
),
tabBarButton: () => (
<TouchableOpacity
onPress={() => {
router.navigate("/event");
}}
>
<Entypo name="chat" size={20} color={MainColor.white} />
<Text style={{ color: MainColor.white }}>Event</Text>
</TouchableOpacity>
), ),
}} }}
/> />

27
app/(application)/(tabs)/index.tsx
View File

@@ -1,9 +1,8 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import HomeView from "@/components/Home/HomeView"; import HomeView from "@/components/Home/HomeView";
import { MainColor } from "@/constants/color-palet"; import { MainColor } from "@/constants/color-palet";
import { Ionicons } from "@expo/vector-icons"; import { Stack } from "expo-router";
import { Stack, useNavigation, useRouter } from "expo-router"; import React from "react";
import { useEffect } from "react"; import { View } from "react-native";
export default function Tabs() { export default function Tabs() {
// const router = useRouter(); // const router = useRouter();
@@ -16,7 +15,25 @@ export default function Tabs() {
return ( return (
<> <>
<HomeView /> <View>
<Stack.Screen
options={{
title: "My home",
headerStyle: { backgroundColor: MainColor.darkblue },
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
// headerTitle: (props) => <LogoTitle {...props} />,
}}
/>
<HomeView />
{/* <Text>Home Screen</Text>
<Link href={{ pathname: "/(application)/(tabs)/forum" }}>
Go to Details
</Link> */}
</View>
</> </>
); );
} }

37
app/(application)/_layout.tsx
View File

@@ -1,7 +1,6 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { AccentColor, MainColor } from "@/constants/color-palet"; import { AccentColor, MainColor } from "@/constants/color-palet";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { Stack } from "expo-router"; import { router, Stack } from "expo-router";
export default function ApplicationLayout() { export default function ApplicationLayout() {
return ( return (
@@ -18,13 +17,12 @@ export default function ApplicationLayout() {
headerLargeStyle: { headerLargeStyle: {
backgroundColor: MainColor.darkblue, backgroundColor: MainColor.darkblue,
}, },
headerShadowVisible: false,
}} }}
> >
<Stack.Screen <Stack.Screen
name="(tabs)" name="(tabs)"
options={{ options={{
headerShown: false, headerShown: false,
// title: "iii", // title: "iii",
// headerLeft: () => ( // headerLeft: () => (
// <Ionicons name="search" size={20} color={MainColor.white} /> // <Ionicons name="search" size={20} color={MainColor.white} />
@@ -34,7 +32,36 @@ export default function ApplicationLayout() {
// ), // ),
}} }}
/> />
{/* <Stack.Screen name="forum/index" options={{ title: "Forum", }} /> */} <Stack.Screen
name="event/index"
options={{
title: "Event",
headerLeft: () => (
<Ionicons
name="arrow-back"
size={20}
color={MainColor.yellow}
onPress={() => router.back()}
/>
),
}}
/>
{/* <Stack.Screen
name="home"
options={{
title: "HIPMI",
headerLeft: () => (
<Ionicons name="search" size={20} color={MainColor.yellow} />
),
headerRight: () => (
<Ionicons
name="notifications"
size={20}
color={MainColor.yellow}
/>
),
}}
/> */}
</Stack> </Stack>
</> </>
); );

9
app/(application)/event/index.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { Text, View } from "react-native";
export default function Event() {
return (
<View>
<Text>Event</Text>
</View>
)
}

9
app/(application)/home.tsx
View File

@@ -1,9 +1,16 @@
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import HomeView from "@/components/Home/HomeView"; import HomeView from "@/components/Home/HomeView";
import { Styles } from "@/constants/global-styles";
import { View } from "react-native";
export default function Application() { export default function Application() {
return ( return (
<> <>
<HomeView /> <ViewWrapper>
<View style={Styles.container}>
<HomeView />
</View>
</ViewWrapper>
</> </>
); );
} }

36
app/index.tsx
View File

@@ -1,14 +1,13 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import ButtonCustom from "@/components/_ShareComponent/Button/ButtonCustom";
import Spacing from "@/components/_ShareComponent/Spacing"; import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import ButtonCustom from "@/components/Button/ButtonCustom";
import { MainColor } from "@/constants/color-palet"; import { MainColor } from "@/constants/color-palet";
import { globalStyles } from "@/constants/global-styles"; import { Styles } from "@/constants/global-styles";
import { Stack, useRouter } from "expo-router"; import { useRouter } from "expo-router";
import { useState } from "react"; import { useState } from "react";
import { Text, View } from "react-native"; import { Text, View } from "react-native";
import PhoneInput, { ICountry } from "react-native-international-phone-number"; import PhoneInput, { ICountry } from "react-native-international-phone-number";
import { MaterialIcons } from "@expo/vector-icons";
export default function Login() { export default function Login() {
const router = useRouter(); const router = useRouter();
@@ -32,20 +31,13 @@ export default function Login() {
} }
return ( return (
<ViewWrapper withBackground>
<ViewWrapper> <View style={Styles.authContainer}>
<View
style={{
flex: 1,
justifyContent: "center",
height: "100%",
}}
>
<View> <View>
<View style={globalStyles.authContainer}> <View style={Styles.authContainerTitle}>
<Text style={globalStyles.authSubTitle}>WELCOME TO</Text> <Text style={Styles.authSubTitle}>WELCOME TO</Text>
<Spacing height={5} /> <Spacing height={5} />
<Text style={globalStyles.authTitle}>HIPMI BADUNG APPS</Text> <Text style={Styles.authTitle}>HIPMI BADUNG APPS</Text>
<Spacing height={5} /> <Spacing height={5} />
</View> </View>
<Spacing height={50} /> <Spacing height={50} />
@@ -64,16 +56,6 @@ export default function Login() {
</Text> </Text>
</View> </View>
{/* Input dengan prefix teks */}
{/* <TextInputCustom
label="Nomor Telepon"
placeholder="Masukkan nomor"
value={phone}
onChangeText={setPhone}
iconLeft="+62"
keyboardType="phone-pad"
/> */}
<PhoneInput <PhoneInput
value={inputValue} value={inputValue}
onChangePhoneNumber={handleInputValue} onChangePhoneNumber={handleInputValue}

54
app/register.tsx
View File

@@ -1,36 +1,29 @@
import { Text, View } from "react-native"; import ButtonCustom from "@/components/_ShareComponent/Button/ButtonCustom";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { globalStyles } from "@/constants/global-styles";
import Spacing from "@/components/_ShareComponent/Spacing"; import Spacing from "@/components/_ShareComponent/Spacing";
import { EvilIcons } from "@expo/vector-icons"; import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { TextInputCustom } from "@/components/_ShareComponent/TextInput/TextInputCustom";
import { MainColor } from "@/constants/color-palet"; import { MainColor } from "@/constants/color-palet";
import { TextInputCustom } from "@/components/TextInput/TextInputCustom"; import { Styles } from "@/constants/global-styles";
import ButtonCustom from "@/components/Button/ButtonCustom"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useRouter } from "expo-router"; import { router } from "expo-router";
import { Text, View } from "react-native";
export default function Register() { export default function Register() {
const router = useRouter();
return ( return (
<ViewWrapper> <ViewWrapper withBackground>
<View <View style={Styles.authContainer}>
style={{
flex: 1,
justifyContent: "center",
height: "100%",
}}
>
<View> <View>
<View style={globalStyles.authContainer}> <View style={Styles.authContainerTitle}>
<Text style={globalStyles.authTitle}>REGISTRASI</Text> <Text style={Styles.authTitle}>REGISTRASI</Text>
<Spacing height={30} /> <Spacing />
<EvilIcons name="user" size={100} color={MainColor.yellow} /> <MaterialCommunityIcons name="account" size={100} color={MainColor.yellow} />
<Spacing height={30} /> <Spacing />
<Text style={globalStyles.textLabel}> <Text style={Styles.textLabel}>
Anda akan terdaftar dengan nomor Anda akan terdaftar dengan nomor
</Text> </Text>
<Text style={globalStyles.textLabel}>+6282xxxxxxxxx</Text> <Text style={Styles.textLabel}>+6282xxxxxxxxx</Text>
<Spacing height={30} /> <Spacing />
</View> </View>
<TextInputCustom placeholder="Masukkan username" /> <TextInputCustom placeholder="Masukkan username" />
@@ -41,16 +34,19 @@ export default function Register() {
radius={10} radius={10}
onPress={() => ( onPress={() => (
console.log("Success register"), console.log("Success register"),
router.push("/(application)/home") router.push("/(application)/(tabs)")
)} )}
/> />
{/* <Spacing height={10} /> <Spacing />
<ButtonCustom {/* <ButtonCustom
title="Katalog" title="Home"
backgroundColor={MainColor.yellow} backgroundColor={MainColor.yellow}
textColor={MainColor.black} textColor={MainColor.black}
radius={10} radius={10}
onPress={() => router.push("/(application)/(katalog)")} onPress={() => {
console.log("Home clicked");
router.push("/(application)/home");
}}
/> */} /> */}
</View> </View>
</View> </View>

29
app/verification.tsx
View File

@@ -1,30 +1,23 @@
import ButtonCustom from "@/components/Button/ButtonCustom"; import ButtonCustom from "@/components/_ShareComponent/Button/ButtonCustom";
import Spacing from "@/components/_ShareComponent/Spacing"; import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { MainColor } from "@/constants/color-palet"; import { MainColor } from "@/constants/color-palet";
import { globalStyles } from "@/constants/global-styles"; import { Styles } from "@/constants/global-styles";
import { useRouter } from "expo-router" import { useRouter } from "expo-router";
import { Text, View } from "react-native"; import { Text, View } from "react-native";
import { OtpInput } from "react-native-otp-entry"; import { OtpInput } from "react-native-otp-entry";
export default function Validasi() { export default function Validasi() {
const router = useRouter(); const router = useRouter();
return ( return (
<ViewWrapper> <ViewWrapper withBackground>
<View <View style={Styles.authContainer}>
style={{
flex: 1,
justifyContent: "center",
height: "100%",
}}
>
<View> <View>
<View style={globalStyles.authContainer}> <View style={Styles.authContainerTitle}>
<Text style={globalStyles.authTitle}>Verifikasi KOde OTP</Text> <Text style={Styles.authTitle}>Verifikasi KOde OTP</Text>
<Spacing height={30} /> <Spacing height={30} />
<Text style={globalStyles.textLabel}>Masukan 4 digit kode otp</Text> <Text style={Styles.textLabel}>Masukan 4 digit kode otp</Text>
<Text style={globalStyles.textLabel}> <Text style={Styles.textLabel}>
Yang di kirim ke +6282xxxxxxxxx Yang di kirim ke +6282xxxxxxxxx
</Text> </Text>
<Spacing height={30} /> <Spacing height={30} />
@@ -46,9 +39,9 @@ export default function Validasi() {
}} }}
/> />
<Spacing height={30} /> <Spacing height={30} />
<Text style={globalStyles.textLabel}> <Text style={Styles.textLabel}>
Tidak menerima kode ?{" "} Tidak menerima kode ?{" "}
<Text style={{ ...globalStyles.textLabel }}>Kirim Ulang</Text> <Text style={Styles.textLabel}>Kirim Ulang</Text>
</Text> </Text>
</View> </View>
<Spacing height={30} /> <Spacing height={30} />

26
components/Home/HomeView.tsx
View File

@@ -1,33 +1,18 @@
import Spacing from "@/components/_ShareComponent/Spacing"; import Spacing from "@/components/_ShareComponent/Spacing";
import { MainColor } from "@/constants/color-palet"; import { Styles } from "@/constants/global-styles";
import { globalStyles } from "@/constants/global-styles";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { Image } from "expo-image"; import { Image } from "expo-image";
import { useNavigation } from "expo-router"; import { router } from "expo-router";
import { useEffect } from "react";
import { ScrollView, Text, TouchableOpacity, View } from "react-native"; import { ScrollView, Text, TouchableOpacity, View } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome"; import Icon from "react-native-vector-icons/FontAwesome";
import DynamicTruncatedText from "../_ShareComponent/TruncatedText"; import DynamicTruncatedText from "../_ShareComponent/TruncatedText";
import { stylesHome } from "./homeViewStyle"; import { stylesHome } from "./homeViewStyle";
export default function HomeView() { export default function HomeView() {
const navigation = useNavigation();
useEffect(() => {
navigation.setOptions({
title: "HIPMI",
headerLeft: () => (
<Ionicons name="search" size={20} color={MainColor.white} />
),
headerRight: () => (
<Ionicons name="notifications" size={20} color={MainColor.white} />
),
});
}, [navigation]);
return ( return (
<> <>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}> <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={globalStyles.mainContainer}> <View style={Styles.homeContainer}>
<Spacing height={20} /> <Spacing height={20} />
<View <View
style={{ style={{
@@ -54,7 +39,10 @@ export default function HomeView() {
{/* Grid Section */} {/* Grid Section */}
<View style={stylesHome.gridContainer}> <View style={stylesHome.gridContainer}>
<TouchableOpacity style={stylesHome.gridItem}> <TouchableOpacity
style={stylesHome.gridItem}
onPress={() => router.push("/(application)/event")}
>
<Ionicons name="analytics" size={48} color="white" /> <Ionicons name="analytics" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Event</Text> <Text style={stylesHome.gridLabel}>Event</Text>
</TouchableOpacity> </TouchableOpacity>

1
components/Button/ButtonCustom.tsx → components/_ShareComponent/Button/ButtonCustom.tsx
View File

@@ -35,6 +35,7 @@ const ButtonCustom: React.FC<ButtonProps> = ({
style={[styles.button, disabled && styles.disabled]} style={[styles.button, disabled && styles.disabled]}
onPress={onPress} onPress={onPress}
disabled={disabled} disabled={disabled}
activeOpacity={0.8}
> >
{/* Render icon jika tersedia */} {/* Render icon jika tersedia */}
{iconLeft && iconLeft} {iconLeft && iconLeft}

0
components/Button/buttonStyles.ts → components/_ShareComponent/Button/buttonStyles.ts
View File

0
components/TextInput/TextInputCustom.tsx → components/_ShareComponent/TextInput/TextInputCustom.tsx
View File

0
components/TextInput/textInputStyles.ts → components/_ShareComponent/TextInput/textInputStyles.ts
View File

54
components/_ShareComponent/ViewWrapper.tsx
View File

@@ -1,35 +1,43 @@
/* eslint-disable @typescript-eslint/no-unused-vars */ import { Styles } from "@/constants/global-styles";
import { MainColor } from "@/constants/color-palet";
import { globalStyles } from "@/constants/global-styles";
import { ImageBackground, ScrollView, View } from "react-native"; import { ImageBackground, ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context"; import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
interface ViewWrapperProps { interface ViewWrapperProps {
children: React.ReactNode; children: React.ReactNode;
withBackground?: boolean;
} }
const ViewWrapper = ({ children }: ViewWrapperProps) => { const ViewWrapper = ({
children,
withBackground = false,
}: ViewWrapperProps) => {
const assetBackground = require("../../assets/images/main-background.png"); const assetBackground = require("../../assets/images/main-background.png");
return ( return (
<SafeAreaView <SafeAreaProvider>
edges={[]} <SafeAreaView
style={{ edges={[]}
flex: 1, style={{
// paddingTop: StatusBar.currentHeight, flex: 1,
}} // paddingTop: StatusBar.currentHeight,
}}
> >
<ScrollView contentContainerStyle={{ flexGrow: 1 }} > <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<ImageBackground {withBackground ? (
source={require("../../assets/images/main-background.png")} <ImageBackground
resizeMode="cover" source={assetBackground}
style={globalStyles.imageBackground} resizeMode="cover"
> style={Styles.imageBackground}
<View style={globalStyles.container}>{children}</View> >
</ImageBackground> <View style={Styles.containerWithBackground}>{children}</View>
</ScrollView> </ImageBackground>
</SafeAreaView> ) : (
<View style={Styles.container}>{children}</View>
)}
</ScrollView>
</SafeAreaView>
</SafeAreaProvider>
); );
}; };

30
constants/global-styles.ts
View File

@@ -1,19 +1,18 @@
import { StyleSheet } from "react-native"; import { StyleSheet } from "react-native";
import { MainColor } from "./color-palet"; import { MainColor } from "./color-palet";
export const globalStyles = StyleSheet.create({ export const Styles = StyleSheet.create({
container: { container: {
flex: 1,
paddingInline: 30,
paddingBlock: 20,
},
mainContainer: {
flex: 1, flex: 1,
paddingInline: 25, paddingInline: 25,
paddingBlock: 10, paddingBlock: 10,
backgroundColor: MainColor.darkblue, backgroundColor: MainColor.darkblue,
}, },
containerWithBackground: {
flex: 1,
paddingInline: 25,
paddingBlock: 10,
},
imageBackground: { imageBackground: {
height: "100%", height: "100%",
width: "100%", width: "100%",
@@ -21,9 +20,12 @@ export const globalStyles = StyleSheet.create({
// AUTHENTICATION // AUTHENTICATION
authContainer: { authContainer: {
flex: 1,
justifyContent: "center",
},
authContainerTitle: {
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
// marginBottom: 50,
}, },
authTitle: { authTitle: {
fontSize: 27, fontSize: 27,
@@ -35,9 +37,19 @@ export const globalStyles = StyleSheet.create({
color: MainColor.yellow, color: MainColor.yellow,
fontWeight: "bold", fontWeight: "bold",
}, },
// TEXT & LABEL
textLabel: { textLabel: {
fontSize: 16, fontSize: 14,
color: MainColor.white, color: MainColor.white,
fontWeight: "normal", fontWeight: "normal",
}, },
// HOME
homeContainer: {
flex: 1,
paddingInline: 25,
paddingBlock: 10,
backgroundColor: MainColor.darkblue,
},
}); });

2
tsconfig.json
View File

@@ -13,5 +13,5 @@
"**/*.tsx", "**/*.tsx",
".expo/types/**/*.ts", ".expo/types/**/*.ts",
"expo-env.d.ts" "expo-env.d.ts"
, "components/Button/ButtonCustom" ] , "components/_ShareComponent/Button/ButtonCustom" ]
} }