Spaces:
Running
Running
| import { CheckCircle2, AlertTriangle, FolderGit2, Globe, ShieldCheck } from 'lucide-react'; | |
| import { resolveCanonicalCourseTitle } from '../utils/courseTitleResolver'; | |
| type ProjectProofCardProps = { | |
| project: { | |
| certificateId: string | null; | |
| skill: string; | |
| projectTitle: string | null; | |
| projectType: string | null; | |
| difficultyLevel: 'beginner' | 'intermediate' | 'advanced'; | |
| githubRepoUrl: string | null; | |
| liveDemoUrl: string | null; | |
| finalScore: number; | |
| commitCount: number; | |
| fileCount: number; | |
| passConfidence: number; | |
| trustSignals: { | |
| commitCount: number; | |
| validationPassed: boolean; | |
| readmeScore: number; | |
| projectType: string | null; | |
| }; | |
| validationSummary: { | |
| overallPassed: boolean; | |
| commitPassed: boolean; | |
| readmePassed: boolean; | |
| proofPassed: boolean; | |
| commitCount: number; | |
| fileCount: number; | |
| meaningfulFileCount: number; | |
| readmeRichness: number; | |
| suspiciousSignals: string[]; | |
| } | null; | |
| }; | |
| }; | |
| export function ProjectProofCard({ project }: ProjectProofCardProps) { | |
| const verificationUrl = project.certificateId ? `/verify/${encodeURIComponent(project.certificateId)}` : null; | |
| const displayTitle = project.projectTitle || resolveCanonicalCourseTitle(project.skill); | |
| return ( | |
| <article className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-sm font-sans text-slate-900 dark:text-white"> | |
| <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"> | |
| <div className="space-y-1"> | |
| <div className="flex items-center gap-2"> | |
| <span className="text-[11px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded"> | |
| Level: {project.difficultyLevel} | |
| </span> | |
| <span className="text-xs text-slate-400 dark:text-slate-500"> | |
| {resolveCanonicalCourseTitle(project.skill)} · {project.projectType || 'General'} | |
| </span> | |
| </div> | |
| <h4 className="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{displayTitle}</h4> | |
| </div> | |
| <span className={`inline-flex items-center gap-1.5 px-3 py-1 text-xs font-semibold rounded-full border ${ | |
| project.trustSignals.validationPassed | |
| ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-800 dark:text-emerald-300 border-emerald-200 dark:border-emerald-800' | |
| : 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-700' | |
| }`}> | |
| {project.trustSignals.validationPassed ? ( | |
| <> | |
| <CheckCircle2 className="w-3.5 h-3.5" /> | |
| <span>Validation Passed</span> | |
| </> | |
| ) : ( | |
| <> | |
| <AlertTriangle className="w-3.5 h-3.5" /> | |
| <span>Needs Review</span> | |
| </> | |
| )} | |
| </span> | |
| </div> | |
| <div className="mb-5 grid grid-cols-2 gap-3 text-xs md:grid-cols-4"> | |
| <div className="rounded-xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/60 p-3"> | |
| <p className="text-[10px] font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Score</p> | |
| <p className="text-xl font-bold text-slate-900 dark:text-white mt-0.5">{project.finalScore}%</p> | |
| </div> | |
| <div className="rounded-xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/60 p-3"> | |
| <p className="text-[10px] font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Commits</p> | |
| <p className="text-xl font-bold text-slate-900 dark:text-white mt-0.5">{project.commitCount}</p> | |
| </div> | |
| <div className="rounded-xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/60 p-3"> | |
| <p className="text-[10px] font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Files</p> | |
| <p className="text-xl font-bold text-slate-900 dark:text-white mt-0.5">{project.fileCount}</p> | |
| </div> | |
| <div className="rounded-xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/60 p-3"> | |
| <p className="text-[10px] font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Confidence</p> | |
| <p className="text-xl font-bold text-[#132F50] dark:text-blue-400 mt-0.5">{project.passConfidence}%</p> | |
| </div> | |
| </div> | |
| <div className="mb-5 flex flex-wrap gap-2 text-xs"> | |
| <span className="bg-blue-50 dark:bg-blue-950/40 text-blue-700 dark:text-blue-300 px-2.5 py-1 rounded-lg border border-blue-200 dark:border-blue-800 font-medium"> | |
| README: {project.trustSignals.readmeScore}% | |
| </span> | |
| <span className="bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-2.5 py-1 rounded-lg border border-slate-200 dark:border-slate-700 font-medium"> | |
| Type: {project.trustSignals.projectType || 'Standard'} | |
| </span> | |
| <span className="bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-2.5 py-1 rounded-lg border border-slate-200 dark:border-slate-700 font-medium"> | |
| Verified Commits: {project.trustSignals.commitCount} | |
| </span> | |
| </div> | |
| {project.validationSummary && project.validationSummary.suspiciousSignals.length > 0 && ( | |
| <div className="mb-5 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/60 p-4 text-xs text-slate-700 dark:text-slate-300"> | |
| <p className="mb-2 font-semibold uppercase tracking-wider text-slate-800 dark:text-slate-200 flex items-center gap-1.5"> | |
| <AlertTriangle className="w-4 h-4 text-amber-600 inline" /> | |
| <span>Validator Observations</span> | |
| </p> | |
| <ul className="space-y-1 text-xs"> | |
| {project.validationSummary.suspiciousSignals.slice(0, 3).map((signal) => ( | |
| <li key={signal}>• {signal}</li> | |
| ))} | |
| </ul> | |
| </div> | |
| )} | |
| <div className="flex flex-wrap items-center gap-2 pt-4 border-t border-slate-100 dark:border-slate-800"> | |
| {project.githubRepoUrl && ( | |
| <a | |
| href={project.githubRepoUrl} | |
| target="_blank" | |
| rel="noreferrer" | |
| className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 hover:bg-slate-100 dark:bg-slate-800 dark:hover:bg-slate-700 text-xs font-semibold text-slate-800 dark:text-slate-200 transition-colors" | |
| > | |
| <FolderGit2 className="w-3.5 h-3.5" /> | |
| <span>Repository</span> | |
| </a> | |
| )} | |
| {project.liveDemoUrl && ( | |
| <a | |
| href={project.liveDemoUrl} | |
| target="_blank" | |
| rel="noreferrer" | |
| className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 hover:bg-slate-100 dark:bg-slate-800 dark:hover:bg-slate-700 text-xs font-semibold text-slate-800 dark:text-slate-200 transition-colors" | |
| > | |
| <Globe className="w-3.5 h-3.5" /> | |
| <span>Live Demo</span> | |
| </a> | |
| )} | |
| {verificationUrl && ( | |
| <a | |
| href={verificationUrl} | |
| target="_blank" | |
| rel="noreferrer" | |
| className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#132F50] hover:bg-[#0e233d] text-white text-xs font-semibold shadow-2xs transition-colors" | |
| > | |
| <ShieldCheck className="w-3.5 h-3.5" /> | |
| <span>Verify Record</span> | |
| </a> | |
| )} | |
| <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-emerald-50 dark:bg-emerald-950/40 text-emerald-800 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800 text-xs font-semibold ml-auto"> | |
| <CheckCircle2 className="w-3.5 h-3.5" /> | |
| <span>Recruiter Ready</span> | |
| </span> | |
| </div> | |
| </article> | |
| ); | |
| } | |