Merge branch 'main' of https://github.com/Paribesh01/job-board into f…

…eat/usequery
code100x · Nov 3, 2024 · 17421f8 · 17421f8
2 parents abfd631 + 2ed4b46
commit 17421f8
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -103,7 +103,6 @@
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^8.1.0",
     "@typescript-eslint/parser": "^8.1.0",
-    "100xdevs-job-board": "file:",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "husky": "^9.1.4",

diff --git a/src/app/jobs/page.tsx b/src/app/jobs/page.tsx
@@ -39,30 +39,39 @@ const page = async ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <div className="container grid sm:gap-6 gap-4 mt-12">
+      <div className="container relative grid sm:gap-6 gap-4 mt-12">
         <div className="grid gap-2">
           <h1 className="text-3xl sm:text-4xl font-bold">Explore Jobs</h1>
           <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
             Explore thousands of remote and onsite jobs that match your skills
             and aspirations.
           </p>
         </div>
+
         <div className="flex gap-6">
-          <div className="hidden sm:block border  h-fit rounded-lg w-[310px] ">
-            <JobFilters searchParams={parsedSearchParams} />
+          <div className="hidden w-[310px] rounded-lg sm:block border h-[calc(100vh-100px)] overflow-y-auto scrollbar-custom sticky top-[5.5rem]">
+            <div className=" ">
+              <JobFilters searchParams={parsedSearchParams} />
+            </div>
           </div>
-          <div className="grow">
-            <JobsHeader searchParams={parsedSearchParams} />
-            <Suspense
-              key={JSON.stringify(parsedSearchParams)}
-              fallback={
-                <div className="flex justify-center items-center h-full gap-5 ">
-                  <Loader />
-                </div>
-              }
-            >
-              <AllJobs searchParams={parsedSearchParams} />
-            </Suspense>
+
+          <div className="grow flex flex-col bg-background">
+            <div className="sticky top-[4.5rem] bg-background dark:bg-background z-10 py-4">
+              <JobsHeader searchParams={parsedSearchParams} />
+            </div>
+
+            <div className="grow bg-background">
+              <Suspense
+                key={JSON.stringify(parsedSearchParams)}
+                fallback={
+                  <div className="flex justify-center items-center h-full gap-5">
+                    <Loader />
+                  </div>
+                }
+              >
+                <AllJobs searchParams={parsedSearchParams} />
+              </Suspense>
+            </div>
           </div>
         </div>
       </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,5 +1,7 @@
 import type { Config } from 'tailwindcss';
 const { fontFamily } = require('tailwindcss/defaultTheme');
+import plugin from 'tailwindcss/plugin';
+
 const {
   default: flattenColorPalette,
 } = require('tailwindcss/lib/util/flattenColorPalette');
@@ -119,7 +121,35 @@ const config = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate'), addVariablesForColors],
+  plugins: [
+    require('tailwindcss-animate'),
+    addVariablesForColors,
+    plugin(({ addUtilities }) => {
+      addUtilities({
+        '.scrollbar-hide': {
+          '-ms-overflow-style': 'none',
+          'scrollbar-width': 'none',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+        },
+        '.scrollbar-custom': {
+          '&::-webkit-scrollbar': {
+            width: '12px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#1d2839', // Customize thumb color
+            borderRadius: '6px',
+            border: '3px solid transparent', // Add space around thumb
+            backgroundClip: 'content-box', // Adjust thumb size
+          },
+          '&::-webkit-scrollbar-track': {
+            background: 'transparent', // Hide track
+          },
+        },
+      });
+    }),
+  ],
 } satisfies Config;
 
 export default config;