This commit is contained in:
eric
2026-03-09 05:07:59 -05:00
parent 302a072036
commit eb852fb11d
27 changed files with 1523 additions and 169 deletions

View File

@@ -1,6 +1,7 @@
"use client";
import { useState, useMemo } from "react";
import { Link, useTranslation } from "@/i18n/navigation";
interface Attendee {
name: string;
@@ -80,6 +81,7 @@ function MeetupCard({ meetup }: { meetup: Meetup }) {
}
export default function MeetupsPage() {
const { t } = useTranslation("meetups");
const [activeTab, setActiveTab] = useState<"upcoming" | "previous">("upcoming");
const upcomingMeetups = useMemo(() => allMeetups.filter((m) => m.isUpcoming), []);
const previousMeetups = useMemo(() => allMeetups.filter((m) => !m.isUpcoming), []);
@@ -89,22 +91,31 @@ export default function MeetupsPage() {
return (
<div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
<main className="max-w-[1400px] mx-auto px-4 sm:px-6 md:px-10 py-8 sm:py-12">
<header className="mb-8">
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
<span className="w-1 h-8 bg-[#ff4d4f] rounded-full" />
线
</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm sm:text-base">
</p>
<header className="mb-8 flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div>
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
<span className="w-1 h-8 bg-[#ff4d4f] rounded-full" />
{t("title")}
</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm sm:text-base">
{t("subtitle")}
</p>
</div>
<Link
href="/meetups/host"
className="shrink-0 inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[#ff4d4f] text-white text-sm font-medium hover:bg-[#ff7a45] transition-colors"
>
<span>🎤</span>
{t("hostMeetup")}
</Link>
</header>
<div className="flex gap-1 p-1 bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 mb-8 inline-flex">
<button onClick={() => setActiveTab("upcoming")} className={`px-5 py-2.5 rounded-lg text-sm font-medium transition-all ${activeTab === "upcoming" ? "bg-[#ff4d4f] text-white shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800"}`}>
{t("upcoming")}
</button>
<button onClick={() => setActiveTab("previous")} className={`px-5 py-2.5 rounded-lg text-sm font-medium transition-all ${activeTab === "previous" ? "bg-[#ff4d4f] text-white shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800"}`}>
{t("previous")}
</button>
</div>