From c5798b3127c048dd38fe7b2415d9e8618f8cc038 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Thu, 10 Jul 2025 16:47:02 +0800
Subject: [PATCH] feature & fix deskripsi: - new component Clickable - new
 folder (image) untuk take picture dan imaga preview - fix klik gambar # No
 Issue

---
 .../(image)/preview-image/[id]/index.tsx      |  9 ++++
 .../{ => (image)}/take-picture/[id]/index.tsx |  0
 app/(application)/_layout.tsx                 | 25 +++++-----
 components/Clickable/ClickableCustom.tsx      | 36 ++++++++++++++
 components/index.ts                           | 14 ++++--
 screens/Authentication/LoginView.tsx          |  1 +
 screens/Portofolio/DataPortofolio.tsx         | 25 ++++++++--
 screens/Profile/AvatarAndBackground.tsx       | 47 ++++++++++++++-----
 screens/Profile/profilSection.tsx             |  2 +-
 9 files changed, 127 insertions(+), 32 deletions(-)
 create mode 100644 app/(application)/(image)/preview-image/[id]/index.tsx
 rename app/(application)/{ => (image)}/take-picture/[id]/index.tsx (100%)
 create mode 100644 components/Clickable/ClickableCustom.tsx

diff --git a/app/(application)/(image)/preview-image/[id]/index.tsx b/app/(application)/(image)/preview-image/[id]/index.tsx
new file mode 100644
index 0000000..199ed15
--- /dev/null
+++ b/app/(application)/(image)/preview-image/[id]/index.tsx
@@ -0,0 +1,9 @@
+import { LandscapeFrameUploaded, ViewWrapper } from "@/components";
+
+export default function PreviewImage() {
+  return (
+    <ViewWrapper>
+      <LandscapeFrameUploaded />
+    </ViewWrapper>
+  );
+}
diff --git a/app/(application)/take-picture/[id]/index.tsx b/app/(application)/(image)/take-picture/[id]/index.tsx
similarity index 100%
rename from app/(application)/take-picture/[id]/index.tsx
rename to app/(application)/(image)/take-picture/[id]/index.tsx
diff --git a/app/(application)/_layout.tsx b/app/(application)/_layout.tsx
index 6c7737b..ad1a073 100644
--- a/app/(application)/_layout.tsx
+++ b/app/(application)/_layout.tsx
@@ -1,7 +1,6 @@
-import { MainColor } from "@/constants/color-palet";
+import { BackButton } from "@/components";
 import { HeaderStyles } from "@/styles/header-styles";
-import { Ionicons } from "@expo/vector-icons";
-import { router, Stack } from "expo-router";
+import { Stack } from "expo-router";
 
 export default function ApplicationLayout() {
   return (
@@ -11,17 +10,19 @@ export default function ApplicationLayout() {
 
         {/* Take Picture */}
         <Stack.Screen
-          name="take-picture/[id]/index"
+          name="(image)/take-picture/[id]/index"
           options={{
             title: "Ambil Gambar",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* Preview Image */}
+        <Stack.Screen
+          name="(image)/preview-image/[id]/index"
+          options={{
+            title: "Preview Gambar",
+            headerLeft: () => <BackButton />,
           }}
         />
       </Stack>
diff --git a/components/Clickable/ClickableCustom.tsx b/components/Clickable/ClickableCustom.tsx
new file mode 100644
index 0000000..c6d7e7b
--- /dev/null
+++ b/components/Clickable/ClickableCustom.tsx
@@ -0,0 +1,36 @@
+import { StyleSheet, TouchableOpacity } from "react-native";
+
+export default function ClickableCustom({
+  children,
+  onPress,
+  disabled,
+  style,
+  ...props
+}: {
+  children: React.ReactNode;
+  onPress: () => void;
+  disabled?: boolean;
+  style?: any;
+  [key: string]: any;
+}) {
+  return (
+    <>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={onPress}
+        disabled={disabled}
+        style={[styles.container, style]}
+        {...props}
+      >
+        {children}
+      </TouchableOpacity>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    height: "auto",
+  },
+});
diff --git a/components/index.ts b/components/index.ts
index 44a7f0c..f2f2ed3 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -33,16 +33,22 @@ import LandscapeFrameUploaded from "./Image/LandscapeFrameUploaded";
 import DividerCustom from "./Divider/DividerCustom";
 // Map
 import MapCustom from "./Map/MapCustom";
+// Center
+import CenterCustom from "./Center/CenterCustom";
+// Clickable
+import ClickableCustom from "./Clickable/ClickableCustom";
 
 export {
   AlertCustom,
   // Image
   AvatarCustom,
-  LeftButtonCustom as BackButton,
+  LandscapeFrameUploaded,
   // Box
   BaseBox,
   BoxButtonOnFooter,
   ButtonCenteredOnly,
+  InformationBox,
+  LeftButtonCustom as BackButton,
   // Button
   ButtonCustom,
   // Drawer
@@ -50,8 +56,6 @@ export {
   MenuDrawerDynamicGrid,
   // Grid
   Grid,
-  InformationBox,
-  LandscapeFrameUploaded,
   // Map
   MapCustom,
   // Select
@@ -70,4 +74,8 @@ export {
   ViewWrapper,
   // Divider
   DividerCustom,
+  // Center
+  CenterCustom,
+  // Clickable
+  ClickableCustom,
 };
diff --git a/screens/Authentication/LoginView.tsx b/screens/Authentication/LoginView.tsx
index 8bc78ec..2c208de 100644
--- a/screens/Authentication/LoginView.tsx
+++ b/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 (
diff --git a/screens/Portofolio/DataPortofolio.tsx b/screens/Portofolio/DataPortofolio.tsx
index 63adf9c..88f8d04 100644
--- a/screens/Portofolio/DataPortofolio.tsx
+++ b/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>
diff --git a/screens/Profile/AvatarAndBackground.tsx b/screens/Profile/AvatarAndBackground.tsx
index 0673df8..885518a 100644
--- a/screens/Profile/AvatarAndBackground.tsx
+++ b/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
   },
-});
\ No newline at end of file
+});
diff --git a/screens/Profile/profilSection.tsx b/screens/Profile/profilSection.tsx
index 449cfc9..131ce03 100644
--- a/screens/Profile/profilSection.tsx
+++ b/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" }}>