From d10d6144b59504b830be1b6b6c6dd35294c342b4 Mon Sep 17 00:00:00 2001
From: Anurag Negi <115611556+anuragnegi000@users.noreply.github.com>
Date: Mon, 16 Sep 2024 22:36:59 +0530
Subject: [PATCH] feat:explore job page improvement (#349)

---
 src/components/all-jobs.tsx | 79 ++++++++++++++++++++--------------
 src/components/ui/card.tsx  | 86 +++++++++++++++++++++++++++++++++++++
 2 files changed, 133 insertions(+), 32 deletions(-)
 create mode 100644 src/components/ui/card.tsx

diff --git a/src/components/all-jobs.tsx b/src/components/all-jobs.tsx
index 67123e2c..5f421e53 100644
--- a/src/components/all-jobs.tsx
+++ b/src/components/all-jobs.tsx
@@ -1,5 +1,6 @@
 import { getAllJobs } from '@/actions/job.action';
 import { DEFAULT_PAGE, JOBS_PER_PAGE } from '@/config/app.config';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { JobQuerySchemaType } from '@/lib/validators/jobs.validator';
 import {
   PaginationNextButton,
@@ -17,7 +18,7 @@ type PaginatorProps = {
 
 const AllJobs = async ({ searchParams }: PaginatorProps) => {
   const jobs = await getAllJobs(searchParams);
-  if (!jobs.status) {
+  if (!jobs.status || !jobs.additional) {
     return <div>Error {jobs.message}</div>;
   }
   const totalPages =
@@ -26,38 +27,52 @@ const AllJobs = async ({ searchParams }: PaginatorProps) => {
   const currentPage = parseInt(searchParams.page?.toString()) || DEFAULT_PAGE;
   return (
     <div className="bg-background py-4 grid gap-3 w-full">
-      {jobs.additional?.jobs.map((job) => {
-        return (
-          <Link key={job.id} href={`/jobs/${job.id}`}>
-            <div
-              className="w-[94%] mx-auto flex flex-col items-start gap-4 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent"
-              key={job.id}
-            >
-              <div className="flex w-full flex-col gap-2">
-                <p className="font-semibold">{job.title}</p>
-                <p className="text-xs font-medium">{job.companyName}</p>
+      {jobs.additional.jobs.length > 0 ? (
+        jobs.additional?.jobs.map((job) => {
+          return (
+            <Link key={job.id} href={`/jobs/${job.id}`}>
+              <div
+                className="w-[94%] mx-auto flex flex-col items-start gap-4 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent"
+                key={job.id}
+              >
+                <div className="flex w-full flex-col gap-2">
+                  <p className="font-semibold">{job.title}</p>
+                  <p className="text-xs font-medium">{job.companyName}</p>
+                </div>
+                <div className="flex gap-2 text-xs text-muted-foreground">
+                  <span className="flex items-center gap-0.5">
+                    <Icon icon="location" size={12} />
+                    {job.address}{' '}
+                    <span className="capitalize">({job.workMode})</span>
+                  </span>
+                  <span className="flex items-center gap-0.5">
+                    {job.minSalary && <Icon icon="currency" size={12} />}
+                    {job.minSalary && job.maxSalary
+                      ? `${formatSalary(job.minSalary)}-${formatSalary(job.maxSalary)}`
+                      : 'Not disclosed'}
+                  </span>
+                </div>
+                <p className="flex gap-0.5 items-center text-muted-foreground text-xs">
+                  <Icon icon="description" size={12} />
+                  <span>{job.description}</span>
+                </p>
               </div>
-              <div className="flex gap-2 text-xs text-muted-foreground">
-                <span className="flex items-center gap-0.5">
-                  <Icon icon="location" size={12} />
-                  {job.address}{' '}
-                  <span className="capitalize">({job.workMode})</span>
-                </span>
-                <span className="flex items-center gap-0.5">
-                  {job.minSalary && <Icon icon="currency" size={12} />}
-                  {job.minSalary && job.maxSalary
-                    ? `${formatSalary(job.minSalary)}-${formatSalary(job.maxSalary)}`
-                    : 'Not disclosed'}
-                </span>
-              </div>
-              <p className="flex gap-0.5 items-center text-muted-foreground text-xs">
-                <Icon icon="description" size={12} />
-                <span>{job.description}</span>
-              </p>
-            </div>
-          </Link>
-        );
-      })}
+            </Link>
+          );
+        })
+      ) : (
+        <Card className="mx-auto max-w-md w-full">
+          <CardHeader>
+            <CardTitle className="text-center">No Jobs Found</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-center text-muted-foreground">
+              Sorry, no job openings meet your requirements at the moment.
+              Please check back later or adjust your search criteria.
+            </p>
+          </CardContent>
+        </Card>
+      )}
       <Pagination>
         <PaginationContent>
           {totalPages ? (
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 00000000..fcde18dd
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};