a tool for shared writing and social publishing
leaflet.pub
1"use client";
2import { useRSVPData } from "components/PageSWRDataProvider";
3import { ButtonTertiary } from "components/Buttons";
4import { Popover } from "components/Popover";
5
6export function Attendees(props: { entityID: string; className?: string }) {
7 let { data } = useRSVPData();
8 let attendees =
9 data?.rsvps?.filter((rsvp) => rsvp.entity === props.entityID) || [];
10 let going = attendees.filter((rsvp) => rsvp.status === "GOING");
11 let maybe = attendees.filter((rsvp) => rsvp.status === "MAYBE");
12 let notGoing = attendees.filter((rsvp) => rsvp.status === "NOT_GOING");
13
14 return (
15 <Popover
16 align="start"
17 className="text-sm text-secondary flex flex-col gap-2 max-w-sm"
18 asChild
19 trigger={
20 going.length === 0 && maybe.length === 0 ? (
21 <button
22 className={`text-sm font-normal w-max text-tertiary italic hover:underline ${props.className}`}
23 >
24 No RSVPs yet
25 </button>
26 ) : (
27 <ButtonTertiary className={`text-sm font-normal ${props.className}`}>
28 {going.length > 0 &&
29 `${going.reduce((acc, g) => acc + 1 + g.plus_ones, 0)} Going`}
30 {maybe.length > 0 &&
31 `${going.length > 0 ? ", " : ""}${maybe.reduce((acc, m) => acc + 1 + m.plus_ones, 0)} Maybe`}
32 </ButtonTertiary>
33 )
34 }
35 >
36 {going.length === 0 && maybe.length === 0 && notGoing.length === 0 && (
37 <div className="text-tertiary italic">No RSVPs yet</div>
38 )}
39 <AttendeeStatusList rsvps={going} title="Going" />
40 <AttendeeStatusList rsvps={maybe} title="Maybe" />
41 <AttendeeStatusList rsvps={notGoing} title="Can't Go" />
42 </Popover>
43 );
44}
45
46function AttendeeStatusList(props: {
47 rsvps: Array<{
48 name: string;
49 phone_number?: string;
50 plus_ones: number;
51 status: string;
52 }>;
53 title: string;
54}) {
55 if (props.rsvps.length === 0) return null;
56 return (
57 <div className="flex flex-col gap-0.5">
58 <div className="font-bold text-tertiary">
59 {props.title} ({props.rsvps.length})
60 </div>
61 {props.rsvps.map((rsvp) => (
62 <div key={rsvp.phone_number}>
63 {rsvp.name} {rsvp.plus_ones > 0 ? `+${rsvp.plus_ones}` : ""}
64 </div>
65 ))}
66 </div>
67 );
68}