diff --git a/src/components/ambassador-grid.tsx b/src/components/ambassador-grid.tsx index e6304e7b8d..a89b2072bc 100644 --- a/src/components/ambassador-grid.tsx +++ b/src/components/ambassador-grid.tsx @@ -5,17 +5,67 @@ function buildRows(ambassador: Ambassador): InfoCardRow[] { return [ { type: "label", - label: ambassador.label, + label: ( + <> + {ambassador.label} + {ambassador.location ? ( + + {ambassador.location.flag} + + ) : null} + + ), }, { type: "image", imageUrl: ambassador.imageUrl, alt: ambassador.alt, }, - { - type: "label", - label: ambassador.organization, - }, + ...(ambassador.organizes + ? [ + { + type: "label" as const, + hideInConciseMode: true, + className: "bg-pri-lightest text-pri-darker dark:text-pri-darker", + label: ( +
+ {ambassador.organizes.map(event => ( + + {event.name} organizer + + ))} +
+ ), + }, + ] + : []), + ...(ambassador.askMeAbout + ? [ + { + type: "label" as const, + hideInConciseMode: true, + label: ( +
+ + Ask me about + + {ambassador.askMeAbout.join(", ")} +
+ ), + }, + ] + : []), { type: "label", hideInConciseMode: true, @@ -48,7 +98,7 @@ export function AmbassadorGrid({ concise?: boolean }) { return ( -
+
{ambassadors.map((ambassador, index) => ( +
{row.label}
) @@ -62,7 +68,7 @@ export function InfoCard({ rows, concise, className }: InfoCardProps) { return (