fix(ui): separate cbt and pdf dpp viewer logic and fix flex layout on dpp cards

This commit is contained in:
2026-07-27 15:12:46 +05:30
parent d79671ee73
commit 9fb23d05e1
2 changed files with 25 additions and 41 deletions

View File

@@ -145,8 +145,8 @@ export default function PrepPilotAIPage() {
return (
<Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[#00F0FF]/50 bg-background'}`}>
<CardContent className="p-6 flex items-center justify-between">
<div className="flex gap-4">
<CardContent className="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex gap-4 items-start w-full">
<div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}>
{isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[#00F0FF] transition-colors flex items-center justify-center"></div>}
</div>
@@ -169,7 +169,7 @@ export default function PrepPilotAIPage() {
</>
) : null}
</div>
<h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors flex items-center gap-2">
<h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors flex flex-wrap items-center gap-2">
{dpp.title}
<span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
{dpp.difficulty}
@@ -185,36 +185,30 @@ export default function PrepPilotAIPage() {
</div>
</div>
</div>
<div className="flex flex-col sm:flex-row gap-2 shrink-0">
<div className="flex flex-col sm:flex-row gap-2 shrink-0 md:self-center">
{isUpcoming ? (
<Button disabled variant="outline" size="sm" className="font-bold">Starts Soon</Button>
) : isExpired && !isAttempted ? (
<Button disabled variant="outline" size="sm" className="font-bold bg-secondary/50">Expired</Button>
) : isAttempted ? (
<>
<Link href={user?.tier === "Free" ? "#" : `/cbt/${dpp.id}/result`}>
<Button onClick={() => user?.tier === "Free" && setSelectedPdfDpp(dpp)} variant="outline" size="sm" className="font-bold border-border">Result</Button>
<Link href={`/cbt/${dpp.id}/result`}>
<Button variant="outline" size="sm" className="font-bold border-border">Result</Button>
</Link>
{!isExpired && (
<Link href={user?.tier === "Free" ? "#" : `/dashboard/ai-coach/cbt-dpp/${dpp.id}`}>
<Button onClick={() => user?.tier === "Free" && setSelectedPdfDpp(dpp)} variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20">
{user?.tier === "Free" ? "Read PDF" : "Retake CBT"}
<Link href={`/dashboard/ai-coach/cbt-dpp/${dpp.id}`}>
<Button variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20 gap-2">
Retake CBT
</Button>
</Link>
)}
</>
) : (
user?.tier === "Free" ? (
<Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" className="rounded-xl bg-primary/10 text-primary hover:bg-primary/20 font-bold gap-2 text-xs">
<Eye size={14} /> Open PDF
<Link href={`/dashboard/ai-coach/cbt-dpp/${dpp.id}`}>
<Button variant="secondary" size="sm" className="rounded-xl bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold gap-2 text-xs shadow-[0_0_12px_rgba(0,240,255,0.2)]">
<Play size={14} className="fill-black" /> Launch CBT DPP
</Button>
) : (
<Link href={`/dashboard/ai-coach/cbt-dpp/${dpp.id}`}>
<Button variant="secondary" size="sm" className="rounded-xl bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold gap-2 text-xs shadow-[0_0_12px_rgba(0,240,255,0.2)]">
<Play size={14} className="fill-black" /> Launch CBT DPP
</Button>
</Link>
)
</Link>
)}
</div>
</CardContent>