fix nama komponen profile

screens/Profile/profilSection.tsx

@@ -4,7 +4,8 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
-import { Image, ImageBackground, StyleSheet, View } from "react-native";
+import { View } from "react-native";
+import AvatarAndBackground from "./AvatarAndBackground";
 
 export default function ProfilSection() {
   const { id } = useLocalSearchParams();
@@ -43,7 +44,7 @@ export default function ProfilSection() {
   return (
     <>
       <BaseBox>
-        <ProfileScreen />
+        <AvatarAndBackground />
         <Spacing height={50} />
 
         <View style={{ alignItems: "center" }}>
@@ -113,91 +114,8 @@ export default function ProfilSection() {
           ))}
         </View>
       </BaseBox>
-
-      {/* <TouchableHighlight
-        onPress={() => router.push(`/(application)/portofolio/${id}`)}
-      >
-        <View
-          style={{
-            backgroundColor: MainColor.white,
-            padding: 10,
-            borderRadius: 10,
-            marginTop: 10,
-          }}
-        >
-          <Text>Portofolio</Text>
-        </View>
-      </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,
-  },
-});