[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:
Ren Weilin
2022-10-10 02:01:38 +08:00
committed by GitHub
parent c252f57bd5
commit cf5af1a5c7
27 changed files with 1595 additions and 373 deletions

View 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>
);
}