info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-03 22:32:35 +02:00
Code Issues Releases Wiki Activity

Update UI for upload resume model

Browse Source
This commit is contained in:
Kamran Ahmed
2025-06-04 15:54:44 +01:00
parent 884ffc1907
commit 77f575df6e
1 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/AIChat/UploadResumeModal.tsx
View File

@@ -8,7 +8,7 @@ import {
import { cn } from '../../lib/classname'; import { cn } from '../../lib/classname';
import { Loader2Icon, PlusIcon, XIcon } from 'lucide-react'; import { Loader2Icon, PlusIcon, XIcon } from 'lucide-react';
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import { httpDelete, httpPost } from '../../lib/query-http'; import { httpDelete } from '../../lib/query-http';
import { useToast } from '../../hooks/use-toast'; import { useToast } from '../../hooks/use-toast';
import { queryClient } from '../../stores/query-client'; import { queryClient } from '../../stores/query-client';
import { import {
@@ -106,7 +106,9 @@ export function UploadResumeModal(props: UploadResumeModalProps) {
encType="multipart/form-data" encType="multipart/form-data"
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
<h2 className="text-center text-3xl">Upload your resume</h2> <h2 className="text-center text-2xl font-semibold text-black">
Upload your resume
</h2>
<p className="mt-2 text-center text-sm text-balance text-gray-500"> <p className="mt-2 text-center text-sm text-balance text-gray-500">
Upload your resume to get personalized responses to your questions. Upload your resume to get personalized responses to your questions.
</p> </p>
@@ -115,13 +117,15 @@ export function UploadResumeModal(props: UploadResumeModalProps) {
<div className="mt-8"> <div className="mt-8">
<div className="flex items-center justify-between gap-2 rounded-lg border border-gray-200 p-4"> <div className="flex items-center justify-between gap-2 rounded-lg border border-gray-200 p-4">
<div> <div>
<h3 className="text-base font-medium">{file.name}</h3> <h3 className="text-base font-medium text-black">
<p className="mt-0.5 text-sm text-gray-400">{fileSize} MB</p> {file.name}
</h3>
<p className="mt-0.5 text-sm text-gray-500">{fileSize} MB</p>
</div> </div>
<button <button
type="button" type="button"
className="flex size-8 items-center justify-center rounded-md text-gray-400 hover:bg-red-100 hover:text-red-500" className="flex size-8 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500"
disabled={isDeletingResume} disabled={isDeletingResume}
onClick={() => deleteResume()} onClick={() => deleteResume()}
> >
@@ -140,23 +144,25 @@ export function UploadResumeModal(props: UploadResumeModalProps) {
<div <div
{...getRootProps({ {...getRootProps({
className: cn( className: cn(
'border-[1.5px] border-dashed border-gray-200 min-h-60 flex items-center justify-center rounded-lg p-4 mt-8 bg-gray-50 cursor-pointer', 'border border-dashed border-gray-300 min-h-60 flex items-center justify-center rounded-lg p-4 mt-8 bg-gray-50 cursor-pointer hover:border-black transition-colors',
isDragActive && 'border-gray-400', isDragActive && 'border-black bg-gray-100',
), ),
})} })}
> >
<input {...getInputProps()} /> <input {...getInputProps()} />
<div className="mx-auto flex max-w-2xs flex-col items-center text-center text-balance"> <div className="mx-auto flex max-w-2xs flex-col items-center text-center text-balance">
<PlusIcon className="size-5 text-gray-400" /> <PlusIcon className="size-5 text-gray-500" />
<p className="mt-3 text-gray-500"> <p className="mt-4 text-gray-600">
Drag and drop your resume here or{' '} Drag and drop your resume here or{' '}
<span className="text-black">click to browse</span> <span className="font-semibold text-black">
click to browse
</span>
</p> </p>
</div> </div>
</div> </div>
<p className="mt-2 text-center text-xs text-gray-400"> <p className="mt-4 text-center text-xs text-gray-500">
Only PDF files are supported at the moment Only PDF files (max 2MB in size) are supported
</p> </p>
</> </>
)} )}
@@ -165,7 +171,7 @@ export function UploadResumeModal(props: UploadResumeModalProps) {
<> <>
<button <button
type="submit" type="submit"
className="mt-4 flex w-full cursor-pointer items-center justify-center rounded-lg bg-gray-100 p-1 py-2.5 leading-none tracking-wide text-gray-600 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:text-gray-400 data-[loading=true]:cursor-wait" className="mt-4 flex w-full cursor-pointer items-center justify-center rounded-lg bg-black p-1 py-3 leading-none tracking-wide text-white transition-colors hover:bg-gray-900 disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none data-[loading=true]:cursor-wait"
data-loading={String(isUploading)} data-loading={String(isUploading)}
disabled={!file || isUploading || isDeletingResume} disabled={!file || isUploading || isDeletingResume}
> >
@@ -176,13 +182,13 @@ export function UploadResumeModal(props: UploadResumeModalProps) {
)} )}
</button> </button>
<p className="mt-4 text-center text-xs text-gray-400"> <p className="mt-4 text-center text-xs text-gray-500">
You can also export your resume from{' '} You can also export your resume from{' '}
<a <a
href="https://www.linkedin.com/" href="https://www.linkedin.com/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-gray-600 underline" className="text-black underline underline-offset-2 hover:text-gray-600"
> >
LinkedIn LinkedIn
</a> </a>