[question][ui] add question detail page

apps/portal/src/components/questions/VotingButtons.tsx

@@ -0,0 +1,26 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { Button } from '@tih/ui';
+
+export type VotingButtonsProps = {
+  upvoteCount: number;
+};
+
+export default function VotingButtons({ upvoteCount }: VotingButtonsProps) {
+  return (
+    <div className="flex flex-col items-center">
+      <Button
+        icon={ChevronUpIcon}
+        isLabelHidden={true}
+        label="Upvote"
+        variant="tertiary"
+      />
+      <p>{upvoteCount}</p>
+      <Button
+        icon={ChevronDownIcon}
+        isLabelHidden={true}
+        label="Downvote"
+        variant="tertiary"
+      />
+    </div>
+  );
+}

apps/portal/src/components/questions/card/AnswerCard.tsx

@@ -0,0 +1,23 @@
+import VotingButtons from '../VotingButtons';
+
+export type AnswerCardProps = {
+  author: string;
+  content: string;
+  upvoteCount: number;
+};
+
+export default function AnswerCard({
+  author,
+  upvoteCount,
+  content,
+}: AnswerCardProps) {
+  return (
+    <div className="flex gap-4 rounded-md border p-4">
+      <VotingButtons upvoteCount={upvoteCount} />
+      <div>
+        <h1 className="font-bold">{author}</h1>
+        <p>{content}</p>
+      </div>
+    </div>
+  );
+}

apps/portal/src/components/questions/card/QuestionCard.tsx

@@ -1,11 +1,11 @@
 import {
   ChatBubbleBottomCenterTextIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
   EyeIcon,
 } from '@heroicons/react/24/outline';
 import { Badge, Button } from '@tih/ui';
 
+import VotingButtons from '../VotingButtons';
+
 type UpvoteProps =
   | {
       showVoteButtons: true;
@@ -42,6 +42,7 @@ export type QuestionCardProps = ActionButtonProps &
   StatisticsProps &
   UpvoteProps & {
     content: string;
+    href?: string;
     location: string;
     receivedCount: number;
     role: string;
@@ -61,26 +62,11 @@ export default function QuestionCard({
   timestamp,
   role,
   location,
+  href,
 }: QuestionCardProps) {
-  return (
+  const mainCard = (
     <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
-      {showVoteButtons && (
-        <div className="flex flex-col items-center">
-          <Button
-            icon={ChevronUpIcon}
-            isLabelHidden={true}
-            label="Upvote"
-            variant="tertiary"
-          />
-          <p>{upvoteCount}</p>
-          <Button
-            icon={ChevronDownIcon}
-            isLabelHidden={true}
-            label="Downvote"
-            variant="tertiary"
-          />
-        </div>
-      )}
+      {showVoteButtons && <VotingButtons upvoteCount={upvoteCount} />}
       <div className="flex flex-col gap-2">
         <div className="flex items-baseline justify-between">
           <div className="flex items-center gap-2 text-slate-500">
@@ -122,4 +108,14 @@ export default function QuestionCard({
       </div>
     </article>
   );
+
+  return href ? (
+    <a
+      className="ring-primary-500 rounded-md hover:bg-slate-50 focus:ring-2 focus-visible:outline-none active:bg-slate-100"
+      href={href}>
+      {mainCard}
+    </a>
+  ) : (
+    mainCard
+  );
 }

apps/portal/src/components/questions/card/QuestionOverviewCard.tsx

@@ -1,19 +1,17 @@
 import type { QuestionCardProps } from './QuestionCard';
 import QuestionCard from './QuestionCard';
 
-export type QuestionOverviewCardProps = Required<
-  Omit<
-    QuestionCardProps & {
-      showActionButton: false;
-      showUserStatistics: true;
-      showVoteButtons: true;
-    },
-    | 'actionButtonLabel'
-    | 'onActionButtonClick'
-    | 'showActionButton'
-    | 'showUserStatistics'
-    | 'showVoteButtons'
-  >
+export type QuestionOverviewCardProps = Omit<
+  QuestionCardProps & {
+    showActionButton: false;
+    showUserStatistics: true;
+    showVoteButtons: true;
+  },
+  | 'actionButtonLabel'
+  | 'onActionButtonClick'
+  | 'showActionButton'
+  | 'showUserStatistics'
+  | 'showVoteButtons'
 >;
 
 export default function QuestionOverviewCard(props: QuestionOverviewCardProps) {

apps/portal/src/components/questions/card/SimilarQuestionCard.tsx

@@ -1,21 +1,19 @@
 import type { QuestionCardProps } from './QuestionCard';
 import QuestionCard from './QuestionCard';
 
-export type SimilarQuestionCardProps = Required<
-  Omit<
-    QuestionCardProps & {
-      showActionButton: true;
-      showUserStatistics: false;
-      showVoteButtons: false;
-    },
-    | 'actionButtonLabel'
-    | 'answerCount'
-    | 'onActionButtonClick'
-    | 'showActionButton'
-    | 'showUserStatistics'
-    | 'showVoteButtons'
-    | 'upvoteCount'
-  >
+export type SimilarQuestionCardProps = Omit<
+  QuestionCardProps & {
+    showActionButton: true;
+    showUserStatistics: false;
+    showVoteButtons: false;
+  },
+  | 'actionButtonLabel'
+  | 'answerCount'
+  | 'onActionButtonClick'
+  | 'showActionButton'
+  | 'showUserStatistics'
+  | 'showVoteButtons'
+  | 'upvoteCount'
 > & {
   onSimilarQuestionClick: () => void;
 };

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

@@ -0,0 +1,35 @@
+import { Button, Collapsible, 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';
+
+export default function QuestionPage() {
+  const question = SAMPLE_QUESTION;
+  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>
+        <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

@@ -13,6 +13,7 @@ import {
   LOCATIONS,
   QUESTION_AGES,
   QUESTION_TYPES,
+  SAMPLE_QUESTION,
 } from '~/utils/questions/constants';
 
 export default function QuestionsHomePage() {
@@ -219,13 +220,8 @@ export default function QuestionsHomePage() {
                 <QuestionOverviewCard
                   // eslint-disable-next-line react/no-array-index-key
                   key={index}
-                  answerCount={0}
-                  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"
-                  location="Menlo Park, CA"
-                  receivedCount={0}
-                  role="Senior Engineering Manager"
-                  timestamp="Last month"
-                  upvoteCount={0}
+                  href="/questions/1/1"
+                  {...SAMPLE_QUESTION}
                 />
               ))}
             </div>

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

@@ -68,3 +68,14 @@ export const LOCATIONS: FilterChoices = [
     value: 'taiwan',
   },
 ];
+
+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',
+  location: 'Menlo Park, CA',
+  receivedCount: 12,
+  role: 'Software Engineer',
+  timestamp: 'Last month',
+  upvoteCount: 5,
+};