's'

app/components/meetups/EventLiveRoom.tsx

@@ -7,6 +7,7 @@ import {
   WEB_CHAT_PROVIDER_LABEL,
   type MeetupSession,
 } from "@/app/lib/meetups";
+import MeetupSocialPanel from "@/app/components/meetups/MeetupSocialPanel";
 
 interface EventLiveRoomProps {
   locale: string;
@@ -198,6 +199,12 @@ export default function EventLiveRoom({ locale, meetup, session, formattedDate }
           </section>
         ) : null}
       </main>
+
+      <footer className="border-t border-white/10 bg-[#111827] px-4 py-5 sm:px-6">
+        <div className="mx-auto max-w-[1600px]">
+          <MeetupSocialPanel meetupId={meetup.id} city={meetup.city} locale={locale} />
+        </div>
+      </footer>
     </div>
   );
 }

app/components/meetups/MeetupSocialPanel.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
+import SocialGreetButton from "@/app/components/SocialGreetButton";
+import { mediaUrl } from "@/app/lib/media";
+import { fetchMeetupSocialSuggestions, type PublicProfile } from "@/app/lib/social";
+
+interface MeetupSocialPanelProps {
+  meetupId: string;
+  city: string;
+  locale?: string;
+  compact?: boolean;
+}
+
+export default function MeetupSocialPanel({
+  meetupId,
+  city,
+  locale = "zh",
+  compact = false,
+}: MeetupSocialPanelProps) {
+  const [members, setMembers] = useState<PublicProfile[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!meetupId) return;
+    fetchMeetupSocialSuggestions(meetupId)
+      .then((data) => setMembers(data.items || []))
+      .catch(() => setMembers([]))
+      .finally(() => setLoading(false));
+  }, [meetupId]);
+
+  if (loading) {
+    return (
+      <div className={`rounded-2xl border border-gray-100 bg-white p-4 dark:border-gray-800 dark:bg-gray-900 ${compact ? "" : "mt-6"}`}>
+        <div className="h-20 animate-pulse rounded-xl bg-gray-100 dark:bg-gray-800" />
+      </div>
+    );
+  }
+
+  if (!members.length) return null;
+
+  return (
+    <section className={`rounded-2xl border border-violet-100 bg-violet-50/60 p-4 dark:border-violet-900/40 dark:bg-violet-950/20 ${compact ? "" : "mt-6"}`}>
+      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <div>
+          <h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">
+            {locale === "zh" ? "活动后继续聊" : "Keep connecting"}
+          </h3>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            {locale === "zh" ? `同城 ${city} 成员，优先展示一起报名的伙伴` : `Members in ${city}, RSVP attendees first`}
+          </p>
+        </div>
+        <Link
+          href={`/dating?intent=friends&city=${encodeURIComponent(city)}`}
+          className="rounded-full bg-[#ff4d4f] px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-500"
+        >
+          {locale === "zh" ? "去匹配" : "Go matching"}
+        </Link>
+      </div>
+      <div className="grid gap-3 sm:grid-cols-2">
+        {members.slice(0, compact ? 4 : 6).map((member) => (
+          <article
+            key={member.id}
+            className="flex items-center gap-3 rounded-xl border border-white/80 bg-white p-3 shadow-sm dark:border-gray-800 dark:bg-gray-900"
+          >
+            <Link href={`/members/${member.id}`}>
+              <img
+                src={mediaUrl(member.photo)}
+                alt={member.name || "member"}
+                className="h-11 w-11 rounded-full object-cover"
+              />
+            </Link>
+            <div className="min-w-0 flex-1">
+              <Link href={`/members/${member.id}`} className="truncate text-sm font-semibold text-gray-900 hover:text-[#ff4d4f] dark:text-gray-100">
+                {member.name}
+              </Link>
+              <p className="truncate text-xs text-gray-500 dark:text-gray-400">{member.location}</p>
+              {"rsvpAttendee" in member && (member as PublicProfile & { rsvpAttendee?: boolean }).rsvpAttendee ? (
+                <span className="mt-1 inline-flex rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300">
+                  {locale === "zh" ? "同场报名" : "RSVP"}
+                </span>
+              ) : null}
+            </div>
+            <SocialGreetButton
+              profileId={member.id}
+              label={locale === "zh" ? "聊" : "Hi"}
+              className="rounded-full bg-[#ff4d4f] px-2.5 py-1 text-[11px] font-semibold text-white hover:bg-red-500"
+            />
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}