feature components

deskripsi:
- BaseBox, TextCustom
- Perbaikan home & profile

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