From 3566f0c6079af9ecc7d713e73e7cb616610c87f7 Mon Sep 17 00:00:00 2001
From: Wu Peirong <wupeirong294@gmail.com>
Date: Tue, 4 Oct 2022 23:13:49 +0800
Subject: [PATCH] [resumes][feat] WIP: Add scaffold

---
 apps/portal/src/pages/_app.tsx           |   1 +
 apps/portal/src/pages/profile.tsx        |   4 +-
 apps/portal/src/pages/resumes/review.tsx | 106 +++++++++++++++++++++++
 3 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 apps/portal/src/pages/resumes/review.tsx

diff --git a/apps/portal/src/pages/_app.tsx b/apps/portal/src/pages/_app.tsx
index 5de4ac99..bd05dbec 100644
--- a/apps/portal/src/pages/_app.tsx
+++ b/apps/portal/src/pages/_app.tsx
@@ -11,6 +11,7 @@ import AppShell from '~/components/global/AppShell';
 
 import type { AppRouter } from '~/server/router';
 
+import '@tih/ui/styles.css';
 import '~/styles/globals.css';
 
 const MyApp: AppType<{ session: Session | null }> = ({
diff --git a/apps/portal/src/pages/profile.tsx b/apps/portal/src/pages/profile.tsx
index bf849d02..26d1ef27 100644
--- a/apps/portal/src/pages/profile.tsx
+++ b/apps/portal/src/pages/profile.tsx
@@ -9,8 +9,8 @@ export default function ProfilePage() {
   }
 
   return (
-    <main className="flex-1 overflow-y-auto p-6 space-y-6">
-      <h1 className="font-bold text-4xl">Profile</h1>
+    <main className="flex-1 space-y-6 overflow-y-auto p-6">
+      <h1 className="text-4xl font-bold">Profile</h1>
       {session?.user?.image && (
         <img
           alt={session?.user?.email ?? session?.user?.name ?? ''}
diff --git a/apps/portal/src/pages/resumes/review.tsx b/apps/portal/src/pages/resumes/review.tsx
new file mode 100644
index 00000000..a8f268b2
--- /dev/null
+++ b/apps/portal/src/pages/resumes/review.tsx
@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import {
+  AcademicCapIcon,
+  BriefcaseIcon,
+  CalendarIcon,
+  InformationCircleIcon,
+  MapPinIcon,
+  StarIcon,
+} from '@heroicons/react/20/solid';
+import { Button, Tabs } from '@tih/ui';
+
+export default function ResumeReviewPage() {
+  const [tab, setTab] = useState('general');
+  return (
+    <main className="m-4 flex-1 overflow-y-auto">
+      <div className="flex flex-row md:space-x-8">
+        <h1 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+          Please help moi, applying for medtech startups in Singapore
+        </h1>
+        <button
+          className="isolate inline-flex max-h-10 items-center space-x-4 rounded-md rounded-l-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          type="button">
+          <span className="relative inline-flex">
+            <StarIcon
+              aria-hidden="true"
+              className="-ml-1 mr-2 h-5 w-5 text-gray-400"
+            />
+            Star
+          </span>
+          <span className="relative -ml-px inline-flex">12k</span>
+        </button>
+      </div>
+      <div className="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-8">
+        <div className="mt-2 flex items-center text-sm text-gray-500">
+          <BriefcaseIcon
+            aria-hidden="true"
+            className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+          />
+          Software Engineer (Backend)
+        </div>
+        <div className="mt-2 flex items-center text-sm text-gray-500">
+          <MapPinIcon
+            aria-hidden="true"
+            className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+          />
+          Singapore
+        </div>
+        <div className="mt-2 flex items-center text-sm text-gray-500">
+          <AcademicCapIcon
+            aria-hidden="true"
+            className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+          />
+          Fresh Grad
+        </div>
+        <div className="mt-2 flex items-center text-sm text-gray-500">
+          <CalendarIcon
+            aria-hidden="true"
+            className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+          />
+          Uploaded 2 days ago by Git Ji Ra
+        </div>
+      </div>
+      <div className="mt-2 flex items-center text-sm text-gray-500">
+        <InformationCircleIcon
+          aria-hidden="true"
+          className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+        />
+        Looking to break into SWE roles after doing engineering for the past 2
+        years
+      </div>
+      <div className="mt-4 flex h-full w-full flex-row">
+        <div className="w-1/2">Hello</div>
+        <div className="mx-8 w-1/2">
+          <Button display="block" label="Add your review" variant="tertiary" />
+          <Tabs
+            label="comments"
+            tabs={[
+              {
+                label: 'General',
+                value: 'general',
+              },
+              {
+                label: 'Experience',
+                value: 'experience',
+              },
+              {
+                label: 'Education',
+                value: 'education',
+              },
+              {
+                label: 'Project',
+                value: 'project',
+              },
+              {
+                label: 'Skills',
+                value: 'skills',
+              },
+            ]}
+            value={tab}
+            onChange={(value) => setTab(value)}
+          />
+        </div>
+      </div>
+    </main>
+  );
+}