fix styles dan feature component text

app/(application)/_layout.tsx

@@ -1,5 +1,5 @@
 import { AccentColor, MainColor } from "@/constants/color-palet";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 
@@ -8,8 +8,8 @@ export default function ApplicationLayout() {
     <>
       <Stack
         screenOptions={{
-          headerStyle: Styles.headerStyle,
+          headerStyle: GStyles.headerStyle,
-          headerTitleStyle: Styles.headerTitleStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
           contentStyle: {
             borderBottomColor: AccentColor.blue,

app/(application)/event/(tabs)/index.tsx

@@ -1,6 +1,6 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { AccentColor, MainColor } from "@/constants/color-palet";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { router } from "expo-router";
 import { Text, TouchableHighlight, View } from "react-native";
 
@@ -17,7 +17,7 @@ export default function Event() {
             borderWidth: 1,
           }}
         >
-          <Text style={Styles.textLabel}>Event</Text>
+          <Text style={GStyles.textLabel}>Event</Text>
         </View>
       </TouchableHighlight>
     </ViewWrapper>

app/(application)/event/(tabs)/kontribusi.tsx

@@ -1,11 +1,11 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { Text } from "react-native";
 
 export default function Kontribusi() {
   return (
     <ViewWrapper>
-      <Text style={Styles.textLabel}>Kontribusi</Text>
+      <Text style={GStyles.textLabel}>Kontribusi</Text>
     </ViewWrapper>
   );
 }

app/(application)/event/(tabs)/riwayat.tsx

@@ -1,11 +1,11 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { Text } from "react-native";
 
 export default function Riwayat() {
   return (
     <ViewWrapper>
-      <Text style={Styles.textLabel}>Riwayat</Text>
+      <Text style={GStyles.textLabel}>Riwayat</Text>
     </ViewWrapper>
   );
 }

app/(application)/event/(tabs)/status.tsx

@@ -1,11 +1,11 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { Text } from "react-native";
 
 export default function Status() {
   return (
     <ViewWrapper>
-      <Text style={Styles.textLabel}>Status</Text>
+      <Text style={GStyles.textLabel}>Status</Text>
     </ViewWrapper>
   );
 }

app/(application)/event/detail/[id].tsx

@@ -1,5 +1,5 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { useLocalSearchParams } from "expo-router";
 import { Text } from "react-native";
 
@@ -8,7 +8,7 @@ export default function DetailEvent() {
   console.log("id event >", id);
   return (
     <ViewWrapper>
-      <Text style={Styles.textLabel}>Detail Event {id}</Text>
+      <Text style={GStyles.textLabel}>Detail Event {id}</Text>
     </ViewWrapper>
   );
 }

app/(application)/portofolio/[id]/index.tsx

@@ -1,6 +1,6 @@
 import BackButton from "@/components/Button/BackButton";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { Stack, useLocalSearchParams } from "expo-router";
 import { Text } from "react-native";
 
@@ -22,11 +22,11 @@ export default function Portofolio() {
         //       />
         //     </TouchableOpacity>
         //   ),
-          headerStyle: Styles.headerStyle,
+          headerStyle: GStyles.headerStyle,
-          headerTitleStyle: Styles.headerTitleStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
         }}
       />
-      <Text style={Styles.textLabel}>Portofolio {id}</Text>
+      <Text style={GStyles.textLabel}>Portofolio {id}</Text>
     </ViewWrapper>
   );
 }

app/(application)/portofolio/_layout.tsx

