83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import Link from "next/link";
|
||
import { Header } from "@/app/components";
|
||
import { getProgress } from "@/app/lib/learning";
|
||
import { CURRICULUM_CONFIG } from "@/config/course";
|
||
import { isPaid } from "@/app/lib/payment";
|
||
|
||
const TOTAL = CURRICULUM_CONFIG.modules.reduce((s, m) => s + m.lessons.length, 0);
|
||
|
||
export default function CertificatePage() {
|
||
const [progress, setProgress] = useState({ completed: 0, percent: 0 });
|
||
const [paid, setPaid] = useState(false);
|
||
|
||
useEffect(() => {
|
||
setProgress(getProgress(TOTAL));
|
||
setPaid(isPaid());
|
||
}, []);
|
||
|
||
const completed = progress.percent >= 100;
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
|
||
<Header />
|
||
<main className="pt-20 pb-16">
|
||
<div className="mx-auto max-w-2xl px-4 text-center">
|
||
{!paid ? (
|
||
<div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-8">
|
||
<h1 className="mb-4 text-2xl font-bold">报名后可查看证书</h1>
|
||
<p className="mb-6 text-[var(--muted-foreground)]">
|
||
完成全部 {TOTAL} 节课程后可申请结业证书
|
||
</p>
|
||
<Link
|
||
href="/pay"
|
||
className="inline-flex rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] hover:opacity-90"
|
||
>
|
||
立即报名
|
||
</Link>
|
||
</div>
|
||
) : completed ? (
|
||
<div className="rounded-2xl border-2 border-[var(--accent)] bg-[var(--card)] p-8">
|
||
<div className="mb-6 text-5xl">🎓</div>
|
||
<h1 className="mb-2 text-2xl font-bold">结业证书</h1>
|
||
<p className="mb-6 text-[var(--muted-foreground)]">
|
||
恭喜你完成《数字游民实战课》全部 {TOTAL} 节课程
|
||
</p>
|
||
<p className="mb-8 text-sm text-[var(--muted-foreground)]">
|
||
异度世界、大师兄、小美
|
||
</p>
|
||
<Link
|
||
href="/"
|
||
className="text-[var(--accent)] underline hover:no-underline"
|
||
>
|
||
返回课程
|
||
</Link>
|
||
</div>
|
||
) : (
|
||
<div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-8">
|
||
<h1 className="mb-4 text-2xl font-bold">继续加油</h1>
|
||
<p className="mb-6 text-[var(--muted-foreground)]">
|
||
已完成 {progress.completed}/{TOTAL} 节，完成全部可解锁证书
|
||
</p>
|
||
<div className="mb-6 h-3 overflow-hidden rounded-full bg-[var(--muted)]">
|
||
<div
|
||
className="h-full rounded-full bg-[var(--accent)] transition-all"
|
||
style={{ width: `${progress.percent}%` }}
|
||
/>
|
||
</div>
|
||
<Link
|
||
href="/course/0/0"
|
||
className="inline-flex rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] hover:opacity-90"
|
||
>
|
||
继续学习
|
||
</Link>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|