fix: job card fallback image added & more ui fixes

code100x · Oct 2, 2024 · 69f6d49 · 69f6d49
1 parent 420fe84
commit 69f6d49
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 25 deletions.
diff --git a/src/components/Jobcard.tsx b/src/components/Jobcard.tsx
@@ -1,4 +1,4 @@
-import { Briefcase } from 'lucide-react';
+import { AlertCircle, Briefcase } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import Icon from './ui/icon';
@@ -11,16 +11,30 @@ export default function JobCard({ job }: { job: JobType }) {
     <Link
       key={job.id}
       href={`/jobs/${job.id}`}
-      className="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="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 "
     >
       <div className="flex w-full gap-3">
         <div className="size-16 relative">
-          <Image
-            alt="company_logo"
-            className="object-cover"
-            src={job.companyLogo}
-            fill
-          />
+          {job.companyLogo ? (
+            job.companyLogo === 'https://wwww.example.com' ? (
+              <div className=" w-full h-full flex items-center justify-center rounded-md">
+                <Image
+                  src={'/main.svg'}
+                  width={500}
+                  height={500}
+                  alt="company-logo"
+                />
+              </div>
+            ) : (
+              <Image
+                className="size-full object-cover "
+                src={job.companyLogo || ''}
+                width={'500'}
+                height={'500'}
+                alt="company-logo"
+              />
+            )
+          ) : null}
         </div>
         <div className="flex flex-col gap-2">
           <h1 className="font-bold text-black dark:text-white text-xl">
@@ -55,14 +69,20 @@ export default function JobCard({ job }: { job: JobType }) {
         </span>
       </div>
       <div className="flex flex-wrap gap-2">
-        {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}
+        {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>
+          ))
+        ) : (
+          <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>
-        ))}
+        )}
       </div>
     </Link>
   );

diff --git a/src/components/job.tsx b/src/components/job.tsx
@@ -22,19 +22,25 @@ export const Job = ({ job }: { job: JobType }) => {
   };
 
   return (
-    <aside className="col-span-1 flex flex-col gap-6 lg:col-span-4">
+    <aside className="col-span-1 flex flex-col gap-6 lg:col-span-4 ">
       <section className="grid gap-5 border-2 shadow-sm p-6 w-full bg-gradient-to-b from-[#F1F5F9] to-white dark:from-darkBgSecondary dark:to-darkBgTertiary rounded-lg">
         <div className="flex gap-4 items-center">
           <div className="w-[4rem] h-[4rem]  rounded-md">
-            {job.companyLogo && (
-              <Image
-                className="size-full object-cover "
-                src={job.companyLogo || ''}
-                width={'500'}
-                height={'500'}
-                alt="company-logo"
-              />
-            )}
+            {job.companyLogo ? (
+              job.companyLogo === 'https://www.example.com' ? (
+                <div className="bg-gray-200 w-full h-full flex items-center justify-center rounded-md">
+                  hi
+                </div>
+              ) : (
+                <Image
+                  className="size-full object-cover "
+                  src={job.companyLogo || ''}
+                  width={'500'}
+                  height={'500'}
+                  alt="company-logo"
+                />
+              )
+            ) : null}
           </div>
           <div className="flex flex-col gap-2">
             <h3 className="font-bold text-2xl">{job.title}</h3>