From bb3a08e4ddb55c01c9a46ad585fb44ef120d304c Mon Sep 17 00:00:00 2001
From: Terence Ho <>
Date: Wed, 5 Oct 2022 15:01:35 +0800
Subject: [PATCH] [resumes][refactor] Shift comments section to its own
 component

---
 .../components/resumes/CommentsSection.tsx    | 39 +++++++++++++++++++
 apps/portal/src/pages/resumes/review.tsx      | 34 ++--------------
 2 files changed, 42 insertions(+), 31 deletions(-)
 create mode 100644 apps/portal/src/components/resumes/CommentsSection.tsx

diff --git a/apps/portal/src/components/resumes/CommentsSection.tsx b/apps/portal/src/components/resumes/CommentsSection.tsx
new file mode 100644
index 00000000..d250e836
--- /dev/null
+++ b/apps/portal/src/components/resumes/CommentsSection.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { Button, Tabs } from '@tih/ui';
+
+export default function CommentsSection() {
+  const [tab, setTab] = useState('general');
+
+  return (
+    <div>
+      <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>
+  );
+}
diff --git a/apps/portal/src/pages/resumes/review.tsx b/apps/portal/src/pages/resumes/review.tsx
index a8f268b2..0afbe9ba 100644
--- a/apps/portal/src/pages/resumes/review.tsx
+++ b/apps/portal/src/pages/resumes/review.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import {
   AcademicCapIcon,
   BriefcaseIcon,
@@ -7,10 +6,10 @@ import {
   MapPinIcon,
   StarIcon,
 } from '@heroicons/react/20/solid';
-import { Button, Tabs } from '@tih/ui';
+
+import CommentsSection from '~/components/resumes/CommentsSection';
 
 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">
@@ -71,34 +70,7 @@ export default function ResumeReviewPage() {
       <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)}
-          />
+          <CommentsSection />
         </div>
       </div>
     </main>