[questions][ui] updates

pull/411/head
Jeff Sieu 3 years ago
parent 634a41a48a
commit e8ba344ecb

@ -112,17 +112,7 @@ export default function QuestionCard({
const [showReceivedForm, setShowReceivedForm] = useState(false);
const { handleDownvote, handleUpvote, vote } = useQuestionVote(questionId);
const hoverClass = showHover ? 'hover:bg-slate-50' : '';
const cardContent = showReceivedForm ? (
<CreateQuestionEncounterForm
onCancel={() => {
setShowReceivedForm(false);
}}
onSubmit={(data) => {
onReceivedSubmit?.(data);
setShowReceivedForm(false);
}}
/>
) : (
const cardContent = (
<>
{showVoteButtons && (
<VotingButtons
@ -132,7 +122,7 @@ export default function QuestionCard({
onUpvote={handleUpvote}
/>
)}
<div className="flex flex-col gap-2">
<div className="flex flex-col items-start gap-2">
<div className="flex items-baseline justify-between">
<div className="flex items-baseline gap-2 text-slate-500">
<Badge label={company} variant="primary" />
@ -150,12 +140,10 @@ export default function QuestionCard({
/>
)}
</div>
<div className="ml-2">
<p className={clsx(truncateContent && 'line-clamp-2 text-ellipsis')}>
{content}
</p>
</div>
{(showAnswerStatistics || showReceivedStatistics) && (
{!showReceivedForm && (showAnswerStatistics || showReceivedStatistics) && (
<div className="flex gap-2">
{showAnswerStatistics && (
<Button
@ -190,6 +178,17 @@ export default function QuestionCard({
)}
</div>
)}
{showReceivedForm && (
<CreateQuestionEncounterForm
onCancel={() => {
setShowReceivedForm(false);
}}
onSubmit={(data) => {
onReceivedSubmit?.(data);
setShowReceivedForm(false);
}}
/>
)}
</div>
</>
);

@ -21,7 +21,7 @@ export type QuestionListCardProps = Omit<
function QuestionListCardWithoutHref(props: QuestionListCardProps) {
return (
<QuestionCard
{...props}
{...(props as any)}
showActionButton={false}
showAnswerStatistics={false}
showDeleteButton={true}

@ -2,7 +2,6 @@ import { startOfMonth } from 'date-fns';
import { useState } from 'react';
import { Button } from '@tih/ui';
import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
import type { Month } from '~/components/shared/MonthYearPicker';
import MonthYearPicker from '~/components/shared/MonthYearPicker';
@ -36,15 +35,6 @@ export default function CreateQuestionEncounterForm({
);
return (
<div>
<Button
label="Cancel"
variant="tertiary"
onClick={(event) => {
event.preventDefault();
onCancel();
}}
/>
<div className="flex items-center gap-2">
<p className="font-md text-md text-slate-600">I saw this question at</p>
{step === 0 && (
@ -144,7 +134,14 @@ export default function CreateQuestionEncounterForm({
}}
/>
)}
</div>
<Button
label="Cancel"
variant="tertiary"
onClick={(event) => {
event.preventDefault();
onCancel();
}}
/>
</div>
);
}

@ -1,7 +1,7 @@
import type { ComponentProps } from 'react';
import { Button, Typeahead } from '@tih/ui';
type RequireAllOrNone<T> = T | { [K in keyof T]?: never };
import type { RequireAllOrNone } from '~/utils/questions/RequireAllOrNone';
type TypeaheadProps = ComponentProps<typeof Typeahead>;
type TypeaheadOption = TypeaheadProps['options'][number];

@ -0,0 +1 @@
export type RequireAllOrNone<T> = T | { [K in keyof T]?: never };
Loading…
Cancel
Save