msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[questions][feat] tweak cards UI (#546)

Browse Source 
* [questions][feat] tweak card UI

* [questions][feat] tweak comment and answer pages
pull/547/head
Yangshun Tay 3 years ago committed by GitHub
parent 8a73925601
commit 8299a5463e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 212 additions and 180 deletions
Show Stats Download Patch File Download Diff File

2
apps/portal/src/components/questions/AddToListDropdown.tsx
Unescape View File

@ -106,7 +106,7 @@ export default function AddToListDropdown({
const CustomMenuButton = ({ children }: PropsWithChildren<unknown>) => ( const CustomMenuButton = ({ children }: PropsWithChildren<unknown>) => (
<button <button
className="focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-100" className="focus:ring-primary-500 inline-flex w-full items-center justify-center rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-100"
type="button" type="button"
onClick={handleMenuButtonClick}> onClick={handleMenuButtonClick}>
{children} {children}

23
apps/portal/src/components/questions/QuestionAggregateBadge.tsx
Unescape View File

@ -1,19 +1,16 @@
import type { ComponentProps } from 'react';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { usePopperTooltip } from 'react-popper-tooltip'; import { usePopperTooltip } from 'react-popper-tooltip';
import { Badge } from '@tih/ui';
import 'react-popper-tooltip/dist/styles.css'; import 'react-popper-tooltip/dist/styles.css';
type BadgeProps = ComponentProps<typeof Badge>; export type QuestionAggregateBadgeProps = Readonly<{
icon: (props: React.ComponentProps<'svg'>) => JSX.Element;
export type QuestionAggregateBadgeProps = Omit<BadgeProps, 'label'> & {
statistics: Record<string, number>; statistics: Record<string, number>;
}; }>;
export default function QuestionAggregateBadge({ export default function QuestionAggregateBadge({
icon: Icon,
statistics, statistics,
...badgeProps
}: QuestionAggregateBadgeProps) { }: QuestionAggregateBadgeProps) {
const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =
usePopperTooltip({ usePopperTooltip({
@ -56,8 +53,16 @@ export default function QuestionAggregateBadge({
return ( return (
<> <>
<button ref={setTriggerRef} className="rounded-full" type="button"> <button
<Badge label={label} {...badgeProps} /> ref={setTriggerRef}
className="-my-1 flex items-center rounded-md px-2
py-1 text-xs font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-600"
type="button">
<Icon
aria-hidden={true}
className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
/>
{label}
</button> </button>
{visible && ( {visible && (
<div ref={setTooltipRef} {...getTooltipProps()} className="z-10"> <div ref={setTooltipRef} {...getTooltipProps()} className="z-10">

4
apps/portal/src/components/questions/SortOptionsSelect.tsx
Unescape View File

@ -36,7 +36,7 @@ export default function SortOptionsSelect({
return ( return (
<div className="flex items-end justify-end gap-2"> <div className="flex items-end justify-end gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center">
<Select <Select
display="inline" display="inline"
label="Sort by" label="Sort by"
@ -52,7 +52,7 @@ export default function SortOptionsSelect({
}} }}
/> />
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center">
<Select <Select
display="inline" display="inline"
label="Order by" label="Order by"

52
apps/portal/src/components/questions/VotingButtons.tsx
Unescape View File

@ -1,8 +1,7 @@
import clsx from 'clsx';
import React from 'react'; import React from 'react';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
import type { Vote } from '@prisma/client'; import type { Vote } from '@prisma/client';
import type { ButtonSize } from '@tih/ui';
import { Button } from '@tih/ui';
import { useProtectedCallback } from '~/utils/questions/useProtectedCallback'; import { useProtectedCallback } from '~/utils/questions/useProtectedCallback';
@ -18,7 +17,7 @@ export type VotingButtonsCallbackProps = {
}; };
export type VotingButtonsProps = VotingButtonsCallbackProps & { export type VotingButtonsProps = VotingButtonsCallbackProps & {
size?: ButtonSize; size?: 'md' | 'sm';
upvoteCount: number; upvoteCount: number;
}; };
@ -29,11 +28,6 @@ export default function VotingButtons({
upvoteCount, upvoteCount,
size = 'md', size = 'md',
}: VotingButtonsProps) { }: VotingButtonsProps) {
const upvoteButtonVariant =
vote?.vote === 'UPVOTE' ? 'secondary' : 'tertiary';
const downvoteButtonVariant =
vote?.vote === 'DOWNVOTE' ? 'secondary' : 'tertiary';
const handleUpvoteClick = useProtectedCallback(() => { const handleUpvoteClick = useProtectedCallback(() => {
onUpvote(); onUpvote();
}); });
@ -44,31 +38,45 @@ export default function VotingButtons({
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<Button <button
icon={ChevronUpIcon} aria-label="Upvote"
isLabelHidden={true} className="rounded-full p-1 hover:bg-slate-100"
label="Upvote" type="button"
size={size}
variant={upvoteButtonVariant}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
handleUpvoteClick(); handleUpvoteClick();
}} }}>
<ChevronUpIcon
className={clsx(
size === 'sm' && 'h-5 w-5',
size === 'md' && 'h-8 w-8',
vote?.vote === 'UPVOTE'
? 'text-primary-500'
: 'hover:text-primary-500 text-slate-400',
)}
/> />
</button>
<p>{upvoteCount}</p> <p>{upvoteCount}</p>
<Button <button
icon={ChevronDownIcon} aria-label="Downvote"
isLabelHidden={true} className="rounded-full p-1 hover:bg-slate-100"
label="Downvote" type="button"
size={size}
variant={downvoteButtonVariant}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
handleDownvoteClick(); handleDownvoteClick();
}} }}>
<ChevronDownIcon
className={clsx(
size === 'sm' && 'h-5 w-5',
size === 'md' && 'h-8 w-8',
vote?.vote === 'DOWNVOTE'
? 'text-danger-500'
: 'hover:text-danger-500 text-slate-400',
)}
/> />
</button>
</div> </div>
); );
} }

46
apps/portal/src/components/questions/card/AnswerCard.tsx
Unescape View File

@ -1,4 +1,5 @@
import { format } from 'date-fns'; import clsx from 'clsx';
import { formatDistanceToNow } from 'date-fns';
import { ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline'; import { ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline';
import useAnswerVote from '~/utils/questions/vote/useAnswerVote'; import useAnswerVote from '~/utils/questions/vote/useAnswerVote';
@ -30,11 +31,13 @@ export default function AnswerCard({
showHover, showHover,
}: AnswerCardProps) { }: AnswerCardProps) {
const { handleUpvote, handleDownvote, vote } = useAnswerVote(answerId); const { handleUpvote, handleDownvote, vote } = useAnswerVote(answerId);
const hoverClass = showHover ? 'hover:bg-slate-50' : '';
return ( return (
<article <article
className={`flex gap-4 rounded-md border bg-white p-2 ${hoverClass}`}> className={clsx(
'flex gap-4 rounded-md border border-slate-200 bg-white p-4 sm:rounded-lg',
showHover && 'hover:bg-slate-50',
)}>
<VotingButtons <VotingButtons
size={votingButtonsSize} size={votingButtonsSize}
upvoteCount={upvoteCount} upvoteCount={upvoteCount}
@ -42,27 +45,38 @@ export default function AnswerCard({
onDownvote={handleDownvote} onDownvote={handleDownvote}
onUpvote={handleUpvote} onUpvote={handleUpvote}
/> />
<div className="flex flex-col gap-2"> <div className="flex w-full flex-col gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<img <img
alt={`${authorName} profile picture`} alt={authorName}
className="h-8 w-8 rounded-full" className="h-7 w-7 rounded-full"
src={authorImageUrl}></img> src={authorImageUrl}
<h1 className="font-bold">{authorName}</h1> />
<p className="text-xs font-extralight"> <p className="text-sm font-medium text-slate-900">{authorName}</p>
Posted on: {format(createdAt, 'h:mm a, MMMM dd, yyyy')} <span className="font-medium text-slate-500">·</span>
<p className="text-xs text-slate-500">
{formatDistanceToNow(createdAt, {
addSuffix: true,
})}
</p> </p>
</div> </div>
<p className="whitespace-pre-line">{content}</p> <p className="whitespace-pre-wrap text-xs sm:text-sm">{content}</p>
<div className="-ml-2">
{commentCount !== undefined && ( {commentCount !== undefined && (
<div className="flex items-center gap-2 text-slate-500"> <button
<ChatBubbleLeftRightIcon className="h-6 w-6" /> className="-my-1 flex items-center rounded-md px-2
<p className="text-sm font-medium"> py-1 text-xs font-medium
text-slate-500 hover:bg-slate-100 hover:text-slate-600"
type="button">
<ChatBubbleLeftRightIcon
aria-hidden={true}
className="mr-2 h-5 w-5"
/>
{commentCount} {commentCount === 1 ? 'comment' : 'comments'} {commentCount} {commentCount === 1 ? 'comment' : 'comments'}
</p> </button>
</div>
)} )}
</div> </div>
</div>
</article> </article>
); );
} }

88
apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
Unescape View File

@ -1,5 +1,10 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import {
BuildingOfficeIcon,
MapPinIcon,
UserCircleIcon,
} from '@heroicons/react/20/solid';
import { import {
ChatBubbleBottomCenterTextIcon, ChatBubbleBottomCenterTextIcon,
CheckIcon, CheckIcon,
@ -198,21 +203,24 @@ export default function BaseQuestionCard({
</div> </div>
</> </>
)} )}
<div className="flex flex-1 flex-col items-start gap-2"> <div className="flex flex-1 flex-col items-start gap-4">
<div className="flex items-baseline justify-between self-stretch"> <div className="flex items-center justify-between self-stretch">
<div className="flex flex-wrap items-center gap-2 text-slate-500"> <div className="flex flex-wrap items-center gap-3 text-slate-500">
{showAggregateStatistics && ( {showAggregateStatistics && (
<> <>
<QuestionTypeBadge type={type} /> <QuestionTypeBadge type={type} />
<QuestionAggregateBadge <QuestionAggregateBadge
icon={BuildingOfficeIcon}
statistics={companies} statistics={companies}
variant="primary"
/> />
<QuestionAggregateBadge <QuestionAggregateBadge
icon={MapPinIcon}
statistics={locations!} statistics={locations!}
variant="success"
/> />
<QuestionAggregateBadge statistics={roles} variant="danger" /> <QuestionAggregateBadge
icon={UserCircleIcon}
statistics={roles}
/>
</> </>
)} )}
{timestamp !== null && ( {timestamp !== null && (
@ -240,59 +248,43 @@ export default function BaseQuestionCard({
</div> </div>
<p <p
className={clsx( className={clsx(
'whitespace-pre-line font-semibold', 'whitespace-pre-line text-base font-medium leading-6 text-slate-900 md:text-lg',
truncateContent && 'line-clamp-2 text-ellipsis', truncateContent && 'line-clamp-2 text-ellipsis',
)}> )}>
{content} {content}
</p> </p>
{!showReceivedForm && {!showReceivedForm &&
(showAnswerStatistics || (showAnswerStatistics ||
showReceivedStatistics || showReceivedStatistics ||
showCreateEncounterButton) && ( showCreateEncounterButton) && (
<div className="flex gap-2"> <div className="flex w-full gap-4">
{showAnswerStatistics && ( {showAnswerStatistics && (
<> <div>
<div className="sm:hidden"> <button
<Button className="-my-1 flex items-center rounded-md px-2
addonPosition="start" py-1 text-xs font-medium
icon={ChatBubbleBottomCenterTextIcon} text-slate-500 hover:bg-slate-100 hover:text-slate-600"
label={`${answerCount}`} type="button">
size="sm" <ChatBubbleBottomCenterTextIcon
variant="tertiary" aria-hidden={true}
/> className="mr-2 h-5 w-5"
</div>
<div className="hidden sm:block">
<Button
addonPosition="start"
icon={ChatBubbleBottomCenterTextIcon}
label={`${answerCount} answers`}
size="sm"
variant="tertiary"
/> />
{answerCount} {answerCount === 1 ? 'answer' : 'answers'}
</button>
</div> </div>
</>
)} )}
{showReceivedStatistics && ( {showReceivedStatistics && (
<> <div>
<div className="sm:hidden"> <button
<Button className="-my-1 flex items-center rounded-md px-2
addonPosition="start" py-1 text-xs font-medium
icon={EyeIcon} text-slate-500 hover:bg-slate-100 hover:text-slate-600"
label={`${receivedCount}`} type="button">
size="sm" <EyeIcon aria-hidden={true} className="mr-2 h-5 w-5" />
variant="tertiary" {receivedCount} received this
/> </button>
</div> </div>
<div className="hidden sm:block">
<Button
addonPosition="start"
icon={EyeIcon}
label={`${receivedCount} received this`}
size="sm"
variant="tertiary"
/>
</div>
</>
)} )}
{showCreateEncounterButton && ( {showCreateEncounterButton && (
<Button <Button
@ -323,9 +315,9 @@ export default function BaseQuestionCard({
return ( return (
<article <article
className={clsx( className={clsx(
'group flex gap-4 border-slate-300', 'group flex gap-4 border-slate-200',
showHover && 'transition hover:bg-slate-50', showHover && 'hover:border-primary-500 transition',
!hideCard && 'rounded-md border bg-white p-4', !hideCard && 'rounded-md border bg-white p-4 sm:rounded-lg sm:p-6',
)}> )}>
{cardContent} {cardContent}
{showDeleteButton && ( {showDeleteButton && (

22
apps/portal/src/components/questions/comments/CommentListItem.tsx
Unescape View File

@ -1,4 +1,4 @@
import { format } from 'date-fns'; import { formatDistanceToNow } from 'date-fns';
import type { BackendVote } from '../VotingButtons'; import type { BackendVote } from '../VotingButtons';
import VotingButtons from '../VotingButtons'; import VotingButtons from '../VotingButtons';
@ -25,7 +25,7 @@ export default function CommentListItem({
onUpvote, onUpvote,
}: CommentListItemProps) { }: CommentListItemProps) {
return ( return (
<div className="flex gap-4 rounded-md border bg-white p-2"> <div className="flex gap-4 rounded-md border border-slate-200 bg-white p-2">
<VotingButtons <VotingButtons
size="sm" size="sm"
upvoteCount={upvoteCount} upvoteCount={upvoteCount}
@ -36,15 +36,19 @@ export default function CommentListItem({
<div className="mt-1 flex flex-col gap-1"> <div className="mt-1 flex flex-col gap-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<img <img
alt={`${authorName} profile picture`} alt={authorName}
className="h-8 w-8 rounded-full" className="h-7 w-7 rounded-full"
src={authorImageUrl}></img> src={authorImageUrl}
<h1 className="font-bold">{authorName}</h1> />
<p className="pt-1 text-xs font-extralight"> <p className="text-sm font-medium text-slate-900">{authorName}</p>
Posted on: {format(createdAt, 'h:mm a, MMMM dd, yyyy')} <span className="font-medium text-slate-500">·</span>
<p className="text-xs text-slate-500">
{formatDistanceToNow(createdAt, {
addSuffix: true,
})}
</p> </p>
</div> </div>
<p className="whitespace-pre-line">{content}</p> <p className="whitespace-pre-wrap text-xs sm:text-sm">{content}</p>
</div> </div>
</div> </div>
); );

3
apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
Unescape View File

@ -142,6 +142,7 @@ export default function CreateQuestionEncounterForm({
(step === 2 && selectedRole === null) (step === 2 && selectedRole === null)
} }
label="Next" label="Next"
size="sm"
variant="primary" variant="primary"
onClick={() => { onClick={() => {
setStep(step + 1); setStep(step + 1);
@ -152,6 +153,7 @@ export default function CreateQuestionEncounterForm({
<Button <Button
isLoading={loading} isLoading={loading}
label="Submit" label="Submit"
size="sm"
variant="primary" variant="primary"
onClick={async () => { onClick={async () => {
if ( if (
@ -181,6 +183,7 @@ export default function CreateQuestionEncounterForm({
)} )}
<Button <Button
label="Cancel" label="Cancel"
size="sm"
variant="tertiary" variant="tertiary"
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();

7
apps/portal/src/components/questions/layout/BackButtonLayout.tsx
Unescape View File

@ -2,6 +2,8 @@ import type { PropsWithChildren } from 'react';
import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline'; import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
import { Button } from '@tih/ui'; import { Button } from '@tih/ui';
import Container from '~/components/shared/Container';
export type BackButtonLayoutProps = PropsWithChildren<{ export type BackButtonLayoutProps = PropsWithChildren<{
href: string; href: string;
}>; }>;
@ -11,7 +13,7 @@ export default function BackButtonLayout({
children, children,
}: BackButtonLayoutProps) { }: BackButtonLayoutProps) {
return ( return (
<div className="flex w-full flex-1 flex-col items-stretch gap-4 p-4 lg:flex-row"> <Container className="flex flex-col gap-4 pt-4 pb-12" variant="sm">
<div> <div>
<Button <Button
addonPosition="start" addonPosition="start"
@ -19,12 +21,13 @@ export default function BackButtonLayout({
href={href} href={href}
icon={ArrowSmallLeftIcon} icon={ArrowSmallLeftIcon}
label="Back" label="Back"
size="sm"
variant="secondary" variant="secondary"
/> />
</div> </div>
<div className="flex w-full justify-center overflow-y-auto"> <div className="flex w-full justify-center overflow-y-auto">
{children} {children}
</div> </div>
</div> </Container>
); );
} }

3
apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx
Unescape View File

@ -44,11 +44,12 @@ export default function ExpandedTypeahead({
); );
return ( return (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap items-center gap-2">
{suggestions.map((suggestion) => ( {suggestions.map((suggestion) => (
<div key={suggestion.id} className="hidden lg:block"> <div key={suggestion.id} className="hidden lg:block">
<Button <Button
label={suggestion.label} label={suggestion.label}
size="sm"
variant="tertiary" variant="tertiary"
onClick={() => { onClick={() => {
onSuggestionClick?.(suggestion); onSuggestionClick?.(suggestion);

8
apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
Unescape View File

@ -113,7 +113,7 @@ export default function QuestionPage() {
</Head> </Head>
<BackButtonLayout <BackButtonLayout
href={`/questions/${router.query.questionId}/${router.query.questionSlug}`}> href={`/questions/${router.query.questionId}/${router.query.questionSlug}`}>
<div className="flex max-w-7xl flex-1 flex-col gap-2"> <div className="flex max-w-7xl flex-1 flex-col gap-4">
<FullAnswerCard <FullAnswerCard
answerId={answer.id} answerId={answer.id}
authorImageUrl={answer.userImage} authorImageUrl={answer.userImage}
@ -122,7 +122,7 @@ export default function QuestionPage() {
createdAt={answer.createdAt} createdAt={answer.createdAt}
upvoteCount={answer.numVotes} upvoteCount={answer.numVotes}
/> />
<div className="mx-2"> <div>
<form <form
className="mb-2" className="mb-2"
onSubmit={handleCommentSubmit(handleSubmitComment)}> onSubmit={handleCommentSubmit(handleSubmitComment)}>
@ -136,7 +136,7 @@ export default function QuestionPage() {
resize="vertical" resize="vertical"
rows={2} rows={2}
/> />
<div className="my-3 flex justify-between"> <div className="my-3 flex justify-end">
<Button <Button
disabled={!isCommentDirty || !isCommentValid} disabled={!isCommentDirty || !isCommentValid}
label="Post" label="Post"
@ -145,7 +145,7 @@ export default function QuestionPage() {
/> />
</div> </div>
</form> </form>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-4">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<p className="text-lg">Comments</p> <p className="text-lg">Comments</p>
<div className="flex items-end gap-2"> <div className="flex items-end gap-2">

22
apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
Unescape View File

@ -200,8 +200,8 @@ export default function QuestionPage() {
</title> </title>
</Head> </Head>
<BackButtonLayout href="/questions/browse"> <BackButtonLayout href="/questions/browse">
<div className="flex max-w-7xl flex-1 flex-col gap-2"> <div className="flex flex-1 flex-col gap-4">
<div className="flex flex-col gap-2 rounded-md border bg-white p-4"> <div className="flex flex-col gap-4 rounded-md border bg-white p-4">
<FullQuestionCard <FullQuestionCard
{...question} {...question}
companies={relabeledAggregatedEncounters?.companyCounts ?? {}} companies={relabeledAggregatedEncounters?.companyCounts ?? {}}
@ -224,14 +224,13 @@ export default function QuestionPage() {
}); });
}} }}
/> />
<div className="ml-16 mr-2"> <div className="sm:ml-13 ml-11 mr-2 md:ml-14">
<Collapsible <Collapsible
defaultOpen={true} defaultOpen={true}
label={ label={
<div className="text-primary-700">{`${question.numComments} comment(s)`}</div> <div className="text-primary-700">{`${question.numComments} comment(s)`}</div>
}> }>
<div className=""> <div className="flex flex-col gap-4 text-black">
<div className="flex flex-col gap-2 text-black">
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<div className="flex items-end gap-2"> <div className="flex items-end gap-2">
<SortOptionsSelect <SortOptionsSelect
@ -242,6 +241,7 @@ export default function QuestionPage() {
/> />
</div> </div>
</div> </div>
<div className="flex flex-col gap-4">
{(commentData?.pages ?? []).flatMap(({ data: comments }) => {(commentData?.pages ?? []).flatMap(({ data: comments }) =>
comments.map((comment) => ( comments.map((comment) => (
<QuestionCommentListItem <QuestionCommentListItem
@ -255,6 +255,7 @@ export default function QuestionPage() {
/> />
)), )),
)} )}
</div>
<PaginationLoadMoreButton query={commentInfiniteQuery} /> <PaginationLoadMoreButton query={commentInfiniteQuery} />
<form <form
className="mt-4" className="mt-4"
@ -269,7 +270,7 @@ export default function QuestionPage() {
resize="vertical" resize="vertical"
rows={2} rows={2}
/> />
<div className="my-3 flex justify-between"> <div className="my-3 flex justify-end">
<Button <Button
disabled={!isCommentDirty || !isCommentValid} disabled={!isCommentDirty || !isCommentValid}
label="Post" label="Post"
@ -279,7 +280,6 @@ export default function QuestionPage() {
</div> </div>
</form> </form>
</div> </div>
</div>
</Collapsible> </Collapsible>
</div> </div>
</div> </div>
@ -299,7 +299,7 @@ export default function QuestionPage() {
rows={5} rows={5}
/> />
</div> </div>
<div className="mt-3 mb-1 flex justify-between"> <div className="mt-3 mb-1 flex justify-end">
<Button <Button
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
label="Contribute" label="Contribute"
@ -308,11 +308,11 @@ export default function QuestionPage() {
/> />
</div> </div>
</form> </form>
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-4">
<p className="text-xl font-semibold"> <p className="text-xl font-semibold">
{question.numAnswers} answers {question.numAnswers} answers
</p> </p>
<div className="flex items-end gap-2"> <div className="flex items-end gap-4">
<SortOptionsSelect <SortOptionsSelect
sortOrderValue={answerSortOrder} sortOrderValue={answerSortOrder}
sortTypeValue={answerSortType} sortTypeValue={answerSortType}
@ -321,6 +321,7 @@ export default function QuestionPage() {
/> />
</div> </div>
</div> </div>
<div className="flex flex-col gap-4">
{/* TODO: Add button to load more */} {/* TODO: Add button to load more */}
{(answerData?.pages ?? []).flatMap(({ data: answers }) => {(answerData?.pages ?? []).flatMap(({ data: answers }) =>
answers.map((answer) => ( answers.map((answer) => (
@ -341,6 +342,7 @@ export default function QuestionPage() {
)} )}
<PaginationLoadMoreButton query={answerInfiniteQuery} /> <PaginationLoadMoreButton query={answerInfiniteQuery} />
</div> </div>
</div>
</BackButtonLayout> </BackButtonLayout>
</> </>
); );

2
apps/portal/src/pages/questions/browse.tsx
Unescape View File

@ -541,7 +541,7 @@ export default function QuestionsBrowsePage() {
onSortTypeChange={setSortType} onSortTypeChange={setSortType}
/> />
</div> </div>
<div className="flex flex-col gap-2 pb-4"> <div className="flex flex-col gap-4 pb-4">
{(questionsQueryData?.pages ?? []).flatMap( {(questionsQueryData?.pages ?? []).flatMap(
({ data: questions }) => ({ data: questions }) =>
questions.map((question) => { questions.map((question) => {

Write Preview
Loading…
Cancel
Save