gabogg/semillero-2-AI-ATS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(interviews): animate sidebar collapse when candidate selected

Browse source
This commit is contained in:
Gabriel Ramos 2026-06-10 17:18:49 -04:00
parent 628faa7e24
commit 5f87b58baa
1 changed files with 265 additions and 246 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/(dashboard)/interviews/page.tsx
View file

@ -415,9 +415,14 @@ export default function InterviewsPage() {
</p> </p>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start"> <div className="flex flex-col lg:flex-row items-start w-full overflow-hidden">
{/* COLUMN 1: Open Positions Sidebar */} {/* COLUMN 1: Open Positions Sidebar */}
<div className="lg:col-span-1 bg-white dark:bg-slate-900 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800 flex flex-col gap-1.5"> <div className={`transition-all duration-300 ease-in-out flex-shrink-0 ${
selectedInterviewId
? "w-0 opacity-0 overflow-hidden lg:pr-0 pointer-events-none"
: "w-full lg:w-1/4 lg:pr-6 mb-6 lg:mb-0"
}`}>
<div className="bg-white dark:bg-slate-900 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800 flex flex-col gap-1.5">
<h3 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider px-2 mb-1"> <h3 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider px-2 mb-1">
{t.openPositions} {t.openPositions}
</h3> </h3>
@ -456,9 +461,15 @@ export default function InterviewsPage() {
); );
})} })}
</div> </div>
</div>
{/* COLUMN 2: Candidates List */} {/* COLUMN 2: Candidates List */}
<div className="lg:col-span-1 bg-white dark:bg-slate-900 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800 flex flex-col gap-4"> <div className={`transition-all duration-300 ease-in-out flex-shrink-0 ${
selectedInterviewId
? "w-full lg:w-1/3 lg:pr-6 mb-6 lg:mb-0"
: "w-full lg:w-1/4 lg:pr-6 mb-6 lg:mb-0"
}`}>
<div className="bg-white dark:bg-slate-900 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800 flex flex-col gap-4">
<div className="border-b border-slate-200 dark:border-slate-800 pb-2"> <div className="border-b border-slate-200 dark:border-slate-800 pb-2">
<h3 className="text-sm font-bold text-slate-900 dark:text-white"> <h3 className="text-sm font-bold text-slate-900 dark:text-white">
{t.candidates} {t.candidates}
@ -531,9 +542,15 @@ export default function InterviewsPage() {
</div> </div>
)} )}
</div> </div>
</div>
{/* COLUMN 3: Candidate Details Pane */} {/* COLUMN 3: Candidate Details Pane */}
<div className="lg:col-span-2 bg-white dark:bg-slate-900 p-6 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800 flex flex-col gap-6 min-h-[300px]"> <div className={`transition-all duration-300 ease-in-out flex-1 ${
selectedInterviewId
? "w-full lg:w-2/3"
: "w-full lg:w-2/4"
}`}>
<div className="bg-white dark:bg-slate-900 p-6 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800 flex flex-col gap-6 min-h-[300px]">
{!selectedInterview ? ( {!selectedInterview ? (
<div className="flex-1 flex flex-col items-center justify-center text-center py-12"> <div className="flex-1 flex flex-col items-center justify-center text-center py-12">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-10 h-10 text-slate-300 dark:text-slate-600 mb-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-10 h-10 text-slate-300 dark:text-slate-600 mb-3">
@ -677,7 +694,9 @@ export default function InterviewsPage() {
)} )}
</div> </div>
</div> </div>
</div>
)} )}
</div> </div>
); );
} }