Skip to content

Commit

Permalink
feat:explore job page improvement (#349)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anuragnegi000
anuragnegi000 authored Sep 16, 2024
1 parent 19b6fe6 commit d10d614
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 32 deletions.
79 changes: 47 additions & 32 deletions src/components/all-jobs.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 =
Expand All @@ -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 ? (
Expand Down
86 changes: 86 additions & 0 deletions src/components/ui/card.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
};

0 comments on commit d10d614

Please sign in to comment.