@@ -1,6 +1,6 @@
 
 import BackButton from "@/components/Button/BackButton";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { Stack } from "expo-router";
 
 export default function PortofolioLayout() {
@@ -8,8 +8,8 @@ export default function PortofolioLayout() {
     <>
       <Stack
         screenOptions={{
-          headerStyle: Styles.headerStyle,
+          headerStyle: GStyles.headerStyle,
-          headerTitleStyle: Styles.headerTitleStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
           headerBackButtonDisplayMode: "minimal",
           headerLeft: () => <BackButton />,

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

@@ -6,11 +6,12 @@ import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
 import { DRAWER_HEIGHT } from "@/constants/constans-value";
 import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
-import { Styles } from "@/styles/global-styles";
+import ProfilSection from "@/screens/Profile/profilSection";
+import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import React, { useRef, useState } from "react";
-import { Animated, InteractionManager, Text, TouchableHighlight, TouchableOpacity, View } from "react-native";
+import { Animated, InteractionManager, TouchableOpacity } from "react-native";
 
 export default function Profile() {
   const { id } = useLocalSearchParams();
@@ -93,25 +94,12 @@ export default function Profile() {
                 />
               </TouchableOpacity>
             ),
-            headerStyle: Styles.headerStyle,
+            headerStyle: GStyles.headerStyle,
-            headerTitleStyle: Styles.headerTitleStyle,
+            headerTitleStyle: GStyles.headerTitleStyle,
           }}
         />
-        <Text style={Styles.textLabel}>Profile {id}</Text>
+        <ProfilSection />
-        <TouchableHighlight
+       
-          onPress={() => router.push(`/(application)/portofolio/${id}`)}
-        >
-          <View
-            style={{
-              backgroundColor: MainColor.white,
-              padding: 10,
-              borderRadius: 10,
-              marginTop: 10,
-            }}
-          >
-            <Text>Portofolio</Text>
-          </View>
-        </TouchableHighlight>
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}

app/(application)/profile/_layout.tsx

@@ -1,5 +1,5 @@
 import { MainColor } from "@/constants/color-palet";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 
@@ -8,8 +8,8 @@ export default function ProfileLayout() {
     <>
       <Stack
         screenOptions={{
-          headerStyle: Styles.headerStyle,
+          headerStyle: GStyles.headerStyle,
-          headerTitleStyle: Styles.headerTitleStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
           headerBackButtonDisplayMode: "minimal",
           headerLeft: () => (

components/Text/TextCustom.tsx

@@ -0,0 +1,82 @@
+import { MainColor } from "@/constants/color-palet";
+import {
+  TEXT_SIZE_LARGE,
+  TEXT_SIZE_MEDIUM,
+  TEXT_SIZE_SMALL,
+} from "@/constants/constans-value";
+import React from "react";
+import { StyleProp, Text as RNText, TextStyle, StyleSheet } from "react-native";
+
+interface TextCustomProps {
+  children: string;
+  style?: StyleProp<TextStyle>;
+  bold?: boolean;
+  semiBold?: boolean;
+  size?: "default" | "large" | "small";
+  color?: "default" | "primary" | "secondary";
+}
+
+const TextCustom: React.FC<TextCustomProps> = ({
+  children,
+  style,
+  bold = false,
+  semiBold = false,
+  size = "default",
+  color = "default",
+}) => {
+  const getStyle = () => {
+    let selectedStyles = [];
+
+    // Base style
+    selectedStyles.push(styles.default);
+
+    // Font weight
+    if (bold) selectedStyles.push(styles.bold);
+    else if (semiBold) selectedStyles.push(styles.semiBold);
+
+    // Size
+    if (size === "large") selectedStyles.push(styles.large);
+    else if (size === "small") selectedStyles.push(styles.small);
+
+    // Color
+    if (color === "primary") selectedStyles.push(styles.primaryColor);
+    else if (color === "secondary") selectedStyles.push(styles.secondaryColor);
+
+    // Override with passed style
+    if (style) selectedStyles.push(style);
+
+    return selectedStyles;
+  };
+
+  return <RNText style={getStyle()}>{children}</RNText>;
+};
+
+export default TextCustom;
+
+export const styles = StyleSheet.create({
+  default: {
+    // fontFamily: "Poppins-Regular", // Ganti dengan font yang kamu gunakan
+    fontSize: TEXT_SIZE_MEDIUM,
+    color: MainColor.white,
+  },
+  bold: {
+    fontFamily: "Poppins-Bold",
+    fontWeight: "700",
+  },
+  semiBold: {
+    fontFamily: "Poppins-SemiBold",
+    fontWeight: "500",
+  },
+  large: {
+    fontSize: TEXT_SIZE_LARGE,
+  },
+  small: {
+    fontSize: TEXT_SIZE_SMALL,
+  },
+  primaryColor: {
+    color: "#007AFF", // Warna utama aplikasi kamu
+  },
+  secondaryColor: {
+    color: "#666",
+  },
+});

components/_ShareComponent/ViewWrapper.tsx

@@ -1,5 +1,5 @@
 import { MainColor } from "@/constants/color-palet";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { ImageBackground, ScrollView, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
@@ -34,12 +34,12 @@ const ViewWrapper = ({
             <ImageBackground
               source={assetBackground}
               resizeMode="cover"
-              style={Styles.imageBackground}
+              style={GStyles.imageBackground}
             >
-              <View style={Styles.containerWithBackground}>{children}</View>
+              <View style={GStyles.containerWithBackground}>{children}</View>
             </ImageBackground>
           ) : (
-            <View style={Styles.container}>{children}</View>
+            <View style={GStyles.container}>{children}</View>
           )}
         </ScrollView>
         {tabBarComponent}

components/index.ts

@@ -10,6 +10,8 @@ import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
 import TruncatedText from "./_ShareComponent/TruncatedText";
 import Spacing from "./_ShareComponent/Spacing";
+// Text
+import TextCustom from "./Text/TextCustom";
 // TextInput
 import { TextInputCustom } from "./TextInput/TextInputCustom";
 
@@ -25,6 +27,8 @@ export {
   Spacing,
   TruncatedText,
   ViewWrapper,
+  // Text
+  TextCustom,
   // TextInput
   TextInputCustom,
 };

screens/Authentication/LoginView.tsx

@@ -1,12 +1,12 @@
+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 { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { router } from "expo-router";
 import { useState } from "react";
 import { Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
-import ButtonCustom from "@/components/Button/ButtonCustom";
-import Spacing from "@/components/_ShareComponent/Spacing";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 
 
 export default function LoginView() {
@@ -25,17 +25,17 @@ export default function LoginView() {
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
     const fixNumber = callingCode + inputValue;
     console.log(fixNumber);
-    router.push("/verification");
+    router.navigate("/(application)/profile/1");
   }
 
   return (
     <ViewWrapper withBackground>
-      <View style={Styles.authContainer}>
+      <View style={GStyles.authContainer}>
         <View>
-          <View style={Styles.authContainerTitle}>
+          <View style={GStyles.authContainerTitle}>
-            <Text style={Styles.authSubTitle}>WELCOME TO</Text>
+            <Text style={GStyles.authSubTitle}>WELCOME TO</Text>
             <Spacing height={5} />
-            <Text style={Styles.authTitle}>HIPMI BADUNG APPS</Text>
+            <Text style={GStyles.authTitle}>HIPMI BADUNG APPS</Text>
             <Spacing height={5} />
           </View>
           <Spacing height={50} />

screens/Authentication/RegisterView.tsx

@@ -3,7 +3,7 @@ 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 "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { Text, View } from "react-native";
@@ -12,10 +12,10 @@ export default function RegisterView() {
   return (
     <>
       <ViewWrapper withBackground>
-        <View style={Styles.authContainer}>
+        <View style={GStyles.authContainer}>
           <View>
-            <View style={Styles.authContainerTitle}>
+            <View style={GStyles.authContainerTitle}>
-              <Text style={Styles.authTitle}>REGISTRASI</Text>
+              <Text style={GStyles.authTitle}>REGISTRASI</Text>
               <Spacing />
               <MaterialCommunityIcons
                 name="account"
@@ -24,10 +24,10 @@ export default function RegisterView() {
               />
               <Spacing />
 
-              <Text style={Styles.textLabel}>
+              <Text style={GStyles.textLabel}>
                 Anda akan terdaftar dengan nomor
               </Text>
-              <Text style={Styles.textLabel}>+6282xxxxxxxxx</Text>
+              <Text style={GStyles.textLabel}>+6282xxxxxxxxx</Text>
               <Spacing />
             </View>
             <TextInputCustom placeholder="Masukkan username" />

screens/Authentication/VerificationView.tsx

@@ -2,7 +2,7 @@ import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import { MainColor } from "@/constants/color-palet";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { router } from "expo-router";
 import { Text, View } from "react-native";
 import { OtpInput } from "react-native-otp-entry";
@@ -11,13 +11,13 @@ export default function VerificationView() {
   return (
     <>
       <ViewWrapper withBackground>
-        <View style={Styles.authContainer}>
+        <View style={GStyles.authContainer}>
           <View>
-            <View style={Styles.authContainerTitle}>
+            <View style={GStyles.authContainerTitle}>
-              <Text style={Styles.authTitle}>Verifikasi KOde OTP</Text>
+              <Text style={GStyles.authTitle}>Verifikasi KOde OTP</Text>
               <Spacing height={30} />
-              <Text style={Styles.textLabel}>Masukan 4 digit kode otp</Text>
+              <Text style={GStyles.textLabel}>Masukan 4 digit kode otp</Text>
-              <Text style={Styles.textLabel}>
+              <Text style={GStyles.textLabel}>
                 Yang di kirim ke +6282xxxxxxxxx
               </Text>
               <Spacing height={30} />
@@ -39,9 +39,9 @@ export default function VerificationView() {
                 }}
               />
               <Spacing height={30} />
-              <Text style={Styles.textLabel}>
+              <Text style={GStyles.textLabel}>
                 Tidak menerima kode ?{" "}
-                <Text style={Styles.textLabel}>Kirim Ulang</Text>
+                <Text style={GStyles.textLabel}>Kirim Ulang</Text>
               </Text>
             </View>
             <Spacing height={30} />

screens/Home/HomeView.tsx

@@ -1,18 +1,18 @@
 import Spacing from "@/components/_ShareComponent/Spacing";
-import { Styles } from "@/styles/global-styles";
+import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
+import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
 import { router } from "expo-router";
 import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
-import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
 import { stylesHome } from "./homeViewStyle";
 
 export default function HomeView() {
   return (
     <>
       <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-        <View style={Styles.homeContainer}>
+        <View style={GStyles.homeContainer}>
           <Spacing height={20} />
           <View
             style={{

screens/Home/tabSection.tsx

@@ -1,5 +1,5 @@
 import { ICustomTab, ITabs } from "@/components/_Interface/types";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import React from "react";
@@ -8,12 +8,12 @@ import { Text, TouchableOpacity, View } from "react-native";
 
 const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
   <TouchableOpacity
-    style={[Styles.tabItem, isActive && Styles.activeTab]}
+    style={[GStyles.tabItem, isActive && GStyles.activeTab]}
     onPress={onPress}
     activeOpacity={0.7}
   >
     <View
-      style={[Styles.iconContainer, isActive && Styles.activeIconContainer]}
+      style={[GStyles.iconContainer, isActive && GStyles.activeIconContainer]}
     >
       <Ionicons
         name={icon as any}
@@ -21,7 +21,7 @@ const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
         color={isActive ? "#fff" : "#666"}
       />
     </View>
-    <Text style={[Styles.tabLabel, isActive && Styles.activeTabLabel]}>
+    <Text style={[GStyles.tabLabel, isActive && GStyles.activeTabLabel]}>
       {label}
     </Text>
   </TouchableOpacity>
@@ -30,8 +30,8 @@ const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
 export default function TabSection({ tabs }: { tabs: ITabs[] }) {
   return (
     <>
-      <View style={Styles.tabBar}>
+      <View style={GStyles.tabBar}>
-        <View style={Styles.tabContainer}>
+        <View style={GStyles.tabContainer}>
           {tabs.map((e) => (
             <CustomTab
               key={e.id}

screens/Profile/profilSection.tsx

@@ -0,0 +1,104 @@
+import { Spacing, TextCustom } from "@/components";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { Text, TouchableHighlight, View } from "react-native";
+
+export default function ProfilSection() {
+  const { id } = useLocalSearchParams();
+
+  const listData = [
+    {
+      icon: (
+        <Ionicons name="call-outline" size={ICON_SIZE_SMALL} color="white" />
+      ),
+      label: "+6282340374412",
+    },
+    {
+      icon: (
+        <Ionicons name="mail-outline" size={ICON_SIZE_SMALL} color="white" />
+      ),
+      label: "bagasbanuna@gmail.com",
+    },
+    {
+      icon: (
+        <Ionicons
+          name="location-outline"
+          size={ICON_SIZE_SMALL}
+          color="white"
+        />
+      ),
+      label: "Jalan Raya Sesetan No. 123, Bandung, Indonesia",
+    },
+    {
+      icon: (
+        <FontAwesome5 name="transgender" size={ICON_SIZE_SMALL} color="white" />
+      ),
+      label: "Laki-laki",
+    },
+  ];
+
+  return (
+    <>
+      <View
+        style={{
+          backgroundColor: MainColor.soft_darkblue,
+          borderColor: AccentColor.blue,
+          borderWidth: 1,
+          padding: 10,
+          borderRadius: 6,
+          marginTop: 10,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            flexWrap: "wrap",
+            // backgroundColor: MainColor.red,
+          }}
+        >
+          {listData.map((item, index) => (
+            <View
+              key={index}
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                marginBottom: 20,
+                // flexWrap: "wrap",
+                // backgroundColor: "gray",
+              }}
+            >
+              {item.icon}
+              <Spacing />
+
+              <TextCustom bold style={{ backgroundColor: "" }}>
+                {`${item.label} Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis dolorem ipsam velit culpa consequuntur porro esse asperiores, debitis, qui numquam excepturi tempora fuga dolor totam quam, provident ipsum repellat hic.`}
+              </TextCustom>
+              {/* <View style={{ flexDirection: "row", alignItems: "center" }}>
+                    {item.icon}
+                    <Spacing />
+                </View> */}
+            </View>
+          ))}
+        </View>
+      </View>
+
+      <TouchableHighlight
+        onPress={() => router.push(`/(application)/portofolio/${id}`)}
+      >
+        <View
+          style={{
+            backgroundColor: MainColor.white,
+            padding: 10,
+            borderRadius: 10,
+            marginTop: 10,
+          }}
+        >
+          <Text>Portofolio</Text>
+        </View>
+      </TouchableHighlight>
+    </>
+  );
+}

styles/global-styles.ts

@@ -1,10 +1,10 @@
+import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
 import { Dimensions, StyleSheet } from "react-native";
 import { AccentColor, MainColor } from "../constants/color-palet";
-import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
 
 const { width } = Dimensions.get("window");
 
-export const Styles = StyleSheet.create({
+export const GStyles = StyleSheet.create({
   container: {
     flex: 1,
     paddingInline: 20,