feature components

deskripsi:
- BaseBox, TextCustom
- Perbaikan home & profile

screens/Authentication/LoginView.tsx

@@ -25,7 +25,9 @@ export default function LoginView() {
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
     const fixNumber = callingCode + inputValue;
     console.log(fixNumber);
-    router.navigate("/(application)/profile/1");
+    // router.navigate("/(application)/profile/1");
+    router.navigate("/(application)/home");
+
   }
 
   return (

screens/Home/HomeView.tsx

@@ -1,120 +0,0 @@
-import Spacing from "@/components/_ShareComponent/Spacing";
-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 { stylesHome } from "./homeViewStyle";
-
-export default function HomeView() {
-  return (
-    <>
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-        <View style={GStyles.homeContainer}>
-          <Spacing height={20} />
-          <View
-            style={{
-              alignItems: "center",
-              justifyContent: "center",
-              backgroundColor: "#fff",
-              borderRadius: 10,
-            }}
-          >
-            <Image
-              source={require("@/assets/images/constants/home-hipmi.png")}
-              // placeholder={{ blurhash: "" }}
-              contentFit="cover"
-              transition={1000}
-              style={{
-                width: "100%",
-                height: 120,
-                borderRadius: 10,
-              }}
-            />
-          </View>
-
-          <Spacing height={10} />
-
-          {/* Grid Section */}
-          <View style={stylesHome.gridContainer}>
-            <TouchableOpacity
-              style={stylesHome.gridItem}
-              onPress={() => router.push("/(application)/event")}
-            >
-              <Ionicons name="analytics" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Event</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={stylesHome.gridItem}>
-              <Ionicons name="share" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Collaboration</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={stylesHome.gridItem}>
-              <Ionicons name="cube" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Voting</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={stylesHome.gridItem}>
-              <Ionicons name="heart" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
-            </TouchableOpacity>
-          </View>
-
-          <Spacing height={10} />
-
-          {/* Job Vacancy Section */}
-          <View style={stylesHome.jobVacancyContainer}>
-            <View style={stylesHome.jobVacancyHeader}>
-              <Icon name="briefcase" size={24} color="white" />
-              <Text style={stylesHome.jobVacancyTitle}>Job Vacancy</Text>
-            </View>
-
-            <View style={stylesHome.vacancyList}>
-              {/* Vacancy Item 1 */}
-              <View style={stylesHome.vacancyItem}>
-                {/* <Icon name="user" size={20} color="#FFD700" /> */}
-                <View style={stylesHome.vacancyDetails}>
-                  <DynamicTruncatedText
-                    text="Bagas_banuna"
-                    fontSize={14}
-                    fontFamily="System"
-                    style={stylesHome.vacancyName}
-                  />
-                  <Spacing height={5} />
-                  <DynamicTruncatedText
-                    text="Dicari perawat kucing"
-                    fontSize={12}
-                    fontFamily="System"
-                    style={stylesHome.vacancyDescription}
-                  />
-                </View>
-              </View>
-
-              {/* Vacancy Item 2 */}
-              <View style={stylesHome.vacancyItem}>
-                {/* <Icon name="user" size={20} color="#FFD700" /> */}
-                <View style={stylesHome.vacancyDetails}>
-                  <DynamicTruncatedText
-                    text="fibramarcell"
-                    fontSize={14}
-                    fontFamily="System"
-                    style={stylesHome.vacancyName}
-                  />
-                  <Spacing height={5} />
-                  <DynamicTruncatedText
-                    text="Di Butuhkan Seorang..."
-                    fontSize={12}
-                    fontFamily="System"
-                    style={stylesHome.vacancyDescription}
-                  />
-                </View>
-              </View>
-            </View>
-          </View>
-
-          <Spacing height={20} />
-        </View>
-      </ScrollView>
-    </>
-  );
-}

screens/Home/bottomFeatureSection.tsx

@@ -1,6 +1,7 @@
+import { TextCustom } from "@/components";
 import Spacing from "@/components/_ShareComponent/Spacing";
-import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
-import { Text, View } from "react-native";
+import React from "react";
+import { View } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
 import { stylesHome } from "./homeViewStyle";
 
@@ -10,7 +11,10 @@ export default function Home_BottomFeatureSection() {
       <View style={stylesHome.jobVacancyContainer}>
         <View style={stylesHome.jobVacancyHeader}>
           <Icon name="briefcase" size={24} color="white" />
-          <Text style={stylesHome.jobVacancyTitle}>Job Vacancy</Text>
+          <Spacing width={10}/>
+          <TextCustom bold size="large">
+            Job Vacancy
+          </TextCustom>
         </View>
 
         <View style={stylesHome.vacancyList}>
@@ -18,19 +22,13 @@ export default function Home_BottomFeatureSection() {
           <View style={stylesHome.vacancyItem}>
             {/* <Icon name="user" size={20} color="#FFD700" /> */}
             <View style={stylesHome.vacancyDetails}>
-              <DynamicTruncatedText
-                text="Bagas_banuna"
-                fontSize={14}
-                fontFamily="System"
-                style={stylesHome.vacancyName}
-              />
+              <TextCustom bold color="yellow" truncate size="large">
+                Bagas_banuna
+              </TextCustom>
               <Spacing height={5} />
-              <DynamicTruncatedText
-                text="Dicari perawat kucing"
-                fontSize={12}
-                fontFamily="System"
-                style={stylesHome.vacancyDescription}
-              />
+              <TextCustom truncate={2}>
+                Dicari perawat kucing dan perawat anjing
+              </TextCustom>
             </View>
           </View>
 
@@ -38,19 +36,13 @@ export default function Home_BottomFeatureSection() {
           <View style={stylesHome.vacancyItem}>
             {/* <Icon name="user" size={20} color="#FFD700" /> */}
             <View style={stylesHome.vacancyDetails}>
-              <DynamicTruncatedText
-                text="fibramarcell"
-                fontSize={14}
-                fontFamily="System"
-                style={stylesHome.vacancyName}
-              />
+              <TextCustom bold color="yellow" truncate size="large">
+                fibramarcell
+              </TextCustom>
               <Spacing height={5} />
-              <DynamicTruncatedText
-                text="Di Butuhkan Seorang..."
-                fontSize={12}
-                fontFamily="System"
-                style={stylesHome.vacancyDescription}
-              />
+              <TextCustom truncate={2}>
+                Di Butuhkan Seorang Programer dan Designer
+              </TextCustom>
             </View>
           </View>
         </View>

screens/Profile/profilSection.tsx

@@ -1,9 +1,10 @@
-import { Spacing, TextCustom } from "@/components";
-import { AccentColor, MainColor } from "@/constants/color-palet";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { BaseBox, Grid, Spacing, TextCustom } from "@/components";
+import { 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";
+import { useLocalSearchParams } from "expo-router";
+import { Image, ImageBackground, StyleSheet, View } from "react-native";
 
 export default function ProfilSection() {
   const { id } = useLocalSearchParams();
@@ -41,51 +42,79 @@ export default function ProfilSection() {
 
   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}
+      <BaseBox>
+        <ProfileScreen />
+        <Spacing height={50} />
+
+        <View style={{ alignItems: "center" }}>
+          <TextCustom bold size="large" align="center">
+            Nama User
+          </TextCustom>
+          <Spacing height={5} />
+          <TextCustom size="small">@Username</TextCustom>
+        </View>
+        <Spacing height={30} />
+
+        {listData.map((item, index) => (
+          <Grid key={index}>
+            <Grid.Col
+              span={2}
               style={{
-                flexDirection: "row",
                 alignItems: "center",
-                marginBottom: 20,
-                // flexWrap: "wrap",
-                // backgroundColor: "gray",
+                justifyContent: "center",
               }}
             >
               {item.icon}
-              <Spacing />
+            </Grid.Col>
+            <Grid.Col span={10}>
+              <TextCustom bold>{item.label}</TextCustom>
+            </Grid.Col>
+          </Grid>
+        ))}
+      </BaseBox>
 
-              <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>
+      <BaseBox>
+        <View>
+          <TextCustom bold size="large" align="center">
+            Portofolio
+          </TextCustom>
+          <Spacing />
+
+          {Array.from({ length: 2 }).map((_, index) => (
+            <BaseBox
+              key={index}
+              style={{ backgroundColor: MainColor.darkblue }}
+              onPress={() => console.log("pressed")}
+            >
+              <Grid>
+                <Grid.Col
+                  span={10}
+                  style={{ justifyContent: "center", backgroundColor: "" }}
+                >
+                  <TextCustom bold size="large" truncate={1}>
+                    Nama usaha portofolio
+                  </TextCustom>
+                  <TextCustom size="small" color="yellow">
+                    #id-porofolio12345
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col
+                  span={2}
+                  style={{ alignItems: "flex-end", justifyContent: "center" }}
+                >
+                  <Ionicons
+                    name="caret-forward"
+                    size={ICON_SIZE_SMALL}
+                    color="white"
+                  />
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
           ))}
         </View>
-      </View>
+      </BaseBox>
 
-      <TouchableHighlight
+      {/* <TouchableHighlight
         onPress={() => router.push(`/(application)/portofolio/${id}`)}
       >
         <View
@@ -98,7 +127,77 @@ export default function ProfilSection() {
         >
           <Text>Portofolio</Text>
         </View>
-      </TouchableHighlight>
+      </TouchableHighlight> */}
     </>
   );
 }
+
+const ProfileScreen = () => {
+  return (
+    <View style={styles.container}>
+      {/* Background Image */}
+      <ImageBackground
+        source={require("@/assets/images/dummy/dummy-image-background.jpg")}
+        style={styles.backgroundImage}
+        resizeMode="cover"
+      />
+
+      {/* Avatar yang sedikit keluar */}
+      <View style={styles.avatarOverlap}>
+        <Image
+          source={require("@/assets/images/dummy/dummy-avatar.png")}
+          style={styles.overlappingAvatar}
+          resizeMode="cover"
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  backgroundImage: {
+    width: "100%",
+    height: 150, // Tinggi background sesuai kebutuhan
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 6,
+    overflow: "hidden",
+  },
+  userOverlay: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    overflow: "hidden",
+    backgroundColor: "white",
+    borderWidth: 3,
+    borderColor: "#fff",
+    position: "absolute", // Untuk posisi overlay
+    top: 75, // Posisi overlay di tengah background
+    left: "50%", // Sentralisasi horizontal
+    transform: [{ translateX: -50 }], // Menggeser ke kiri 50% lebarnya
+  },
+  userImage: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 50,
+  },
+  avatarOverlap: {
+    position: "absolute", // Meletakkan avatar di atas background
+    top: 90, // Posisi avatar sedikit keluar dari background
+    left: "50%", // Sentralisasi horizontal
+    transform: [{ translateX: -50 }], // Menggeser ke kiri 50% lebarnya
+  },
+  overlappingAvatar: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    borderWidth: 3,
+    borderColor: "#fff",
+    backgroundColor: MainColor.white,
+  },
+});