112 lines
4.6 KiB
TypeScript
112 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Link } from "@/i18n/navigation";
|
|
import { useTranslation } from "@/i18n/navigation";
|
|
import { HERO_CONFIG, CURRICULUM_CONFIG } from "@/config/course";
|
|
import { isPaid } from "@/app/lib/course-payment";
|
|
import { getLastWatched, getProgress } from "@/app/lib/learning";
|
|
|
|
const TOTAL_LESSONS = CURRICULUM_CONFIG.modules.reduce((s, m) => s + m.lessons.length, 0);
|
|
|
|
export function CourseHero() {
|
|
const { t } = useTranslation("community");
|
|
const [paid, setPaid] = useState(false);
|
|
const [toast, setToast] = useState(false);
|
|
const [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
|
|
const [progress, setProgress] = useState({ completed: 0, percent: 0 });
|
|
|
|
useEffect(() => {
|
|
setPaid(isPaid());
|
|
setLast(getLastWatched());
|
|
setProgress(getProgress(TOTAL_LESSONS));
|
|
const onPay = () => setPaid(isPaid());
|
|
const onProgress = () => {
|
|
setLast(getLastWatched());
|
|
setProgress(getProgress(TOTAL_LESSONS));
|
|
};
|
|
window.addEventListener("pay:updated", onPay);
|
|
window.addEventListener("learning:progress", onProgress);
|
|
return () => {
|
|
window.removeEventListener("pay:updated", onPay);
|
|
window.removeEventListener("learning:progress", onProgress);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<section className="relative overflow-hidden pt-24 pb-16 sm:pt-28 sm:pb-20 md:pt-32 md:pb-24">
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,var(--gradient-accent),transparent)] animate-gradient" />
|
|
<div className="relative mx-auto max-w-4xl px-4 text-center sm:px-6">
|
|
<h1 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl">
|
|
{HERO_CONFIG.title}
|
|
</h1>
|
|
<p className="mb-10 text-lg text-[var(--muted-foreground)] sm:mb-12 sm:text-xl md:text-2xl">
|
|
{HERO_CONFIG.subtitle}
|
|
</p>
|
|
<div className="mb-10 flex flex-wrap justify-center gap-6 sm:mb-12 sm:gap-8">
|
|
{HERO_CONFIG.stats.map((s) => (
|
|
<div key={s.label} className="text-center transition-transform duration-300 hover:scale-105">
|
|
<div className="text-2xl font-bold text-[var(--accent)] sm:text-3xl md:text-4xl">
|
|
{s.value}
|
|
</div>
|
|
<div className="mt-1 text-xs text-[var(--muted-foreground)] sm:text-sm">
|
|
{s.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-wrap justify-center gap-3 sm:gap-4">
|
|
{paid && last ? (
|
|
<Link
|
|
href={`/course/${last.moduleIndex}/${last.lessonIndex}`}
|
|
className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
|
|
>
|
|
继续学习 →
|
|
</Link>
|
|
) : paid ? (
|
|
<Link
|
|
href="/course/0/0"
|
|
className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
|
|
>
|
|
进入课程 →
|
|
</Link>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setToast(true);
|
|
setTimeout(() => setToast(false), 2000);
|
|
}}
|
|
className="inline-flex shrink-0 cursor-not-allowed items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] opacity-90 transition hover:opacity-100 sm:px-10"
|
|
>
|
|
立即报名 →
|
|
</button>
|
|
)}
|
|
</div>
|
|
{paid && progress.completed > 0 && (
|
|
<div className="mt-6 w-full max-w-xs">
|
|
<div className="mb-1 flex justify-between text-xs text-[var(--muted-foreground)]">
|
|
<span>学习进度</span>
|
|
<span>{progress.completed}/{TOTAL_LESSONS} 节</span>
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-[var(--muted)]">
|
|
<div
|
|
className="h-full rounded-full bg-[var(--accent)] transition-all"
|
|
style={{ width: `${progress.percent}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{toast && (
|
|
<div
|
|
className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
|
|
role="alert"
|
|
>
|
|
{t("updating")}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|