65 lines
2.8 KiB
TypeScript
65 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { SITE_CONFIG } from "../config/course";
|
|
import { isPaid } from "../lib/payment";
|
|
import { InstantQaVipModal } from "@/app/components/InstantQaVipModal";
|
|
|
|
const CHAT_URL = "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot";
|
|
|
|
export function Footer() {
|
|
const [paid, setPaid] = useState(false);
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setPaid(isPaid());
|
|
const onPayUpdate = () => setPaid(isPaid());
|
|
window.addEventListener("pay:updated", onPayUpdate);
|
|
return () => window.removeEventListener("pay:updated", onPayUpdate);
|
|
}, []);
|
|
|
|
return (
|
|
<footer className="animate__animated animate__fadeInUp border-t border-[var(--border)] py-6 sm:py-8" style={{ animationDelay: "0.1s", animationFillMode: "both" }}>
|
|
<div className="mx-auto max-w-6xl px-4 sm:px-6">
|
|
<div className="mb-4 flex flex-wrap items-center justify-center gap-4">
|
|
<Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
|
|
返回首页
|
|
</Link>
|
|
<Link href="/cloudphone" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
|
|
课程首页
|
|
</Link>
|
|
{paid ? (
|
|
<a
|
|
href={CHAT_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25 hover:text-[var(--accent)]"
|
|
>
|
|
<svg width="16" height="16" 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>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => setModalOpen(true)}
|
|
className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25 hover:text-[var(--accent)]"
|
|
>
|
|
<svg width="16" height="16" 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>
|
|
即时问答
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="text-center text-sm text-[var(--muted-foreground)]">
|
|
{SITE_CONFIG.footer}
|
|
</div>
|
|
</div>
|
|
<InstantQaVipModal open={modalOpen} onClose={() => setModalOpen(false)} />
|
|
</footer>
|
|
);
|
|
}
|