mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-30 05:34:33 +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:
@ -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
|
||||
// );
|
||||
}
|
Reference in New Issue
Block a user