96 lines
3.7 KiB
TypeScript
96 lines
3.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|