mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-30 21:53:28 +08:00
[questions][ui] Full UI for questions/answer/comment (#346)
* [questions][ui] Add DiscardDraftModal * [questions][ui] add question draft dialog form * [questions][ui] refactor bottom contribute bar * [questions][ui] landing page * [questions][ui] add similar question card * [questions][ui] use TIH dialog for discard * [questions][ui] add aria-hidden for select label * [questions][ui] extract useFormRegister hook * [questions][ui] change landing page to component * [questions][ui] load filter from query param * [question][chore] add constants.ts * [questions][ui] add app logo * [questions][ui] remove form * [questions][ui] fix dialog closing * [questions][chore] minor changes * [questions][ui] radio button * [questions][ui] add vertical scrolling * [questions][ui] Question age url param change * [questions][chore] refactor and add in todo * [questions][ui] contribute card clickable * [questions][ui] landing page github stars * [questions][ui] edit css for question card * [question][ui] add question detail page * [questions][ui] remove navbar import * [questions][ui] css changes * [questions][ui] hide sidebar * [questions][ui] contribute questions form ui * [questions][ui] question page * [questions][bug] remove button * [questions][ui] voting button size * [questions][chore] add dummy data, refactor * [questions][ui] answer card * [questions][chore] add sample data * [questions][ui] add hover * [questions][ui] clean up old href * [questions][ui] add comments & commments page * [question][feat] cache filter options to localStorage * [questions][fix] fix index refreshing constantly * [questions][ui] set fixed sample date Co-authored-by: Jeff Sieu <jeffsy00@gmail.com>
This commit is contained in:
38
apps/portal/src/components/questions/card/FullAnswerCard.tsx
Normal file
38
apps/portal/src/components/questions/card/FullAnswerCard.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import VotingButtons from '../VotingButtons';
|
||||
|
||||
export type FullAnswerCardProps = {
|
||||
authorImageUrl: string;
|
||||
authorName: string;
|
||||
content: string;
|
||||
createdAt: Date;
|
||||
upvoteCount: number;
|
||||
};
|
||||
|
||||
export default function FullAnswerCard({
|
||||
authorImageUrl,
|
||||
authorName,
|
||||
content,
|
||||
createdAt,
|
||||
upvoteCount,
|
||||
}: FullAnswerCardProps) {
|
||||
return (
|
||||
<article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
|
||||
<VotingButtons upvoteCount={upvoteCount}></VotingButtons>
|
||||
<div className="mt-1 flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<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>
|
||||
</article>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user