@@ -1,17 +1,17 @@
1import Link from "next/link";
1import Link from "next/link";
3−export default function EventPreview({ event, className, title, rsvp }) {
3+export default function EventPreview({ event, className, rsvp }) {
4 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
4 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
5 const grayText = event.extra?.dark ? "text-midWhite" : "text-gray";
5 const grayText = event.extra?.dark ? "text-midWhite" : "text-gray";
6 const blackText = event.extra?.dark ? "text-white" : "text-black";
6 const blackText = event.extra?.dark ? "text-white" : "text-black";
9 <div className={`cursor-pointer ${className}`}>
9 <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}
12 key={event.slug}
12 key={event.slug}
13 className={`bg-wall rounded-xl h-96 bg-cover bg-center bg-no-repeat`}
13 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})` || "" }}
16 <Link href={`/events/${event.slug}`}>
16 <Link href={`/events/${event.slug}`}>
17 <div className="flex flex-col p-4 justify-between items-between h-full relative">
17 <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 }) {
20 <p className={grayText}>{event?.type}</p>
20 <p className={grayText}>{event?.type}</p>
22 <div className="absolute p-4 left-0 bottom-0 w-full">
22 <div className="absolute p-4 left-0 bottom-0 w-full">
23+ {event.hosts?.map((host) => (
23− <p className={`${grayText} type-ui-small`}>{event.extra.host}</p>
24+ <p className={`${grayText} type-ui-small`}>{host}</p>
24− <p className={`${grayText} type-ui-small`}>
25+ ))}
25− {event.extra.guests}
27+ {event.guests?.map((guest) => (
26− </p>
28+ <p className={`${grayText} type-ui-small`}>{guest}</p>
28− {rsvp && event.extra.registration_url && event.extra.pinned ? (
31+ {rsvp && event.registration_url ? (
29 <div className="absolute right-0 bottom-0 p-4">
32 <div className="absolute right-0 bottom-0 p-4">
31 className="button-sm bg-green text-white"
34 className="button-sm bg-green text-white"
32− href={event.extra.registration_url}
35+ href={event.registration_url}