redesign UI with left sidebar, card grids, and two-column dashboard layout
This commit is contained in:
@@ -12,10 +12,12 @@ export default async function ResumesPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-2 border-b border-zinc-200/70 dark:border-zinc-800/70">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Resumes</h1>
|
||||
<h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight text-zinc-900 dark:text-white">
|
||||
Resumes
|
||||
</h1>
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-50 text-purple-700 dark:bg-purple-950/70 dark:text-purple-300 border border-purple-200/60 dark:border-purple-800/60">
|
||||
{resumes.length} {resumes.length === 1 ? "version" : "versions"}
|
||||
</span>
|
||||
@@ -24,74 +26,105 @@ export default async function ResumesPage() {
|
||||
Tailored resumes customized by AI for specific positions and target roles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/jobs"
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-semibold text-zinc-700 dark:text-zinc-200 bg-white dark:bg-zinc-900 border border-zinc-200/90 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-800/70 shadow-2xs transition-all shrink-0"
|
||||
>
|
||||
<svg className="w-4 h-4 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
<span>Browse Jobs Pipeline</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Resumes List */}
|
||||
{/* Resumes Grid / Empty State */}
|
||||
{resumes.length === 0 ? (
|
||||
<div className="rounded-2xl border border-zinc-200/80 dark:border-zinc-800/80 bg-white dark:bg-zinc-900 p-12 text-center shadow-xs">
|
||||
<div className="rounded-2xl border border-zinc-200/80 dark:border-zinc-800/80 bg-white dark:bg-zinc-900 p-12 text-center shadow-2xs">
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-purple-50 dark:bg-purple-950/60 text-purple-600 dark:text-purple-400 mb-3">
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">No resumes yet</h3>
|
||||
<h3 className="text-base font-bold text-zinc-900 dark:text-zinc-100">No tailored resumes yet</h3>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1 max-w-sm mx-auto">
|
||||
Open any job in your tracker and click <strong>“AI Tailor Resume”</strong> to generate a custom CV.
|
||||
Open any job in your tracker and click <strong>“AI Tailor Resume”</strong> to generate a custom CV version optimized for that role.
|
||||
</p>
|
||||
<div className="mt-4">
|
||||
<div className="mt-5">
|
||||
<Link
|
||||
href="/jobs"
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-semibold text-white bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-500 hover:to-violet-500 shadow-sm shadow-indigo-500/20"
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-semibold text-white bg-gradient-to-r from-indigo-600 via-indigo-600 to-violet-600 hover:from-indigo-500 hover:via-indigo-500 hover:to-violet-500 shadow-sm shadow-indigo-500/20 active:scale-95 transition-all"
|
||||
>
|
||||
Go to Jobs Pipeline
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{resumes.map((r) => (
|
||||
<div
|
||||
key={r.id}
|
||||
className="relative flex flex-col justify-between rounded-2xl border border-zinc-200/80 dark:border-zinc-800/80 bg-white dark:bg-zinc-900 p-5 shadow-xs hover:shadow-md hover:border-zinc-300 dark:hover:border-zinc-700 transition-all group"
|
||||
className="relative flex flex-col justify-between rounded-2xl border border-zinc-200/80 dark:border-zinc-800/80 bg-white dark:bg-zinc-900 p-5 shadow-2xs hover:shadow-md hover:border-zinc-300 dark:hover:border-zinc-700 transition-all duration-200 group"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-2.5 min-w-0 flex-1">
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-purple-50 dark:bg-purple-950/60 text-purple-600 dark:text-purple-400 border border-purple-100 dark:border-purple-900/50">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<Link
|
||||
href={`/resumes/${r.id}`}
|
||||
className="font-semibold text-sm text-zinc-900 dark:text-zinc-100 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors truncate block"
|
||||
>
|
||||
{r.name}
|
||||
</Link>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-medium bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 capitalize mt-0.5">
|
||||
{r.kind} version
|
||||
</span>
|
||||
</div>
|
||||
{/* Stylized Document Thumbnail Placeholder */}
|
||||
<div className="mb-4 rounded-xl border border-zinc-200/70 dark:border-zinc-800 bg-zinc-50/80 dark:bg-zinc-950/60 p-3.5 space-y-2 group-hover:border-indigo-300/80 dark:group-hover:border-indigo-800/60 transition-colors">
|
||||
{/* Header bar simulations */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="h-2 w-2/5 rounded-xs bg-zinc-400 dark:bg-zinc-600" />
|
||||
<div className="h-1.5 w-1/5 rounded-xs bg-zinc-300 dark:bg-zinc-700" />
|
||||
</div>
|
||||
<div className="h-1.5 w-3/5 rounded-xs bg-zinc-300 dark:bg-zinc-700" />
|
||||
|
||||
<div className="border-t border-zinc-200 dark:border-zinc-800 pt-1.5 space-y-1.5">
|
||||
{/* Section 1 */}
|
||||
<div className="h-1.5 w-1/4 rounded-xs bg-indigo-400/80 dark:bg-indigo-500/80" />
|
||||
<div className="h-1.5 w-full rounded-xs bg-zinc-200 dark:bg-zinc-800" />
|
||||
<div className="h-1.5 w-4/5 rounded-xs bg-zinc-200 dark:bg-zinc-800" />
|
||||
</div>
|
||||
|
||||
<div className="pt-0.5 space-y-1.5">
|
||||
{/* Section 2 */}
|
||||
<div className="h-1.5 w-1/4 rounded-xs bg-purple-400/80 dark:bg-purple-500/80" />
|
||||
<div className="h-1.5 w-full rounded-xs bg-zinc-200 dark:bg-zinc-800" />
|
||||
<div className="h-1.5 w-3/5 rounded-xs bg-zinc-200 dark:bg-zinc-800" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{r.job && (
|
||||
<div className="mt-3.5 pt-3 border-t border-zinc-100 dark:border-zinc-800/80 text-xs text-zinc-600 dark:text-zinc-400">
|
||||
<span className="text-zinc-400 dark:text-zinc-500">Target Role: </span>
|
||||
<Link
|
||||
href={`/jobs/${r.job.id}`}
|
||||
className="font-medium text-zinc-800 dark:text-zinc-200 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
|
||||
>
|
||||
{r.job.company} — {r.job.title}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
{/* Resume Label & Version Tag */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<Link
|
||||
href={`/resumes/${r.id}`}
|
||||
className="font-bold text-sm text-zinc-900 dark:text-zinc-100 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors line-clamp-1 block flex-1"
|
||||
>
|
||||
{r.name}
|
||||
</Link>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-semibold bg-purple-50 text-purple-700 dark:bg-purple-950/70 dark:text-purple-300 border border-purple-200/60 dark:border-purple-900/60 capitalize shrink-0">
|
||||
{r.kind} · v{r.version}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Linked Job Title + Company */}
|
||||
<div className="mt-2.5 text-xs text-zinc-600 dark:text-zinc-400 min-h-[36px]">
|
||||
{r.job ? (
|
||||
<div className="line-clamp-2">
|
||||
<span className="text-zinc-400 dark:text-zinc-500">Target Role: </span>
|
||||
<Link
|
||||
href={`/jobs/${r.job.id}`}
|
||||
className="font-semibold text-zinc-800 dark:text-zinc-200 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
|
||||
>
|
||||
{r.job.company} — {r.job.title}
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-zinc-400 dark:text-zinc-500 italic">General master resume</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center justify-between pt-3 border-t border-zinc-100 dark:border-zinc-800/80 text-xs text-zinc-400">
|
||||
<span>
|
||||
Updated{" "}
|
||||
{/* Bottom Row: Timestamp + Open Button */}
|
||||
<div className="mt-4 pt-3.5 border-t border-zinc-100 dark:border-zinc-800/80 flex items-center justify-between text-xs">
|
||||
<span className="text-zinc-400 dark:text-zinc-500 text-[11px]">
|
||||
{new Date(r.updatedAt).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@@ -100,10 +133,10 @@ export default async function ResumesPage() {
|
||||
</span>
|
||||
<Link
|
||||
href={`/resumes/${r.id}`}
|
||||
className="inline-flex items-center gap-1 font-semibold text-indigo-600 dark:text-indigo-400 group-hover:translate-x-0.5 transition-transform"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-xl font-semibold text-xs text-white bg-indigo-600 hover:bg-indigo-500 shadow-2xs active:scale-95 transition-all group-hover:shadow-indigo-500/20 group-hover:shadow-sm"
|
||||
>
|
||||
<span>Open Editor</span>
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<span>Open</span>
|
||||
<svg className="w-3 h-3 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user