[resumes][feat] Fetch resumes for browse tabs (#326)

* [resumes][fix] Change browse list item styling

* [resumes][feat] Add protected tabs router for browse page

* [resumes][feat] Fetch all, starred and my resumes in browse page

* [resumes][fix] Fix overflow y scrolling

* [resumes][fix] Use date-fns to format upload time text

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

@@ -1,3 +1,4 @@
+import { formatDistanceToNow } from 'date-fns';
 import Link from 'next/link';
 import type { UrlObject } from 'url';
 import { ChevronRightIcon } from '@heroicons/react/20/solid';
@@ -13,8 +14,8 @@ type Props = Readonly<{
 export default function BrowseListItem({ href, resumeInfo }: Props) {
   return (
     <Link href={href}>
-      <div className="flex justify-between border-b border-slate-200 p-4">
-        <div>
+      <div className="grid grid-cols-8 border-b border-slate-200 p-4">
+        <div className="col-span-4">
           {resumeInfo.title}
           <div className="mt-2 flex items-center justify-start text-xs text-indigo-500">
             {resumeInfo.role}
@@ -33,11 +34,11 @@ export default function BrowseListItem({ href, resumeInfo }: Props) {
             </div>
           </div>
         </div>
-        <div className="self-center text-sm text-slate-500">
-          {/* TODO: Replace hardcoded days ago with calculated days ago*/}
-          Uploaded 2 days ago by {resumeInfo.user}
+        <div className="col-span-3 self-center text-sm text-slate-500">
+          Uploaded {formatDistanceToNow(resumeInfo.createdAt)} ago by{' '}
+          {resumeInfo.user}
         </div>
-        <ChevronRightIcon className="w-8" />
+        <ChevronRightIcon className="col-span-1 w-8 self-center justify-self-center" />
       </div>
     </Link>
   );

apps/portal/src/components/resumes/browse/constants.ts

@@ -1,3 +1,9 @@
+export const BROWSE_TABS_VALUES = {
+  ALL: 'all',
+  MY: 'my',
+  STARRED: 'starred',
+};
+
 export const SORT_OPTIONS = [
   { current: true, href: '#', name: 'Latest' },
   { current: false, href: '#', name: 'Popular' },