[questions][ui] answer card

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

@@ -1,23 +1,43 @@
+import { format } from 'date-fns';
+
+import withHref from '~/utils/questions/withHref';
+
 import VotingButtons from '../VotingButtons';
 
 export type AnswerCardProps = {
-  author: string;
+  authorImageUrl: string;
+  authorName: string;
   content: string;
+  createdAt: Date;
   upvoteCount: number;
 };
 
-export default function AnswerCard({
+function AnswerCardWithoutHref({
-  author,
+  authorName,
+  authorImageUrl,
   upvoteCount,
   content,
+  createdAt,
 }: AnswerCardProps) {
   return (
-    <div className="flex gap-4 rounded-md border p-4">
+    <div className="flex gap-4 rounded-md border p-2">
-      <VotingButtons upvoteCount={upvoteCount} />
+      <VotingButtons size="sm" upvoteCount={upvoteCount} />
-      <div>
+      <div className="mt-1 flex flex-col gap-1">
-        <h1 className="font-bold">{author}</h1>
+        <div className="flex items-center gap-2">
-        <p>{content}</p>
+          <img
+            alt={`${authorName} profile picture`}
+            className="h-8 w-8 rounded-full"
+            src={authorImageUrl}></img>
+          <h1 className="font-bold">{authorName}</h1>
+          <p className="pt-1 text-xs font-extralight">
+            Posted on: {format(createdAt, 'Pp')}
+          </p>
+        </div>
+        <p className="pl-1 pt-1">{content}</p>
       </div>
     </div>
   );
 }
+
+const AnswerCard = withHref(AnswerCardWithoutHref);
+export default AnswerCard;

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

@@ -0,0 +1,68 @@
+import { Badge } from '@tih/ui';
+
+import VotingButtons from '../VotingButtons';
+
+type UpvoteProps =
+  | {
+      showVoteButtons: true;
+      upvoteCount: number;
+    }
+  | {
+      showVoteButtons?: false;
+      upvoteCount?: never;
+    };
+
+export type FullQuestionCardProps = UpvoteProps & {
+  company: string;
+  content: string;
+  href?: string;
+  location: string;
+  receivedCount: number;
+  role: string;
+  timestamp: string;
+};
+
+export default function FullQuestionCard({
+  company,
+  content,
+  showVoteButtons,
+  upvoteCount,
+  timestamp,
+  role,
+  location,
+  href,
+}: FullQuestionCardProps) {
+  const altText = company + ' logo';
+  const mainCard = (
+    <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
+      {showVoteButtons && <VotingButtons upvoteCount={upvoteCount} />}
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <img alt={altText} src="https://logo.clearbit.com/google.com"></img>
+          <h2 className="ml-2 text-xl">{company}</h2>
+        </div>
+        <div className="flex items-baseline justify-between">
+          <div className="flex items-center gap-2 text-slate-500">
+            <Badge label="Technical" variant="primary" />
+            <p className="text-xs">
+              {timestamp} · {location} · {role}
+            </p>
+          </div>
+        </div>
+        <div className="mx-2 mb-2">
+          <p>{content}</p>
+        </div>
+      </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/QuestionCard.tsx

@@ -1,6 +1,6 @@
 import {
   ChatBubbleBottomCenterTextIcon,
-  EyeIcon,
+  // EyeIcon,
 } from '@heroicons/react/24/outline';
 import { Badge, Button } from '@tih/ui';
 
@@ -52,7 +52,7 @@ export type QuestionCardProps = ActionButtonProps &
 export default function QuestionCard({
   answerCount,
   content,
-  receivedCount,
+  // ReceivedCount,
   showVoteButtons,
   showUserStatistics,
   showActionButton,
@@ -62,9 +62,8 @@ export default function QuestionCard({
   timestamp,
   role,
   location,
-  href,
 }: QuestionCardProps) {
-  const mainCard = (
+  return (
     <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
       {showVoteButtons && <VotingButtons upvoteCount={upvoteCount} />}
       <div className="flex flex-col gap-2">
@@ -96,26 +95,16 @@ export default function QuestionCard({
               size="sm"
               variant="tertiary"
             />
-            <Button
+            {/* <Button
               addonPosition="start"
               icon={EyeIcon}
               label={`${receivedCount} received this`}
               size="sm"
               variant="tertiary"
-            />
+            /> */}
           </div>
         )}
       </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,3 +1,5 @@
+import withHref from '~/utils/questions/withHref';
+
 import type { QuestionCardProps } from './QuestionCard';
 import QuestionCard from './QuestionCard';
 
@@ -14,7 +16,7 @@ export type QuestionOverviewCardProps = Omit<
   | 'showVoteButtons'
 >;
 
-export default function QuestionOverviewCard(props: QuestionOverviewCardProps) {
+function QuestionOverviewCardWithoutHref(props: QuestionOverviewCardProps) {
   return (
     <QuestionCard
       {...props}
@@ -24,3 +26,6 @@ export default function QuestionOverviewCard(props: QuestionOverviewCardProps) {
     />
   );
 }
+
+const QuestionOverviewCard = withHref(QuestionOverviewCardWithoutHref);
+export default QuestionOverviewCard;