101 lines
4.2 KiB
TypeScript
101 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { ThemeToggle } from "@/app/components/ThemeToggle";
|
|
import { getTopicConfig } from "../config";
|
|
import { isPaid } from "@/app/cloudphone/lib/payment";
|
|
import { triggerPay } from "@/app/lib/triggerPay";
|
|
|
|
type TopicHeaderProps = {
|
|
topicId: string;
|
|
};
|
|
|
|
export function TopicHeader({ topicId }: TopicHeaderProps) {
|
|
const [paid, setPaid] = useState(false);
|
|
const config = getTopicConfig(topicId);
|
|
|
|
useEffect(() => {
|
|
setPaid(isPaid());
|
|
const onPayUpdate = () => setPaid(isPaid());
|
|
window.addEventListener("pay:updated", onPayUpdate);
|
|
return () => window.removeEventListener("pay:updated", onPayUpdate);
|
|
}, []);
|
|
|
|
const isEnrollCta = !config?.externalUrl && !paid;
|
|
|
|
return (
|
|
<header
|
|
className="fixed left-0 right-0 top-0 z-50 border-b border-[var(--border)] bg-[var(--background)]/95 backdrop-blur-xl"
|
|
style={{ animationFillMode: "both" }}
|
|
>
|
|
<div className="mx-auto flex h-12 max-w-6xl items-center justify-between gap-2 px-3 sm:h-14 sm:gap-4 sm:px-4 md:h-16 md:px-6">
|
|
<Link
|
|
href="/"
|
|
className="min-w-0 truncate text-sm font-medium text-[var(--foreground)] sm:text-base md:text-lg"
|
|
>
|
|
🌍 异度星球
|
|
</Link>
|
|
<nav className="flex shrink-0 items-center gap-1.5 sm:gap-3">
|
|
<ThemeToggle />
|
|
<Link
|
|
href="/"
|
|
className="text-sm text-[var(--muted-foreground)] transition hover:text-[var(--foreground)]"
|
|
>
|
|
首页
|
|
</Link>
|
|
{paid ? (
|
|
<a
|
|
href="https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hidden items-center gap-1.5 rounded-full border border-[var(--accent)]/40 bg-[var(--accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/20 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
|
</svg>
|
|
即时问答
|
|
</a>
|
|
) : (
|
|
<Link
|
|
href="/"
|
|
className="hidden items-center gap-1.5 rounded-full border border-[var(--accent)]/40 bg-[var(--accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/20 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
|
|
title="开通VIP解锁即时问答"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
即时问答
|
|
</Link>
|
|
)}
|
|
{config?.externalUrl ? (
|
|
<Link
|
|
href={config.externalUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-4 sm:py-2 sm:text-sm"
|
|
>
|
|
前往了解 →
|
|
</Link>
|
|
) : isEnrollCta ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => triggerPay()}
|
|
className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-4 sm:py-2 sm:text-sm"
|
|
>
|
|
立即报名 →
|
|
</button>
|
|
) : (
|
|
<Link
|
|
href="/cloudphone/course/0/0"
|
|
className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-4 sm:py-2 sm:text-sm"
|
|
>
|
|
进入课程 →
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|