98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import { useEffect } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import Header from "../../components/Header";
|
|
import Footer from "../../components/Footer";
|
|
import { HOSTS } from "@/config/home.config";
|
|
|
|
export default function HostDetailPage() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const id = typeof params.id === "string" ? params.id : "";
|
|
const host = HOSTS.find((h) => h.id === id);
|
|
|
|
useEffect(() => {
|
|
if (host && "link" in host && host.link) {
|
|
if (host.link.startsWith("http")) {
|
|
window.location.href = host.link;
|
|
} else {
|
|
router.replace(host.link);
|
|
}
|
|
}
|
|
}, [host, router]);
|
|
|
|
if (!host) {
|
|
return (
|
|
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 flex items-center justify-center">
|
|
<div className="text-center px-4">
|
|
<p className="text-stone-500 dark:text-stone-400 mb-4">主理人不存在</p>
|
|
<Link href="/" className="text-amber-600 dark:text-amber-400">
|
|
返回首页
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if ("link" in host && host.link) {
|
|
return (
|
|
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 flex items-center justify-center">
|
|
<p className="text-stone-500 dark:text-stone-400">跳转中…</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
|
|
<Header />
|
|
<main className="max-w-[600px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center gap-1 text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 mb-6"
|
|
>
|
|
← 返回首页
|
|
</Link>
|
|
|
|
<article className="rounded-2xl overflow-hidden bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-700">
|
|
<div className="p-6 sm:p-8 text-center">
|
|
<div className="relative w-24 h-24 sm:w-28 sm:h-28 mx-auto rounded-full overflow-hidden border-4 border-amber-100 dark:border-amber-900/30">
|
|
<Image
|
|
src={host.avatar}
|
|
alt={host.name}
|
|
fill
|
|
sizes="112px"
|
|
className="object-cover"
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
<h1 className="mt-4 text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">
|
|
{host.name}
|
|
</h1>
|
|
<p className="mt-2 text-sm text-amber-600 dark:text-amber-400">
|
|
{host.bio}
|
|
</p>
|
|
{"intro" in host && typeof host.intro === "string" && (
|
|
<div className="mt-6 pt-6 border-t border-stone-100 dark:border-stone-700 text-left">
|
|
<p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed">
|
|
{host.intro}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</article>
|
|
|
|
<Link
|
|
href="/"
|
|
className="mt-6 inline-flex justify-center w-full sm:w-auto bg-amber-600 hover:bg-amber-700 text-white px-6 py-2.5 rounded-xl text-sm font-medium"
|
|
>
|
|
看看本周活动
|
|
</Link>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|