fix(ui): separate cbt and pdf dpp viewer logic and fix flex layout on dpp cards
This commit is contained in:
@@ -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
|
||||
</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>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
@@ -145,8 +145,8 @@ export default function DPPPage() {
|
||||
|
||||
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 DPPPage() {
|
||||
</>
|
||||
) : 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,26 @@ export default function DPPPage() {
|
||||
</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"}
|
||||
<Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20 gap-2">
|
||||
<Eye size={14} /> Read PDF
|
||||
</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
|
||||
</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>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user