From 141eb02d455143377191d92fa5e3a1d30af54411 Mon Sep 17 00:00:00 2001
From: VineeTagarwaL-code <vineetagarwal.now@gmail.com>
Date: Fri, 4 Oct 2024 23:48:39 +0530
Subject: [PATCH] fix: minor ui fixes

---
 next.config.js                |  2 +-
 prisma/seed.ts                |  9 ++++---
 src/actions/skills.cron.ts    |  1 -
 src/actions/upload-to-cdn.ts  |  1 -
 src/components/Jobcard.tsx    | 46 ++++++++++++++++++++++++++---------
 src/components/RecentJobs.tsx |  2 +-
 src/components/job-form.tsx   |  5 ++--
 src/components/job.tsx        | 13 ++++++----
 8 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/next.config.js b/next.config.js
index a7a7256c..88b2d991 100644
--- a/next.config.js
+++ b/next.config.js
@@ -32,7 +32,7 @@ const nextConfig = {
       },
       {
         protocol: 'https',
-        hostname: 'wwww.example.com',
+        hostname: 'www.example.com',
       },
     ],
   },
diff --git a/prisma/seed.ts b/prisma/seed.ts
index e17c7580..33f07ebf 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -235,8 +235,8 @@ let jobs = [
     maxExperience: 2,
     companyLogo: '',
     hasSalaryRange: true,
-    minSalary: 75000,
-    maxSalary: 95000,
+    minSalary: 75,
+    maxSalary: 95,
     isVerifiedJob: false,
   },
   {
@@ -256,7 +256,8 @@ let jobs = [
     companyLogo: '',
     hasSalaryRange: true,
     hasExperiencerange: false,
-    maxSalary: 50000,
+    minSalary: 25,
+    maxSalary: 50,
     isVerifiedJob: true,
   },
   {
@@ -337,7 +338,7 @@ async function seedJobs() {
             hasExperiencerange: j.hasExperiencerange,
             minExperience: j.minExperience,
             maxExperience: j.maxExperience,
-            companyLogo: '/spotify.png',
+            companyLogo: '/main.svg',
             hasSalaryRange: j.hasSalaryRange,
             minSalary: j.minSalary,
             maxSalary: j.maxSalary,
diff --git a/src/actions/skills.cron.ts b/src/actions/skills.cron.ts
index 698f1ea7..4528c71c 100644
--- a/src/actions/skills.cron.ts
+++ b/src/actions/skills.cron.ts
@@ -31,7 +31,6 @@ const options = {
 };
 
 async function fetchAuthTokenCronJob() {
-  console.log('Fetching updated Lightcast token at ' + new Date());
   try {
     const response = await fetch(url, options);
     if (!response.ok) {
diff --git a/src/actions/upload-to-cdn.ts b/src/actions/upload-to-cdn.ts
index ca967570..d57ea3c2 100644
--- a/src/actions/upload-to-cdn.ts
+++ b/src/actions/upload-to-cdn.ts
@@ -14,7 +14,6 @@ export async function uploadFileAction(formData: FormData) {
     if (!file) {
       return { error: 'File is required', status: 400 };
     }
-
     const uploadUrl = `${CDN_BASE_UPLOAD_URL}/${uniqueFileName}`;
     const fileBuffer = Buffer.from(await file.arrayBuffer());
 
diff --git a/src/components/Jobcard.tsx b/src/components/Jobcard.tsx
index d52feba8..c58a5799 100644
--- a/src/components/Jobcard.tsx
+++ b/src/components/Jobcard.tsx
@@ -5,18 +5,27 @@ import Icon from './ui/icon';
 import { formatSalary } from '@/lib/utils';
 import { JobType } from '@/types/jobs.types';
 import _ from 'lodash';
-
-export default function JobCard({ job }: { job: JobType }) {
+import { cn } from '@/lib/utils';
+export default function JobCard({
+  job,
+  className,
+}: {
+  job: JobType;
+  className?: string;
+}) {
   return (
     <Link
       key={job.id}
       href={`/jobs/${job.id}`}
-      className="min-h-[250px] overflow-y-scroll sm:text-sm text-xs text-slate-500 dark:text-slate-400 font-medium flex flex-col border p-6 bg-slate-100 gap-4 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-lg "
+      className={cn(
+        'min-h-[200px] overflow-y-scroll sm:text-sm text-xs text-slate-500 dark:text-slate-400 font-medium flex flex-col border p-6 bg-slate-100 gap-4 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-lg ',
+        className
+      )}
     >
       <div className="flex w-full gap-3">
         <div className="size-16 relative">
           {job.companyLogo ? (
-            job.companyLogo === 'https://wwww.example.com' ? (
+            job.companyLogo === 'https://www.example.com' ? (
               <div className=" w-full h-full flex items-center justify-center rounded-md">
                 <Image
                   src={'/main.svg'}
@@ -70,15 +79,28 @@ export default function JobCard({ job }: { job: JobType }) {
       </div>
       <div className="flex flex-wrap gap-2">
         {job.skills && job.skills.length !== 0 ? (
-          job.skills.map((item, index) => (
-            <div
-              key={index}
-              className="bg-slate-500 bg-opacity-10 text-slate-500 dark:text-slate-400 font-medium text-sm rounded-full px-2"
-            >
-              {item}
-            </div>
-          ))
+          !(job.skills.length > 4) ? (
+            // If there are more than 3 skills, show them all
+            job.skills.map((item, index) => (
+              <div
+                key={index}
+                className="bg-slate-500 bg-opacity-10 text-slate-500 dark:text-slate-400 font-medium text-sm rounded-full px-2"
+              >
+                {item}
+              </div>
+            ))
+          ) : (
+            job.skills.slice(0, 7).map((item, index) => (
+              <div
+                key={index}
+                className="bg-slate-500 bg-opacity-10 text-slate-500 dark:text-slate-400 font-medium text-sm rounded-full px-2"
+              >
+                {item}
+              </div>
+            ))
+          )
         ) : (
+          // If there are no skills, show the "No skills provided" message
           <div className="mt-3 bg-slate-500 flex justify-start items-center gap-3 bg-opacity-10 text-slate-500 dark:text-slate-400 font-medium text-sm rounded-full px-2">
             <AlertCircle size={12} /> No skills provided
           </div>
diff --git a/src/components/RecentJobs.tsx b/src/components/RecentJobs.tsx
index 5b2eafad..c2655b77 100644
--- a/src/components/RecentJobs.tsx
+++ b/src/components/RecentJobs.tsx
@@ -10,7 +10,7 @@ export default async function RecentJobs() {
   return (
     <div className="w-full grid md:grid-cols-3 grid-cols-1 gap-6 items-center mt-10">
       {recentJobs.additional.recentJobs.map((job, index) => (
-        <JobCard job={job} key={index} />
+        <JobCard job={job} key={index} className="min-h-[250px]" />
       ))}
     </div>
   );
diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx
index 66b3cb22..8aa67fb7 100644
--- a/src/components/job-form.tsx
+++ b/src/components/job-form.tsx
@@ -132,8 +132,7 @@ const PostJobForm = () => {
 
   const handleFormSubmit = async (data: JobPostSchemaType) => {
     try {
-      data.companyLogo =
-        (await submitImage(file)) ?? 'https://wwww.example.com';
+      data.companyLogo = (await submitImage(file)) ?? 'https://www.example.com';
       const response = await createJob(data);
 
       if (!response.status) {
@@ -175,7 +174,7 @@ const PostJobForm = () => {
       form.setValue('minSalary', 0);
       form.setValue('maxSalary', 0);
     }
-    form.setValue('companyLogo', 'https://wwww.example.com');
+    form.setValue('companyLogo', '/main.svg');
   }, [watchHasSalaryRange, form]);
 
   if (session.status === 'loading') return null;
diff --git a/src/components/job.tsx b/src/components/job.tsx
index 1fc413d2..b8291245 100644
--- a/src/components/job.tsx
+++ b/src/components/job.tsx
@@ -14,7 +14,7 @@ const options = {
 export const Job = ({ job }: { job: JobType }) => {
   const shareOnTwitter = () => {
     const tweetText = encodeURIComponent(
-      'I just read an amazing blog post! Check it out:'
+      'Check out this job posting @100xDevs: ' + job.title
     );
     const tweetUrl = encodeURIComponent(window.location.href);
     const twitterUrl = `https://twitter.com/intent/tweet?text=${tweetText}&url=${tweetUrl}`;
@@ -59,16 +59,18 @@ export const Job = ({ job }: { job: JobType }) => {
             <span className="flex bg-green-500/20 font-bold rounded-lg px-4 py-1 text-green-500 text-xs md:text-sm items-center gap-0.5">
               {!!job.minSalary && <Icon icon="currency" size={16} />}
               {job.minSalary && job.maxSalary
-                ? `${formatSalary(job.minSalary)}-${formatSalary(job.maxSalary)}`
+                ? `${formatSalary(job.minSalary)}k-${formatSalary(job.maxSalary)}k`
                 : 'Not disclosed'}
             </span>
+            <span className="flex justify-center items-center gap-2">
+              <MapPin size={16} />
+              <p className="text-xs md:text-sm font-semibold">{job.address}</p>
+            </span>
           </div>
         </div>
 
         <div className="flex items-center gap-2">
-          <MapPin size={16} />
-          <p className="text-xs md:text-sm font-semibold">{job.address}</p>
-          <div className="w-full md:max-w-[60%] flex-wrap flex justify-start items-center gap-2">
+          <div className="w-full md:max-w-[80%] flex-wrap flex justify-start items-center gap-2">
             {job.skills.map((skill, index) => {
               return (
                 <span
@@ -86,6 +88,7 @@ export const Job = ({ job }: { job: JobType }) => {
           <Button className="justify-self-start px-6 dark:text-white py-2 w-fit h-fit">
             Apply Now
           </Button>
+
           <Button
             variant="outline"
             size="sm"