app/(application)/(user)/_layout.tsx

@@ -93,6 +93,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="forum/[id]/forumku"
+          options={{
+            title: "Forumku",
+            headerLeft: () => <BackButton icon={'close'} />,
+          }}
+        />
 
         {/* ========== Maps Section ========= */}
         <Stack.Screen

app/(application)/(user)/forum/[id]/forumku.tsx

@@ -0,0 +1,42 @@
+import {
+  AvatarCustom,
+  ButtonCustom,
+  CenterCustom,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import Forum_BerandaSection from "@/screens/Forum/berandaSection";
+import { useLocalSearchParams } from "expo-router";
+
+export default function Forumku() {
+  const { id } = useLocalSearchParams();
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <CenterCustom>
+          <AvatarCustom
+            href={`/(application)/(image)/preview-image/${id}`}
+            size="xl"
+          />
+        </CenterCustom>
+
+        <Grid>
+          <Grid.Col span={6}>
+            <TextCustom bold truncate>
+              @bagas_banuna
+            </TextCustom>
+            <TextCustom>1 postingan</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
+            <ButtonCustom href={`/profile/${id}`}>
+              Kunjungi Profile
+            </ButtonCustom>
+          </Grid.Col>
+        </Grid>
+      <Forum_BerandaSection />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/forum/index.tsx

@@ -9,16 +9,17 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Forum_BerandaSection from "@/screens/Forum/berandaSection";
 import { Ionicons } from "@expo/vector-icons";
-import { router, Stack } from "expo-router";
+import { router, Stack, useLocalSearchParams } from "expo-router";
 
 export default function Forum() {
+  const { id } = useLocalSearchParams();
   return (
     <>
       <Stack.Screen
         options={{
           title: "Forum",
           headerLeft: () => <BackButton />,
-          headerRight: () => <AvatarCustom />,
+          headerRight: () => <AvatarCustom href={`/forum/${id}/forumku`}/>,
         }}
       />
 

bun.lock

@@ -11,6 +11,7 @@
         "@react-navigation/native": "^7.1.6",
         "@react-navigation/native-stack": "^7.3.21",
         "@types/react-native-vector-icons": "^6.4.18",
+        "dayjs": "^1.11.13",
         "expo": "53.0.17",
         "expo-blur": "~14.1.5",
         "expo-camera": "~16.1.10",
@@ -703,6 +704,8 @@
 
     "data-view-byte-offset": ["data-view-byte-offset@1.0.1", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-data-view": "^1.0.1" } }, "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ=="],
 
+    "dayjs": ["dayjs@1.11.13", "", {}, "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="],
+
     "debug": ["debug@4.4.1", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ=="],
 
     "decode-uri-component": ["decode-uri-component@0.2.2", "", {}, "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="],

components/Button/BackButton.tsx

@@ -8,14 +8,28 @@ import { Href, router } from "expo-router";
  * @default router.back()
  * @returns if path : router.replace(path) else router.back()
  */
-const LeftButtonCustom = ({path}: {path?: Href}) => {
+const LeftButtonCustom = ({
+  path,
+  icon = "arrow-back",
+  iconCustom,
+}: {
+  path?: Href;
+  icon?: React.ReactNode | any;
+  iconCustom?: React.ReactNode;
+}) => {
   return (
+    <>
+      {iconCustom ? (
+        iconCustom
+      ) : (
         <Ionicons
-      name="arrow-back"
+          name={icon}
           size={20}
           color={MainColor.yellow}
-      onPress={() => path ? router.replace(path) : router.back()}
+          onPress={() => (path ? router.replace(path) : router.back())}
         />
+      )}
+    </>
   );
 };
 

components/Button/ButtonCustom.tsx

@@ -5,6 +5,7 @@ import { StyleProp, Text, TouchableOpacity, ViewStyle } from "react-native";
 import { radiusMap } from "@/constants/radius-value";
 import { MainColor } from "@/constants/color-palet";
 import { stylesButton } from "./buttonCustomStyles";
+import { Href, router } from "expo-router";
 
 // Import radiusMap
 
@@ -13,6 +14,7 @@ type RadiusType = keyof typeof radiusMap | number;
 
 interface ButtonProps {
   children?: React.ReactNode;
+  href?: Href;
   onPress?: () => void;
   title?: string;
   backgroundColor?: string;
@@ -25,6 +27,7 @@ interface ButtonProps {
 
 const ButtonCustom: React.FC<ButtonProps> = ({
   children,
+  href,
   onPress,
   title = "Button",
   backgroundColor = MainColor.yellow,
@@ -44,7 +47,13 @@ const ButtonCustom: React.FC<ButtonProps> = ({
           : { backgroundColor },
         style,
       ]}
-      onPress={onPress}
+      onPress={() => {
+        if (href) {
+          router.push(href);
+        } else {
+          onPress?.();
+        }
+      }}
       disabled={disabled}
       activeOpacity={0.8}
     >

package.json

@@ -18,6 +18,7 @@
     "@react-navigation/native": "^7.1.6",
     "@react-navigation/native-stack": "^7.3.21",
     "@types/react-native-vector-icons": "^6.4.18",
+    "dayjs": "^1.11.13",
     "expo": "53.0.17",
     "expo-blur": "~14.1.5",
     "expo-camera": "~16.1.10",

screens/Forum/berandaSection.tsx

@@ -1,10 +1,19 @@
-import { BaseBox, Grid, AvatarCustom, TextCustom, ClickableCustom, Spacing } from "@/components";
+import {
+  BaseBox,
+  Grid,
+  AvatarCustom,
+  TextCustom,
+  ClickableCustom,
+  Spacing,
+} from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Entypo, Ionicons } from "@expo/vector-icons";
 import { View } from "react-native";
+import dayjs from "dayjs";
 
 export default function Forum_BerandaSection() {
+  const dateNow = dayjs().format("DD/MM/YYYY")
   return (
     <>
       {Array.from({ length: 10 }).map((e, i) => (
@@ -52,14 +61,20 @@ export default function Forum_BerandaSection() {
               <TextCustom truncate={2}>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
                 inventore iure pariatur, libero omnis excepturi. Ullam ad
-                  officiis deleniti quos esse odit nesciunt, ipsam adipisci
+                officiis deleniti quos esse odit nesciunt, ipsam adipisci cumque
-                  cumque aliquam corporis culpa fugit?
+                aliquam corporis culpa fugit?
               </TextCustom>
             </View>
             <Spacing />
 
+            <Grid>
+              <Grid.Col span={6}>
                 <View
-                style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 10,
+                  }}
                 >
                   <Ionicons
                     name="chatbubble-outline"
@@ -68,6 +83,11 @@ export default function Forum_BerandaSection() {
                   />
                   <TextCustom>2</TextCustom>
                 </View>
+              </Grid.Col>
+              <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
+                <TextCustom size="small"> {dateNow}</TextCustom>
+              </Grid.Col>
+            </Grid>
           </View>
         </BaseBox>
       ))}