git.iko.soy/urbit.org
on master help sign in
eventpreview: allow darkening bg images
e63c40fMatilde Park
components/EventPreview.js+11−15
compare with master
unifiedsplit
@@ -1,19 +1,8 @@
1import Link from "next/link";
1import Link from "next/link";
2import { DateTime } from "luxon";
2import { DateTime } from "luxon";
3−import {
4− ShowOrHide,
5− ReadableList,
6− Person,
7− Name,
8− DateRange,
9−} from "../components/Snippets";
3+import { DateRange } from "../components/Snippets";
10−import {
11− generateDisplayDate,
12− generateRealtimeDate,
4+import { generateDisplayDate, generateRealtimeDate } from "../lib/lib";
13− formatDate,
5+import classNames from "classnames";
14− formatTime,
15− formatTimeZone,
16−} from "../lib/lib";
17
6
18export default function EventPreview({ event, className, big }) {
7export default function EventPreview({ event, className, big }) {
19 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
8 // 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 }) {
39 >
28 >
40 <Link href={`/events/${event.slug}`}>
29 <Link href={`/events/${event.slug}`}>
41 <div
30 <div
31+ className={classNames(
42− className={`flex flex-col p-6 justify-between items-between h-full relative`}
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+ )}
43 >
39 >
44 <div
40 <div
45 className={`grow-1 flex ${
41 className={`grow-1 flex ${
lib/constants.js+1
@@ -23,6 +23,7 @@ export const eventKeys = [
23 "content",
23 "content",
24 "dark",
24 "dark",
25 "timezone",
25 "timezone",
26+ "darken_image",
26];
27];
27
28
28export const postKeys = [
29export const postKeys = [