Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.3 kB · 68 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869"use client";import { useRSVPData } from "components/PageSWRDataProvider";import { ButtonTertiary } from "components/Buttons";import { Popover } from "components/Popover";
export function Attendees(props: { entityID: string; className?: string }) { let { data } = useRSVPData(); let attendees = data?.rsvps?.filter((rsvp) => rsvp.entity === props.entityID) || []; let going = attendees.filter((rsvp) => rsvp.status === "GOING"); let maybe = attendees.filter((rsvp) => rsvp.status === "MAYBE"); let notGoing = attendees.filter((rsvp) => rsvp.status === "NOT_GOING");
return ( <Popover align="start" className="text-sm text-secondary flex flex-col gap-2 max-w-sm" asChild trigger={ going.length === 0 && maybe.length === 0 ? ( <button className={`text-sm font-normal w-max text-tertiary italic hover:underline ${props.className}`} > No RSVPs yet </button> ) : ( <ButtonTertiary className={`text-sm font-normal ${props.className}`}> {going.length > 0 && `${going.reduce((acc, g) => acc + 1 + g.plus_ones, 0)} Going`} {maybe.length > 0 && `${going.length > 0 ? ", " : ""}${maybe.reduce((acc, m) => acc + 1 + m.plus_ones, 0)} Maybe`} </ButtonTertiary> ) } > {going.length === 0 && maybe.length === 0 && notGoing.length === 0 && ( <div className="text-tertiary italic">No RSVPs yet</div> )} <AttendeeStatusList rsvps={going} title="Going" /> <AttendeeStatusList rsvps={maybe} title="Maybe" /> <AttendeeStatusList rsvps={notGoing} title="Can't Go" /> </Popover> );}
function AttendeeStatusList(props: { rsvps: Array<{ name: string; phone_number?: string; plus_ones: number; status: string; }>; title: string;}) { if (props.rsvps.length === 0) return null; return ( <div className="flex flex-col gap-0.5"> <div className="font-bold text-tertiary"> {props.title} ({props.rsvps.length}) </div> {props.rsvps.map((rsvp) => ( <div key={rsvp.phone_number}> {rsvp.name} {rsvp.plus_ones > 0 ? `+${rsvp.plus_ones}` : ""} </div> ))} </div> );}