@@ -6,6 +6,7 @@ import {
66 generateRealtimeDate,
77 formatDate,
88 formatTime,
9+ formatTimeZone,
910} from "../lib/lib";
1011
1112export default function EventPreview({ event, className, big }) {
@@ -13,12 +14,13 @@ export default function EventPreview({ event, className, big }) {
1314 const grayText = event?.dark ? "text-midWhite" : "text-wall-400";
1415 const blackText = event?.dark ? "text-white" : "text-wall-600";
1516
16− const starts = generateDisplayDate(event.date);
17− const ends = generateDisplayDate(event.ends);
17+ const starts = generateDisplayDate(event.date, event.timezone);
18+ const ends = generateDisplayDate(event.ends, event.timezone);
19+
20+ const inFuture = generateRealtimeDate(starts) > DateTime.now();
1821
19− const hasEnded = generateRealtimeDate(event.ends) > DateTime.now();
2022 const happeningNow =
21− generateRealtimeDate(event.date) > DateTime.now() && !hasEnded;
23+ generateRealtimeDate(event.date) > DateTime.now() && !inFuture;
2224
2325 return (
2426 <div className={`cursor-pointer aspect-w-5 aspect-h-4 ${className}`}>
@@ -43,46 +45,51 @@ export default function EventPreview({ event, className, big }) {
4345 {typeof event.ends !== "undefined"
4446 ? ` to ${formatTime(ends)}`
4547 : null}
48+ {" " + formatTimeZone(starts)}
4649 </p>
4750 </div>
4851
49− <div className="absolute p-4 left-0 bottom-0 w-full">
52+ <div className="absolute p-6 left-0 bottom-0 w-full pr-32">
5053 <ShowOrHide condition={event.hosts}>
51− <p className={`type-sub-bold ${blackText}`}>
52− {event.hosts
53− ? event.hosts.length > 1
54− ? "Hosts"
55− : "Host"
56− : null}
54+ <p className={blackText + " type-sub"}>
55+ <b>{"Hosted by "}</b>
56+ <ReadableList>
57+ {event.hosts?.map((host, index) => {
58+ return (
59+ <Person
60+ key={`${host.name}-${host.patp}`}
61+ nameClassNames={blackText}
62+ patpClassNames={blackText}
63+ name={host.name}
64+ patp={host.patp}
65+ />
66+ );
67+ })}
68+ </ReadableList>
5769 </p>
5870 </ShowOrHide>
59− <ShowOrHide condition={event.hosts}>
60− <ReadableList>
61− {event.hosts?.map((host, index) => (
62− <Person person={host} />
63− ))}
64− </ReadableList>
65− </ShowOrHide>
6671 <ShowOrHide condition={event.guests}>
67− <p className={`type-sub-bold pt-2 ${blackText}`}>
68− {event.guests
69− ? event.guests.length > 1
70− ? "With guests"
71− : "With guest"
72− : null}
72+ <p className={blackText + " type-sub"}>
73+ <b>
74+ {event.guests?.length > 1 ? "With guests " : "With guest "}
75+ </b>
76+ <ReadableList>
77+ {event.guests?.map((guest, index) => (
78+ <Person
79+ key={`${guest.name}-${guest.patp}`}
80+ nameClassNames={blackText}
81+ patpClassNames={blackText}
82+ name={guest.name}
83+ patp={guest.patp}
84+ />
85+ ))}
86+ </ReadableList>
7387 </p>
7488 </ShowOrHide>
75− <ShowOrHide condition={event.guests}>
76− <ReadableList>
77− {event.guests?.map((guest, index) => (
78− <Person person={guest} />
79− ))}
80− </ReadableList>
81− </ShowOrHide>
8289 </div>
8390
84− {hasEnded && event.registration_url ? (
85− <div className="absolute right-0 bottom-0 p-4">
91+ {inFuture && event.registration_url ? (
92+ <div className="absolute right-0 bottom-0 p-6">
8693 <a
8794 className="button-sm bg-green-400 text-white"
8895 href={event.registration_url}
@@ -93,7 +100,7 @@ export default function EventPreview({ event, className, big }) {
93100 </a>
94101 </div>
95102 ) : event.youtube ? (
96− <div className="absolute right-0 bottom-0 p-4">
103+ <div className="absolute right-0 bottom-0 p-6">
97104 <a
98105 className="button-sm bg-wall-600 text-white"
99106 href={`https://www.youtube.com/watch?v=${event.youtube}`}