[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,66 @@
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;
location: string;
receivedCount: number;
role: string;
timestamp: string;
};
export default function FullQuestionCard({
company,
content,
showVoteButtons,
upvoteCount,
timestamp,
role,
location,
}: FullQuestionCardProps) {
const altText = company + ' logo';
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">
<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
// );
}