@@ -1,19 +1,8 @@
11import Link from "next/link";
22import { DateTime } from "luxon";
3−import {
4− ShowOrHide,
5− ReadableList,
6− Person,
7− Name,
8− DateRange,
9−} from "../components/Snippets";
10−import {
11− generateDisplayDate,
12− generateRealtimeDate,
13− formatDate,
14− formatTime,
15− formatTimeZone,
16−} from "../lib/lib";
3+import { DateRange } from "../components/Snippets";
4+import { generateDisplayDate, generateRealtimeDate } from "../lib/lib";
5+import classNames from "classnames";
176
187export default function EventPreview({ event, className, big }) {
198 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
@@ -39,7 +28,14 @@ export default function EventPreview({ event, className, big }) {
3928 >
4029 <Link href={`/events/${event.slug}`}>
4130 <div
42− className={`flex flex-col p-6 justify-between items-between h-full relative`}
31+ className={classNames(
32+ "flex flex-col p-6 justify-between items-between h-full relative",
33+ {
34+ "backdrop-brightness-50 rounded-xl": Boolean(
35+ event?.darken_image
36+ ),
37+ }
38+ )}
4339 >
4440 <div
4541 className={`grow-1 flex ${