algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 04:33:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

[resumes][feat] use primary buttons (#441)

Browse Source
This commit is contained in:
Keane Chan
2022-10-27 01:28:26 +08:00
committed by GitHub
parent 635039f118
commit 01b207e52f
3 changed files with 113 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
View File

@ -48,64 +48,64 @@ export default function ResumeCommentsList({
} }
}; };
if (commentsQuery.isLoading) {
return (
<div className="col-span-10 pt-4">
<Spinner display="block" size="lg" />
</div>
);
}
return ( return (
<div className="space-y-3"> <div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-10 overflow-y-auto overflow-x-hidden pb-16">
{commentsQuery.isLoading ? ( {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
<div className="col-span-10 pt-4"> const comments = commentsQuery.data
<Spinner display="block" size="lg" /> ? commentsQuery.data.filter((comment: ResumeComment) => {
</div> return (comment.section as string) === value;
) : ( })
<div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-10 overflow-y-auto overflow-x-hidden pb-16"> : [];
{RESUME_COMMENTS_SECTIONS.map(({ label, value }) => { const commentCount = comments.length;
const comments = commentsQuery.data
? commentsQuery.data.filter((comment: ResumeComment) => { return (
return (comment.section as string) === value; <div key={value} className="space-y-4 pr-4">
{/* CommentHeader Section */}
<div className="text-primary-800 flex items-center space-x-2">
<hr className="flex-grow border-slate-800" />
{renderIcon(value)}
<span className="w-fit text-lg font-medium">{label}</span>
<hr className="flex-grow border-slate-800" />
</div>
{/* Comment Section */}
<div
className={clsx(
'space-y-2 rounded-md border-2 bg-white px-4 py-3 drop-shadow-md',
commentCount ? 'border-slate-300' : 'border-slate-300',
)}>
{commentCount > 0 ? (
comments.map((comment) => {
return (
<ResumeCommentListItem
key={comment.id}
comment={comment}
userId={sessionData?.user?.id}
/>
);
}) })
: []; ) : (
const commentCount = comments.length; <div className="flex flex-row items-center text-sm">
<ChatBubbleLeftRightIcon className="mr-2 h-6 w-6 text-slate-500" />
return ( <div className="text-slate-500">
<div key={value} className="space-y-4 pr-4"> There are no comments for this section yet!
{/* CommentHeader Section */} </div>
<div className="text-primary-800 flex items-center space-x-2">
<hr className="flex-grow border-slate-800" />
{renderIcon(value)}
<span className="w-fit text-lg font-medium">{label}</span>
<hr className="flex-grow border-slate-800" />
</div> </div>
)}
{/* Comment Section */} </div>
<div </div>
className={clsx( );
'space-y-2 rounded-md border-2 bg-white px-4 py-3 drop-shadow-md', })}
commentCount ? 'border-slate-300' : 'border-slate-300',
)}>
{commentCount > 0 ? (
comments.map((comment) => {
return (
<ResumeCommentListItem
key={comment.id}
comment={comment}
userId={sessionData?.user?.id}
/>
);
})
) : (
<div className="flex flex-row items-center text-sm">
<ChatBubbleLeftRightIcon className="mr-2 h-6 w-6 text-slate-500" />
<div className="text-slate-500">
There are no comments for this section yet!
</div>
</div>
)}
</div>
</div>
);
})}
</div>
)}
</div> </div>
); );
} }

55
apps/portal/src/pages/resumes/[resumeId].tsx
View File

