add job page layout for consistency with questions page design

Author: saifulshihab

app/(main)/jobs/layout.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function Layout({
+  children
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <div>
+      <div className="flex h-[3.125rem] items-center border-b border-dashed px-4">
+        <h1 className="text-2xl font-semibold leading-none">Jobs</h1>
+      </div>
+      <div className="h-[calc(100vh-3.125rem)] overflow-y-auto p-3">
+        {children}
+      </div>
+    </div>
+  );
+}

app/(main)/jobs/loading.tsx

@@ -3,13 +3,8 @@ import { Skeleton } from "@/components/ui/skeleton";
 function Loading() {
   return (
     <div>
-      {/* Header */}
-      <div className="flex h-[3.125rem] items-center border-b border-dashed px-4">
-        <Skeleton className="h-7 w-20 bg-zinc-800" />
-      </div>
-
       {/* Content */}
-      <div className="h-[calc(100vh-3.125rem)] space-y-3 overflow-y-auto p-3">
+      <div className="h-[calc(100vh-3.125rem)] space-y-3 overflow-y-auto">
         {/* Filter Skeleton */}
         <div className="space-y-2 rounded-lg border border-zinc-800 bg-zinc-900 p-4">
           <div className="flex items-center justify-between">

app/(main)/jobs/page.tsx

@@ -32,16 +32,7 @@ async function Page({ searchParams }: { searchParams: JobsPageSearchParams }) {
   const result = await getJobs(filters);
   const jobs = result?.jobs || [];
 
-  return (
-    <div>
-      <div className="flex h-[3.125rem] items-center border-b border-dashed px-4">
-        <h1 className="text-2xl font-semibold leading-none">Jobs</h1>
-      </div>
-      <div className="h-[calc(100vh-3.125rem)] space-y-3 overflow-y-auto p-3">
-        <JobList jobs={jobs} />
-      </div>
-    </div>
-  );
+  return <JobList jobs={jobs} />;
 }
 
 export default Page;