[question][ui] integrate backend voting (#355)

Co-authored-by: wlren <weilinwork99@gmail.com>
This commit is contained in:
Jeff Sieu
2022-10-10 22:23:58 +08:00
committed by GitHub
parent 7052e8c175
commit 50d3386592
25 changed files with 639 additions and 382 deletions

View File

@ -1,38 +1,11 @@
import { format } from 'date-fns';
import type { AnswerCardProps } from './AnswerCard';
import AnswerCard from './AnswerCard';
import VotingButtons from '../VotingButtons';
export type FullAnswerCardProps = Omit<
AnswerCardProps,
'commentCount' | 'votingButtonsSize'
>;
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>
);
export default function FullAnswerCard(props: FullAnswerCardProps) {
return <AnswerCard {...props} votingButtonsSize="md" />;
}