[questions][ui] question page

apps/portal/src/components/questions/QuestionsNavigation.ts

@@ -2,9 +2,9 @@ import type { ProductNavigationItems } from '~/components/global/ProductNavigati
 
 const navigation: ProductNavigationItems = [
   { href: '/questions', name: 'Home' },
-  { href: '#', name: 'My Lists' },
-  { href: '#', name: 'My Questions' },
-  { href: '#', name: 'History' },
+  { href: '/questions', name: 'My Lists' },
+  { href: '/questions', name: 'My Questions' },
+  { href: '/questions', name: 'History' },
 ];
 
 const config = {

apps/portal/src/pages/questions/[id]/[slug]/index.tsx

@@ -1,34 +1,109 @@
-import { Button, Collapsible, TextArea } from '@tih/ui';
+import { useRouter } from 'next/router';
+import { useForm } from 'react-hook-form';
+import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
+import { Button, Collapsible, Select, TextArea } from '@tih/ui';
 
 import AnswerCard from '~/components/questions/card/AnswerCard';
 import QuestionOverviewCard from '~/components/questions/card/QuestionOverviewCard';
 
 import { SAMPLE_QUESTION } from '~/utils/questions/constants';
+import { useFormRegister } from '~/utils/questions/useFormRegister';
+
+export type AnswerQuestionData = {
+  answerContent: string;
+};
 
 export default function QuestionPage() {
+  const router = useRouter();
+  const {
+    register: formRegister,
+    handleSubmit,
+    formState: { isDirty, isValid },
+  } = useForm<AnswerQuestionData>({ mode: 'onChange' });
+  const register = useFormRegister(formRegister);
   const question = SAMPLE_QUESTION;
+
+  const handleBackNavigation = () => {
+    router.back();
+  };
+
+  const handleSubmitAnswer = (data: AnswerQuestionData) => {
+    // eslint-disable-next-line no-console
+    console.log(data);
+  };
+
   return (
-    <div className="flex w-full flex-col items-center overflow-y-auto p-4">
-      <div className="flex max-w-7xl flex-col gap-2">
-        <h1 className="text-2xl">Question overview</h1>
-        <QuestionOverviewCard {...question} />
-        <Collapsible label="256 comments">
-          <div>Comment placeholder</div>
-        </Collapsible>
-        <TextArea label="Contribute an answer" rows={5} />
-        <div className="flex justify-end">
-          <Button label="Contribute" variant="primary" />
+    <div className="flex">
+      <div className="flex items-baseline gap-2 py-4 pl-4">
+        <Button
+          addonPosition="start"
+          display="inline"
+          icon={ArrowSmallLeftIcon}
+          label="Back"
+          variant="secondary"
+          onClick={handleBackNavigation}></Button>
+      </div>
+      <div className="flex flex-col items-center overflow-y-auto py-4 px-5">
+        <div className="flex max-w-7xl flex-col gap-2">
+          <QuestionOverviewCard {...question} />
+          <Collapsible label="256 comments">
+            <div>Comment placeholder</div>
+          </Collapsible>
+          <form onSubmit={handleSubmit(handleSubmitAnswer)}>
+            <TextArea
+              {...register('answerContent', { minLength: 1, required: true })}
+              label="Contribute your answer"
+              required={true}
+              resize="vertical"
+              rows={5}
+            />
+            <div className="mt-2 flex justify-end">
+              <Button
+                disabled={!isDirty || !isValid}
+                label="Contribute"
+                type="submit"
+                variant="primary"
+              />
+            </div>
+          </form>
+          <div className="my-2 flex items-baseline justify-between">
+            <p>{question.answerCount} answers</p>
+            <div className="flex items-baseline gap-2">
+              <span aria-hidden={true} className="text-sm">
+                Sort by:
+              </span>
+              <Select
+                display="inline"
+                isLabelHidden={true}
+                label="Sort by"
+                options={[
+                  {
+                    label: 'Most recent',
+                    value: 'most-recent',
+                  },
+                  {
+                    label: 'Most upvotes',
+                    value: 'most-upvotes',
+                  },
+                ]}
+                value="most-recent"
+                onChange={(value) => {
+                  // eslint-disable-next-line no-console
+                  console.log(value);
+                }}></Select>
+            </div>
+          </div>
+
+          {Array.from({ length: question.answerCount }).map((_, index) => (
+            <AnswerCard
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              author="James Smith"
+              content="Hello"
+              upvoteCount={10}
+            />
+          ))}
         </div>
-        <p>{question.answerCount} answers</p>
-        {Array.from({ length: question.answerCount }).map((_, index) => (
-          <AnswerCard
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            author="James Smith"
-            content="Hello"
-            upvoteCount={10}
-          />
-        ))}
       </div>
     </div>
   );

apps/portal/src/pages/questions/index.tsx

@@ -215,6 +215,10 @@ export default function QuestionsHomePage() {
                   },
                 ]}
                 sortValue="most-recent"
+                onSortChange={(value) => {
+                  // eslint-disable-next-line no-console
+                  console.log(value);
+                }}
               />
               {Array.from({ length: 10 }).map((_, index) => (
                 <QuestionOverviewCard

apps/portal/src/utils/questions/constants.ts

@@ -72,7 +72,7 @@ export const LOCATIONS: FilterChoices = [
 export const SAMPLE_QUESTION = {
   answerCount: 10,
   content:
-    'Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and',
+    'Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums andiven an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums andiven an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums andiven an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums andiven an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums andiven an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums andiven an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums andiven an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and',
   location: 'Menlo Park, CA',
   receivedCount: 12,
   role: 'Software Engineer',