@@ -1,17 +1,17 @@
11import Link from "next/link";
22
3−export default function EventPreview({ event, className, title, rsvp }) {
3+export default function EventPreview({ event, className, rsvp }) {
44 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
55 const grayText = event.extra?.dark ? "text-midWhite" : "text-gray";
66 const blackText = event.extra?.dark ? "text-white" : "text-black";
77
88 return (
99 <div className={`cursor-pointer ${className}`}>
10− {title ? <h3 className="mb-2">{title}</h3> : null}
10+ {event.title ? <h3 className="mb-2">{event.title}</h3> : null}
1111 <div
1212 key={event.slug}
1313 className={`bg-wall rounded-xl h-96 bg-cover bg-center bg-no-repeat`}
14− style={{ backgroundImage: `url(${event.extra?.image})` || "" }}
14+ style={{ backgroundImage: `url(${event?.image})` || "" }}
1515 >
1616 <Link href={`/events/${event.slug}`}>
1717 <div className="flex flex-col p-4 justify-between items-between h-full relative">
@@ -20,16 +20,19 @@ export default function EventPreview({ event, className, title, rsvp }) {
2020 <p className={grayText}>{event?.type}</p>
2121 </div>
2222 <div className="absolute p-4 left-0 bottom-0 w-full">
23− <p className={`${grayText} type-ui-small`}>{event.extra.host}</p>
24− <p className={`${grayText} type-ui-small`}>
25− {event.extra.guests}
26− </p>
23+ {event.hosts?.map((host) => (
24+ <p className={`${grayText} type-ui-small`}>{host}</p>
25+ ))}
26+
27+ {event.guests?.map((guest) => (
28+ <p className={`${grayText} type-ui-small`}>{guest}</p>
29+ ))}
2730 </div>
28− {rsvp && event.extra.registration_url && event.extra.pinned ? (
31+ {rsvp && event.registration_url ? (
2932 <div className="absolute right-0 bottom-0 p-4">
3033 <a
3134 className="button-sm bg-green text-white"
32− href={event.extra.registration_url}
35+ href={event.registration_url}
3336 >
3437 RSVP
3538 </a>