85 lines
3.7 KiB
TypeScript
85 lines
3.7 KiB
TypeScript
"use client";
|
||
|
||
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 HistoryPage() {
|
||
return (
|
||
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
|
||
<Header />
|
||
<main className="max-w-[700px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
|
||
<h1 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-2">
|
||
历史活动
|
||
</h1>
|
||
<p className="text-sm text-stone-500 dark:text-stone-400 mb-8">
|
||
看看之前都举办了什么～
|
||
</p>
|
||
|
||
<div className="relative">
|
||
<div className="absolute left-[11px] sm:left-[15px] top-0 bottom-0 w-px bg-stone-200 dark:bg-stone-700" />
|
||
<div className="space-y-0">
|
||
{PAST_SESSIONS.map((s, i) => (
|
||
<Link
|
||
key={s.id}
|
||
href={`/history/${s.id}`}
|
||
className="group flex gap-4 sm:gap-6 py-6 sm:py-8 relative"
|
||
>
|
||
<div className="relative z-10 w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-amber-500 shrink-0 mt-1 flex items-center justify-center text-white text-[10px] sm:text-xs font-bold">
|
||
{PAST_SESSIONS.length - i}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex flex-col sm:flex-row sm:items-start gap-3 sm:gap-4">
|
||
<div className="relative w-full sm:w-28 sm:h-28 shrink-0 aspect-[4/3] sm:aspect-square rounded-xl overflow-hidden bg-stone-100 dark:bg-stone-800">
|
||
{s.coverImage ? (
|
||
<SessionCoverImage
|
||
src={s.coverImage}
|
||
alt={s.title}
|
||
type={s.type}
|
||
fill
|
||
sizes="(max-width: 640px) 100vw, 112px"
|
||
className="object-cover"
|
||
/>
|
||
) : (
|
||
<div className="absolute inset-0 flex items-center justify-center text-2xl">☕</div>
|
||
)}
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<span className="text-[10px] sm:text-xs text-amber-600 dark:text-amber-400/90">
|
||
{ACTIVITY_TYPES[s.type]} · {s.city}
|
||
</span>
|
||
<h2 className="font-semibold text-stone-800 dark:text-stone-100 text-base sm:text-lg mt-0.5 group-hover:text-amber-600 dark:group-hover:text-amber-400">
|
||
{s.title}
|
||
</h2>
|
||
<p className="text-sm text-stone-500 dark:text-stone-400 mt-0.5">
|
||
{s.date} {s.time} · <AddressLink place={s.place} city={s.city} />
|
||
</p>
|
||
<span className="inline-flex items-center gap-1 mt-2 text-amber-600 dark:text-amber-400 text-xs font-medium">
|
||
查看主页 →
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-12 pt-8 border-t border-stone-200 dark:border-stone-800">
|
||
<Link
|
||
href="/"
|
||
className="text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400"
|
||
>
|
||
← 返回首页
|
||
</Link>
|
||
</div>
|
||
</main>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|