[resumes][feat] decrease opacity of reviewed resumes

apps/portal/src/components/resumes/browse/ResumeListItem.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import Link from 'next/link';
 import type { UrlObject } from 'url';
@@ -31,20 +32,18 @@ type Props = Readonly<{
 export default function ResumeListItem({ href, resumeInfo }: Props) {
   return (
     <Link href={href}>
-      <div className="grid grid-cols-8">
+      <div
+        className={clsx(
+          resumeInfo.isResolved ? 'opacity-50' : '',
+          'grid grid-cols-8',
+        )}>
         <div className="col-span-7 grid gap-4 border-b border-slate-200 p-4 hover:bg-slate-100 sm:grid-cols-7">
           <div className="sm:col-span-4">
             <div className="flex items-center gap-3">
               <p>{resumeInfo.title}</p>
-              {resumeInfo.isResolved ? (
-                <p className="rounded-xl border border-slate-200 p-1 text-xs text-slate-300">
-                  Reviewed
-                </p>
-              ) : (
-                <p className="rounded-xl border border-slate-400 p-1 text-xs text-slate-500">
-                  Unreviewed
-                </p>
-              )}
+              <p className="rounded-xl border border-slate-400 p-1 text-xs text-slate-500">
+                {resumeInfo.isResolved ? 'Reviewed' : 'Unreviewed'}
+              </p>
             </div>
             <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
               <div className="flex">