File size: 4,126 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | "use client";
import { ArrowRight, Upload } from "lucide-react";
import {
labelForOnboardingGoal,
type StudentStudyProfile,
} from "@/lib/onboarding";
export function ExamPathModule({
profile,
onSetup,
onUpload,
onGenerate,
}: {
profile: StudentStudyProfile | null;
onSetup: () => void;
onUpload: () => void;
onGenerate: () => void;
}) {
if (!profile || profile.onboardingSkipped) {
return (
<section className="mx-2 mt-2 flex shrink-0 flex-col gap-3 rounded-[18px] border border-white/[0.08] bg-[#0b0b0c] px-4 py-3 md:mx-2.5 md:flex-row md:items-center md:justify-between md:px-5">
<div className="min-w-0">
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-white/34">Your exam path</p>
<h2 className="mt-1 text-[14px] font-medium text-white/86">Set up your exam path</h2>
<p className="mt-1 text-[12px] leading-5 text-white/47">
DocDoe can rank topics better when it knows your board, class, and subjects.
</p>
</div>
<button
type="button"
onClick={onSetup}
className="inline-flex min-h-10 shrink-0 items-center justify-center gap-2 rounded-full bg-white px-4 text-[12px] font-semibold text-[#080808] transition hover:-translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/35"
>
Complete setup
<ArrowRight className="size-3.5" strokeWidth={1.75} aria-hidden="true" />
</button>
</section>
);
}
const context = [profile.board, profile.classLevel, profile.stream].filter(Boolean).join(" / ");
const subjects = profile.subjects?.slice(0, 3).join(", ") || profile.subject || "Add subjects";
const hasFirstMaterial = profile.firstUploadStatus === "ready" || profile.firstUploadStatus === "received";
return (
<section className="mx-2 mt-2 flex shrink-0 flex-col gap-3 rounded-[18px] border border-white/[0.08] bg-[#0b0b0c] px-4 py-3 md:mx-2.5 md:flex-row md:items-center md:justify-between md:px-5">
<div className="min-w-0">
<div className="flex items-center gap-2">
<span className="size-1.5 rounded-full bg-blue-400" aria-hidden="true" />
<p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-white/38">Your exam path</p>
</div>
<p className="mt-1.5 truncate text-[13px] font-medium text-white/82">{context || "Study profile set"}</p>
<p className="mt-1 truncate text-[12px] text-white/47">
Goal: {labelForOnboardingGoal(profile.primaryGoal)} / Subjects: {subjects}
</p>
</div>
<div className="flex shrink-0 gap-2">
{hasFirstMaterial ? (
<button
type="button"
onClick={onGenerate}
className="inline-flex min-h-10 items-center justify-center rounded-full bg-white px-4 text-[12px] font-semibold text-[#080808] transition hover:-translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/35"
>
Find study signals
</button>
) : (
<>
<button
type="button"
onClick={onUpload}
className="inline-flex min-h-10 items-center justify-center gap-1.5 rounded-full border border-white/[0.11] px-4 text-[12px] font-medium text-white/68 transition hover:border-white/22 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/35"
>
<Upload className="size-3.5" strokeWidth={1.7} aria-hidden="true" />
Upload material
</button>
<button
type="button"
onClick={onGenerate}
className="inline-flex min-h-10 items-center justify-center rounded-full bg-white px-4 text-[12px] font-semibold text-[#080808] transition hover:-translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/35"
>
Generate study path
</button>
</>
)}
</div>
</section>
);
}
|