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

@@ -3,16 +3,14 @@ import {
   AvatarCustom,
   BackButton,
   DrawerCustom,
-  TextInputCustom,
+  SearchInput,
   ViewWrapper,
 } from "@/components";
 import FloatingButton from "@/components/Button/FloatingButton";
 import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
 import { listDummyDiscussionForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import { useState } from "react";
 
@@ -34,20 +32,7 @@ export default function Forum() {
       />
 
       <ViewWrapper
-        headerComponent={
-          <TextInputCustom
-            iconLeft={
-              <Ionicons
-                name="search-outline"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.placeholder}
-              />
-            }
-            placeholder="Cari topik forum..."
-            borderRadius={50}
-            containerStyle={{ marginBottom: 0 }}
-          />
-        }
+        headerComponent={<SearchInput placeholder="Cari topik diskusi" />}
         floatingButton={
           <FloatingButton
             onPress={() =>

app/(application)/(user)/job/(tabs)/index.tsx

@@ -1,9 +1,34 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+    AvatarUsernameAndOtherComponent,
+    BoxWithHeaderSection,
+    FloatingButton,
+    SearchInput,
+    Spacing,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { jobDataDummy } from "@/screens/Job/listDataDummy";
+import { router } from "expo-router";
 
 export default function JobBeranda() {
-    return (
-        <ViewWrapper>
-            <TextCustom>Job Beranda</TextCustom>
-        </ViewWrapper>
-    );
-}
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/job/create")} />
+      }
+      headerComponent={<SearchInput placeholder="Cari pekerjaan" />}
+    >
+      {jobDataDummy.map((item, index) => (
+        <BoxWithHeaderSection key={index}>
+          <AvatarUsernameAndOtherComponent avatarHref={`/profile/${item.id}`} />
+          <Spacing />
+          <TextCustom truncate={2} align="center" bold size="large">
+            {item.posisi}
+          </TextCustom>
+          <Spacing />
+        </BoxWithHeaderSection>
+      ))}
+    </ViewWrapper>
+  );
+}

components/_ShareComponent/SearchInput.tsx

@@ -0,0 +1,39 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import TextInputCustom from "../TextInput/TextInputCustom";
+import { Ionicons } from "@expo/vector-icons";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+
+interface SearchInputProps {
+  placeholder?: string;
+  onPress?: () => void;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<TextStyle>;
+}
+export default function SearchInput({
+  placeholder,
+  onPress,
+  iconLeft,
+  iconRight,
+  containerStyle = { marginBottom: 0 },
+  style,
+  ...props
+}: SearchInputProps) {
+  return (
+    <TextInputCustom
+      iconLeft={
+        <Ionicons
+          name="search-outline"
+          size={ICON_SIZE_SMALL}
+          color={MainColor.placeholder}
+        />
+      }
+      placeholder={placeholder}
+      borderRadius={50}
+      containerStyle={containerStyle}
+      {...props}
+    />
+  );
+}

components/index.ts

@@ -49,6 +49,7 @@ import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHe
 import Spacing from "./_ShareComponent/Spacing";
 import TabBarBackground from "./_ShareComponent/TabBarBackground";
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
+import SearchInput from "./_ShareComponent/SearchInput";
 
 export {
   AlertCustom,
@@ -91,6 +92,7 @@ export {
   // Select
   SelectCustom,
   // ShareComponent
+  SearchInput,
   Spacing,
   // Stack
   StackCustom,

screens/Job/listDataDummy.ts

@@ -0,0 +1,82 @@
+export const jobDataDummy = [
+  {
+    id: 1,
+    posisi: "Front-End Developer",
+    perusahaan: "PT Teknologi Hebat",
+    lokasi: "Jakarta",
+    deskripsi: "Membangun UI dengan React.js",
+    tanggalDibuka: "2025-07-25",
+  },
+  {
+    id: 2,
+    posisi: "Back-End Developer",
+    perusahaan: "PT Solusi Digital",
+    lokasi: "Bandung",
+    deskripsi: "REST API dengan Node.js & Express",
+    tanggalDibuka: "2025-07-20",
+  },
+  {
+    id: 3,
+    posisi: "UI/UX Designer",
+    perusahaan: "StartupKita",
+    lokasi: "Yogyakarta",
+    deskripsi: "Desain aplikasi mobile dengan Figma",
+    tanggalDibuka: "2025-07-15",
+  },
+  {
+    id: 4,
+    posisi: "DevOps Engineer",
+    perusahaan: "Cloudify Indonesia",
+    lokasi: "Remote",
+    deskripsi: "Automasi CI/CD pipeline di AWS",
+    tanggalDibuka: "2025-07-22",
+  },
+  {
+    id: 5,
+    posisi: "Mobile Developer",
+    perusahaan: "AppMaju",
+    lokasi: "Surabaya",
+    deskripsi: "Kembangkan aplikasi Flutter",
+    tanggalDibuka: "2025-07-10",
+  },
+  {
+    id: 6,
+    posisi: "Data Analyst",
+    perusahaan: "InsightData",
+    lokasi: "Jakarta",
+    deskripsi: "Visualisasi data & dashboard BI",
+    tanggalDibuka: "2025-07-18",
+  },
+  {
+    id: 7,
+    posisi: "Machine Learning Engineer",
+    perusahaan: "AIWorks",
+    lokasi: "Bandung",
+    deskripsi: "Model prediktif dengan Python & TensorFlow",
+    tanggalDibuka: "2025-07-05",
+  },
+  {
+    id: 8,
+    posisi: "System Administrator",
+    perusahaan: "NetSecure",
+    lokasi: "Depok",
+    deskripsi: "Maintain server Linux & firewall",
+    tanggalDibuka: "2025-07-08",
+  },
+  {
+    id: 9,
+    posisi: "Quality Assurance",
+    perusahaan: "TechTesters",
+    lokasi: "Semarang",
+    deskripsi: "Manual & automated testing",
+    tanggalDibuka: "2025-07-12",
+  },
+  {
+    id: 10,
+    posisi: "Product Manager",
+    perusahaan: "Inovasi Digital",
+    lokasi: "Remote",
+    deskripsi: "Riset, roadmap, dan koordinasi tim dev",
+    tanggalDibuka: "2025-07-01",
+  },
+];