@@ -10,87 +10,31 @@ import Section from "../components/Section";
1010import BackgroundImage from "../components/BackgroundImage";
1111import { getAllPosts, formatDate } from "../lib/lib";
1212
13−// function assignEventCard(event) {
14−// if (event.extra.youtube) {
15−// return (
16−// <img
17−// src={`http://img.youtube.com/vi/${event.extra.youtube}/maxresdefault.jpg`}
18−// className="w-full rounded-lg h-auto w-full"
19−// />
20−// );
21−// }
22−//
23−// if (event.extra.image) {
24−// return (
25−// <BackgroundImage
26−// src={event.extra.image}
27−// style={{ height: "620px" }}
28−// className="w-full rounded-lg"
29−// />
30−// );
31−// }
32−//
33−// return (
34−// <div
35−// className="w-full rounded-lg bg-wall"
36−// style={{ height: "620px" }}
37−// ></div>
38−// );
39−// }
40−//
41−// function EventCard(props) {
42−// return (
43−// <div key={props.event.slug} className="mb-24 cursor-pointer">
44−// <Link href={`/events/${props.event.slug}`}>
45−// <div>
46−// {assignEventCard(props.event)}
47−// <h3 className="mt-4">{props.event.title}</h3>
48−// <div className="flex items-baseline">
49−// {props.event.extra.author ? (
50−// <div className="type-ui text-gray mt-4">
51−// {props.event.extra.author}
52−// </div>
53−// ) : null}
54−// {props.event.extra.author && post.extra.ship ? (
55−// <div className="mx-1 text-gray">•</div>
56−// ) : null}
57−// {props.event.extra.ship ? (
58−// <div className="type-ui text-gray font-mono">
59−// {props.event.extra.ship}
60−// </div>
61−// ) : null}
62−// </div>
63−//
64−// <div className="type-ui text-gray mt-2">
65−// {formatDate(new Date(props.event.date))} - {props.event.extra.time}
66−// </div>
67−// </div>
68−// </Link>
69−// </div>
70−// );
71−// }
72−
7313function EventCard({ event }) {
14+ // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
15+ const grayText = event.extra?.dark ? "text-midWhite" : "text-gray";
16+ const blackText = event.extra?.dark ? "text-white" : "text-black";
17+
7418 return (
7519 <div
7620 key={event.slug}
77− className="mb-24 cursor-pointer bg-wall rounded-xl tile-height"
78− style={{ backgroundImage: event.extra?.image || "" }}
21+ className="mb-24 cursor-pointer bg-wall rounded-xl tile-height bg-cover bg-center bg-no-repeat"
22+ style={{ backgroundImage: `url(${event.extra?.image})` || "" }}
7923 >
8024 <Link href={`/events/${event.slug}`}>
8125 <div className="flex flex-col p-8 justify-between items-between h-full relative">
8226 <div className="flex-grow-1 flex flex-col justify-center h-full">
83− <h3 className="mb-4">{event.title}</h3>
84− <h4 className="mt-4 type-gray">{event?.type}</h4>
27+ <h3 className={`mb-4 ${blackText}`}>{event.title}</h3>
28+ <h4 className={grayText}>{event?.type}</h4>
8529 </div>
8630 <div className="absolute left-8 bottom-8 w-full">
87− <p className="text-gray">{event.extra.host}</p>
88− <p className="text-gray">{event.extra.guests}</p>
31+ <p className={grayText}>{event.extra.host}</p>
32+ <p className={grayText}>{event.extra.guests}</p>
8933 </div>
9034 {event.extra.youtube ? (
9135 <a
9236 onClick={(e) => e.stopPropagation()}
93− className="absolute w-16 h-16 right-8 bottom-8 bg-white flex items-center justify-center rounded-full bg-cover bg-center bg-no-repeat"
37+ className="absolute w-16 h-16 right-8 bottom-8 bg-white flex items-center justify-center rounded-full"
9438 target="_blank"
9539 href={`https://www.youtube.com/watch?v=${event.extra.youtube}`}
9640 >