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

@@ -5,8 +5,8 @@ import BackButton from "@/components/Button/BackButton";
 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 ProfilSection from "@/screens/Profile/profilSection";
+import Profile_MenuDrawerSection from "@/screens/Profile/MenuDrawerSection";
+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";

components/Avatar/AvatarCustom.tsx

@@ -0,0 +1,55 @@
+import { MainColor } from "@/constants/color-palet";
+import { Image, ImageSourcePropType, StyleSheet } from "react-native";
+
+type Size = "base" | "sm" | "md" | "lg";
+
+interface AvatarCustomProps {
+  source?: ImageSourcePropType;
+  size?: Size;
+}
+
+const sizeMap = {
+  base: 40,
+  sm: 60,
+  md: 80,
+  lg: 100,
+};
+
+export default function AvatarCustom({
+  source = require("@/assets/images/dummy/dummy-avatar.png"),
+  size = "base",
+}: AvatarCustomProps) {
+  const dimension = sizeMap[size];
+
+  return (
+    <Image
+      source={source}
+      style={[
+        styles.overlappingAvatar,
+        {
+          width: dimension,
+          height: dimension,
+          borderRadius: dimension / 2,
+        },
+      ]}
+      resizeMode="cover"
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  overlappingAvatar: {
+    borderWidth: 2,
+    borderColor: "#fff",
+    backgroundColor: MainColor.white,
+    // shadowColor: "#000",
+    // shadowOffset: { width: 0, height: 2 },
+    // shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+});

components/index.ts

@@ -17,6 +17,8 @@ import { TextInputCustom } from "./TextInput/TextInputCustom";
 import Grid from "./Grid/GridCustom";
 // Box
 import BaseBox from "./Box/BaseBox";
+// Avatar
+import AvatarCustom from "./Avatar/AvatarCustom"
 
 export {
   AlertCustom,
@@ -37,4 +39,6 @@ export {
   Grid,
   // Box
   BaseBox,
+  // Avatar
+  AvatarCustom,
 };

screens/Profile/AvatarAndBackground.tsx

@@ -0,0 +1,51 @@
+import { AvatarCustom } from "@/components";
+import { AccentColor } from "@/constants/color-palet";
+import { View, ImageBackground, StyleSheet } from "react-native";
+
+const AvatarAndBackground = () => {
+  return (
+    <View style={styles.container}>
+      <ImageBackground
+        source={require("@/assets/images/logo-hipmi.png")}
+        style={styles.backgroundImage}
+        resizeMode="contain"
+      />
+      {/* Background Image */}
+
+      {/* Avatar yang sedikit keluar */}
+      <View style={styles.avatarOverlap}>
+        <AvatarCustom
+          source={require("@/assets/images/react-logo.png")}
+          size="lg"
+        />
+      </View>
+    </View>
+  );
+};
+
+export default AvatarAndBackground;
+
+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",
+    borderWidth: 1,
+    borderColor: AccentColor.blue,
+    backgroundColor: "white",
+  },
+  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
+  },
+});

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