93 lines
3.9 KiB
TypeScript
93 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
import { useParams } from "next/navigation";
|
||
import Link from "next/link";
|
||
import SessionCoverImage from "../../components/SessionCoverImage";
|
||
import AddressLink from "../../components/AddressLink";
|
||
import Header from "../../components/Header";
|
||
import Footer from "../../components/Footer";
|
||
import { PAST_SESSIONS } from "@/config/home.config";
|
||
import { ACTIVITY_TYPES } from "@/config/home.config";
|
||
|
||
export default function HistoryDetailPage() {
|
||
const params = useParams();
|
||
const id = typeof params.id === "string" ? params.id : "";
|
||
const session = PAST_SESSIONS.find((s) => s.id === id);
|
||
|
||
if (!session) {
|
||
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="/history" className="text-amber-600 dark:text-amber-400">
|
||
返回历史活动
|
||
</Link>
|
||
</div>
|
||
</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="/history"
|
||
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="relative aspect-[16/10] w-full bg-stone-100 dark:bg-stone-800">
|
||
{session.coverImage ? (
|
||
<SessionCoverImage
|
||
src={session.coverImage}
|
||
alt={session.title}
|
||
type={session.type}
|
||
fill
|
||
sizes="600px"
|
||
className="object-cover"
|
||
/>
|
||
) : (
|
||
<div className="absolute inset-0 flex items-center justify-center text-4xl">☕</div>
|
||
)}
|
||
<div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent">
|
||
<span className="text-xs text-white/90">{ACTIVITY_TYPES[session.type]} · {session.city}</span>
|
||
<h1 className="text-xl sm:text-2xl font-bold text-white mt-0.5">{session.title}</h1>
|
||
</div>
|
||
</div>
|
||
<div className="p-5 sm:p-6">
|
||
<dl className="space-y-3 text-sm">
|
||
<div>
|
||
<dt className="text-stone-500 dark:text-stone-400">时间</dt>
|
||
<dd className="font-medium text-stone-800 dark:text-stone-100">{session.date} {session.time}</dd>
|
||
</div>
|
||
<div>
|
||
<dt className="text-stone-500 dark:text-stone-400">地点</dt>
|
||
<dd className="font-medium text-stone-800 dark:text-stone-100">
|
||
<AddressLink place={session.place} city={session.city} className="text-stone-800 dark:text-stone-100" />
|
||
</dd>
|
||
</div>
|
||
<div>
|
||
<dt className="text-stone-500 dark:text-stone-400">城市</dt>
|
||
<dd className="font-medium text-stone-800 dark:text-stone-100">{session.city}</dd>
|
||
</div>
|
||
</dl>
|
||
<p className="mt-4 pt-4 border-t border-stone-100 dark:border-stone-700 text-sm text-stone-600 dark:text-stone-400">
|
||
这是一场已结束的活动。想参加本周活动？去首页看看～
|
||
</p>
|
||
<Link
|
||
href="/"
|
||
className="mt-4 inline-flex items-center 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>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|