Add liquid search & jobs list.

app/jobs/_layout.tsx

@@ -1,6 +1,10 @@
-import { Stack } from "expo-router";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 
 function JobsStack() {
+  const router = useRouter();
+  const params = useLocalSearchParams();
+  console.log("*** ~ JobsStack ~ params:", params);
+
   return (
     <Stack
       screenOptions={{
@@ -9,8 +13,27 @@ function JobsStack() {
         },
       }}
     >
-      <Stack.Screen name="index" options={{ title: "Active Jobs" }} />
-      <Stack.Screen name="[jobId]" options={{ title: "Job Details" }} />
+      <Stack.Screen
+        name="index"
+        options={{
+          title: "Search",
+          headerSearchBarOptions: {
+            placement: "automatic",
+            placeholder: "Search",
+            onChangeText: (event) => {
+              router.setParams({
+                search: event?.nativeEvent?.text,
+              });
+            },
+          },
+        }}
+      />
+      <Stack.Screen
+        name="[jobId]"
+        options={({ route }) => ({
+          title: (route.params as any)?.title || "Job Details",
+        })}
+      />
     </Stack>
   );
 }

app/jobs/index.tsx

@@ -1,24 +1,4 @@
-import { Link } from "expo-router";
-import { StyleSheet, Text, View } from "react-native";
-
+import JobsList from "../../components/jobs-list/jobs-list";
 export default function Tab() {
-  return (
-    <View style={styles.container}>
-      <Text>Jobs Screen.</Text>
-      <Link
-        href={{ pathname: "/jobs/[jobId]", params: { jobId: 123 } }}
-        withAnchor
-      >
-        Go to detail
-      </Link>
-    </View>
-  );
+  return <JobsList />;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});