@ -3,7 +3,7 @@ import formatDistanceToNow from 'date-fns/formatDistanceToNow';
import Error from 'next/error'; import Error from 'next/error';
import Head from 'next/head'; import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { signIn, useSession } from 'next-auth/react'; import { useSession } from 'next-auth/react';
import { useState } from 'react'; import { useState } from 'react';
import { import {
AcademicCapIcon, AcademicCapIcon,
@ -142,24 +142,21 @@ export default function ResumeReviewPage() {
const renderReviewButton = () => { const renderReviewButton = () => {
if (session === null) { if (session === null) {
return ( return (
<div className=" flex h-10 justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-[400] hover:cursor-pointer hover:bg-slate-50"> <Button
<a className="h-10 shadow-md"
href="/api/auth/signin" display="block"
onClick={(event) => { href="/api/auth/signin"
event.preventDefault(); label="Sign in to join discussion"
signIn(); variant="primary"
}}> />
Sign in to join discussion
</a>
</div>
); );
} }
return ( return (
<Button <Button
className="h-10 py-2 shadow-md" className="h-10 shadow-md"
display="block" display="block"
label="Add your review" label="Add your review"
variant="tertiary" variant="primary"
onClick={() => setShowCommentsForm(true)} onClick={() => setShowCommentsForm(true)}
/> />
); );
@ -209,14 +206,15 @@ export default function ResumeReviewPage() {
</h1> </h1>
<div className="flex gap-3 xl:pr-4"> <div className="flex gap-3 xl:pr-4">
{userIsOwner && ( {userIsOwner && (
<button <Button
className="h-10 rounded-md border border-slate-300 bg-white py-1 px-2 text-center shadow-md hover:bg-slate-50" addonPosition="start"
type="button" className="h-10 shadow-md"
onClick={onEditButtonClick}> icon={PencilSquareIcon}
<PencilSquareIcon className="text-primary-600 h-6 w-6" /> label="Edit"
</button> variant="tertiary"
onClick={onEditButtonClick}
/>
)} )}
<button <button
className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-md hover:bg-slate-50 disabled:hover:bg-white" className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-md hover:bg-slate-50 disabled:hover:bg-white"
disabled={starMutation.isLoading || unstarMutation.isLoading} disabled={starMutation.isLoading || unstarMutation.isLoading}
@ -239,13 +237,12 @@ export default function ResumeReviewPage() {
/> />
)} )}
</div> </div>
Star {detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
</span> </span>
<span className="relative -ml-px inline-flex"> <span className="relative -ml-px inline-flex">
{detailsQuery.data?._count.stars} {detailsQuery.data?._count.stars}
</span> </span>
</button> </button>
<div className="hidden xl:block">{renderReviewButton()}</div> <div className="hidden xl:block">{renderReviewButton()}</div>
</div> </div>
</div> </div>
@ -326,21 +323,17 @@ export default function ResumeReviewPage() {
<ResumePdf url={detailsQuery.data.url} /> <ResumePdf url={detailsQuery.data.url} />
</div> </div>
<div className="grow"> <div className="grow">
<div className="relative p-2 xl:hidden"> <div className="mb-6 space-y-4 xl:hidden">
<div {renderReviewButton()}
aria-hidden="true" <div className="flex items-center space-x-2">
className="absolute inset-0 flex items-center"> <hr className="flex-grow border-slate-300" />
<div className="w-full border-t border-slate-300" />
</div>
<div className="relative flex justify-center">
<span className="bg-slate-50 px-3 text-lg font-medium text-slate-900"> <span className="bg-slate-50 px-3 text-lg font-medium text-slate-900">
Reviews Reviews
</span> </span>
<hr className="flex-grow border-slate-300" />
</div> </div>
</div> </div>
<div className="mb-4 xl:hidden">{renderReviewButton()}</div>
{showCommentsForm ? ( {showCommentsForm ? (
<ResumeCommentsForm <ResumeCommentsForm
resumeId={resumeId as string} resumeId={resumeId as string}

75
apps/portal/src/pages/resumes/browse.tsx
View File

@ -10,6 +10,7 @@ import {
XMarkIcon, XMarkIcon,
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import { import {
Button,
CheckboxInput, CheckboxInput,
CheckboxList, CheckboxList,
DropdownMenu, DropdownMenu,
@ -540,16 +541,14 @@ export default function ResumeHomePage() {
onChange={onTabChange} onChange={onTabChange}
/> />
</div> </div>
<div> <Button
<button className="lg:hidden"
className="bg-primary-500 ml-4 rounded-md py-2 px-3 text-sm font-medium text-white lg:hidden" label="Submit Resume"
type="button" variant="primary"
onClick={onSubmitResume}> onClick={onSubmitResume}
Submit Resume />
</button>
</div>
</div> </div>
<div className="flex flex-wrap items-center justify-start gap-8"> <div className="flex flex-wrap items-center justify-start gap-6">
<div className="w-64"> <div className="w-64">
<TextInput <TextInput
isLabelHidden={true} isLabelHidden={true}
@ -562,37 +561,33 @@ export default function ResumeHomePage() {
onChange={setSearchValue} onChange={setSearchValue}
/> />
</div> </div>
<div> <Button
<DropdownMenu className="lg:hidden"
align="end" icon={FunnelIcon}
label={ isLabelHidden={true}
SORT_OPTIONS.find(({ value }) => value === sortOrder) label="Filters"
?.label variant="tertiary"
}> onClick={() => setMobileFiltersOpen(true)}
{SORT_OPTIONS.map(({ label, value }) => ( />
<DropdownMenu.Item <DropdownMenu
key={value} align="end"
isSelected={sortOrder === value} label={
label={label} SORT_OPTIONS.find(({ value }) => value === sortOrder)?.label
onClick={() => setSortOrder(value)}></DropdownMenu.Item> }>
))} {SORT_OPTIONS.map(({ label, value }) => (
</DropdownMenu> <DropdownMenu.Item
</div> key={value}
<button isSelected={sortOrder === value}
className="-m-2 text-slate-400 hover:text-slate-500 lg:hidden" label={label}
type="button" onClick={() => setSortOrder(value)}></DropdownMenu.Item>
onClick={() => setMobileFiltersOpen(true)}> ))}
<span className="sr-only">Filters</span> </DropdownMenu>
<FunnelIcon aria-hidden="true" className="h-6 w-6" /> <Button
</button> className="hidden lg:block"
<div> label="Submit Resume"
<button variant="primary"
className="bg-primary-500 hidden w-36 rounded-md py-2 px-3 text-sm font-medium text-white lg:block" onClick={onSubmitResume}
type="button" />
onClick={onSubmitResume}>
Submit Resume
</button>
</div>
</div> </div>
</div> </div>
{isFetchingResumes ? ( {isFetchingResumes ? (