feature & fix

deskripsi:
- new component Clickable
- new folder (image) untuk take picture dan imaga preview
- fix klik gambar
# No Issue

screens/Authentication/LoginView.tsx

@@ -35,6 +35,7 @@ export default function LoginView() {
     // router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
     // router.navigate(`/(application)/(user)/portofolio/${id}`)
+    // router.navigate(`/(application)/(image)/preview-image/${id}`);
   }
 
   return (

screens/Portofolio/DataPortofolio.tsx

@@ -1,6 +1,8 @@
 import {
   AvatarCustom,
   BaseBox,
+  CenterCustom,
+  ClickableCustom,
   Grid,
   StackCustom,
   TextCustom,
@@ -9,7 +11,7 @@ import DividerCustom from "@/components/Divider/DividerCustom";
 import { AccentColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
-import { useLocalSearchParams } from "expo-router";
+import { router, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
 
 export default function Portofolio_Data() {
@@ -88,9 +90,26 @@ export default function Portofolio_Data() {
             </Grid.Col>
           </Grid>
 
-          <View style={{ alignItems: "center" }}>
+          {/* <ClickableCustom
+            style={{ backgroundColor: "blue" }}
+            onPress={() => {
+              router.navigate(`/(application)/(image)/preview-image/${id}`);
+            }}
+          >
             <AvatarCustom size="xl" />
-          </View>
+          </ClickableCustom> */}
+
+          <ClickableCustom
+            style={{}}
+            onPress={() => {
+              router.navigate(`/(application)/(image)/preview-image/${id}`);
+            }}
+          >
+            <CenterCustom>
+              <AvatarCustom size="xl" />
+            </CenterCustom>
+          </ClickableCustom>
+
           {/* <Spacing height={10}/> */}
 
           <View>

screens/Profile/AvatarAndBackground.tsx

@@ -1,24 +1,45 @@
-import { AvatarCustom } from "@/components";
+import { AvatarCustom, ClickableCustom } from "@/components";
 import { AccentColor } from "@/constants/color-palet";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
-import { View, ImageBackground, StyleSheet } from "react-native";
+import { router } from "expo-router";
+import { ImageBackground, StyleSheet, View } from "react-native";
 
-const AvatarAndBackground = () => {
+const AvatarAndBackground = ({
+  backgroundId,
+  imageId,
+}: {
+  backgroundId: string;
+  imageId: string;
+}) => {
   return (
     <View style={styles.container}>
-      <ImageBackground
-        source={DUMMY_IMAGE.background}
-        style={styles.backgroundImage}
-        resizeMode="contain"
-      />
       {/* Background Image */}
+      <ClickableCustom
+        onPress={() => {
+          router.navigate(
+            `/(application)/(image)/preview-image/${backgroundId}`
+          );
+        }}
+      >
+        <ImageBackground
+          source={DUMMY_IMAGE.background}
+          style={styles.backgroundImage}
+          resizeMode="cover"
+        />
+      </ClickableCustom>
 
       {/* Avatar yang sedikit keluar */}
+
       <View style={styles.avatarOverlap}>
-        <AvatarCustom
-          source={DUMMY_IMAGE.avatar}
-          size="lg"
-        />
+        <ClickableCustom
+          onPress={() => {
+            router.navigate(
+              `/(application)/(image)/preview-image/${imageId}`
+            );
+          }}
+        >
+          <AvatarCustom source={DUMMY_IMAGE.avatar} size="lg" />
+        </ClickableCustom>
       </View>
     </View>
   );
@@ -49,4 +70,4 @@ const styles = StyleSheet.create({
     left: "50%", // Sentralisasi horizontal
     transform: [{ translateX: -50 }], // Menggeser ke kiri 50% lebarnya
   },
-});
+});

screens/Profile/profilSection.tsx

@@ -43,7 +43,7 @@ export default function ProfilSection() {
   return (
     <>
       <BaseBox>
-        <AvatarAndBackground />
+        <AvatarAndBackground backgroundId="test-background-id" imageId="test-image-id" />
         <Spacing height={50} />
 
         <View style={{ alignItems: "center" }}>