From b913cb6b786f075068ef56f7579869ce76017a01 Mon Sep 17 00:00:00 2001
From: Tan Su Yin <e0425292@u.nus.edu>
Date: Thu, 6 Oct 2022 18:37:46 +0800
Subject: [PATCH] [resume][feat] Add browse list item UI

---
 .../resumes/browse/BrowseListItem.tsx         | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/apps/portal/src/components/resumes/browse/BrowseListItem.tsx b/apps/portal/src/components/resumes/browse/BrowseListItem.tsx
index 3d2e6509..a9d9c438 100644
--- a/apps/portal/src/components/resumes/browse/BrowseListItem.tsx
+++ b/apps/portal/src/components/resumes/browse/BrowseListItem.tsx
@@ -1,5 +1,7 @@
 import Link from 'next/link';
 import type { UrlObject } from 'url';
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
+import { ChatBubbleLeftIcon, StarIcon } from '@heroicons/react/24/outline';
 
 type ResumeInfo = Readonly<{
   createdAt: Date;
@@ -19,11 +21,31 @@ type Props = Readonly<{
 export default function BrowseListItem({ href, resumeInfo }: Props) {
   return (
     <Link href={href}>
-      {resumeInfo.title}
-      {resumeInfo.role}
-      {resumeInfo.experience}
-      {resumeInfo.numComments}
-      {resumeInfo.numStars}
+      <div className="flex justify-between border-b border-slate-200 p-4">
+        <div>
+          {resumeInfo.title}
+          <div className="mt-2 flex items-center justify-start text-xs text-indigo-500">
+            {resumeInfo.role}
+            <div className="ml-6 rounded-md border border-indigo-500 p-1">
+              {resumeInfo.experience}
+            </div>
+          </div>
+          <div className="mt-2 flex justify-start text-xs text-slate-500">
+            <div className="flex gap-2 pr-8">
+              <ChatBubbleLeftIcon className="w-4" />
+              {resumeInfo.numComments} comments
+            </div>
+            <div className="flex gap-2">
+              <StarIcon className="w-4" />
+              {resumeInfo.numStars} stars
+            </div>
+          </div>
+        </div>
+        <div className="self-center text-sm text-slate-500">
+          Uploaded 2 days ago by {resumeInfo.user}
+        </div>
+        <ChevronRightIcon className="w-8" />
+      </div>
     </Link>
   );
 }