git.iko.soy/urbit.org
on d5010ea help sign in
urbit.org/components/EventPreview.js
90 lines 3.2 kB history raw
1import Link from "next/link";
2import { DateTime } from "luxon";
3import { DateRange } from "../components/Snippets";
4import { generateDisplayDate, generateRealtimeDate } from "../lib/lib";
5import classNames from "classnames";
7export default function EventPreview({ event, className, big }) {
8 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
9 const grayText = event?.dark ? "text-white dark:text-black" : "text-wall-400";
10 const blackText = event?.dark
11 ? "text-white dark:text-black"
12 : "text-wall-600";
14 const starts = generateDisplayDate(event.starts, event.timezone);
15 const ends = generateDisplayDate(event.ends, event.timezone);
17 const inFuture = generateRealtimeDate(starts) > DateTime.now();
19 const happeningNow =
20 generateRealtimeDate(event.starts) > DateTime.now() && !inFuture;
22 return (
23 <div
24 className={`cursor-pointer aspect-w-4 aspect-h-5 md:aspect-w-5 md:aspect-h-4 ${className}`}
25 >
26 <div
27 key={event.slug}
28 className={`bg-wall-100 rounded-xl bg-cover bg-center bg-no-repeat `}
29 style={{ backgroundImage: `url(${event.image})` || "" }}
30 >
31 <Link href={`/events/${event.slug}`}>
32 <div
33 className={classNames(
34 "flex flex-col p-6 justify-between items-between h-full relative",
35 {
36 "backdrop-brightness-50 rounded-xl": Boolean(
37 event?.darken_image
38 ),
39 }
40 )}
41 >
42 <div
43 className={`grow-1 flex ${
44 big ? "justify-center" : ""
45 } flex-col h-full`}
46 >
47 <h3 className={`${blackText} mb-2`}>{event.title}</h3>
48 <p className={blackText + " truncate text-sm"}>
49 {event.description}
50 </p>
51 </div>
53 <div className="absolute p-6 left-0 bottom-0 w-full pr-32">
54 <p className={`${blackText} type-sub mb-1`}>{event.location}</p>
55 <DateRange
56 starts={starts}
57 ends={ends}
58 className={`${grayText} type-sub`}
59 />
60 </div>
62 {inFuture && event.registration_url ? (
63 <div className="absolute right-0 bottom-0 p-6">
64 <a
65 className="button-sm bg-green-400 text-white"
66 href={event.registration_url}
67 onClick={(e) => e.stopPropagation()}
68 target="_blank"
69 >
70 RSVP
71 </a>
72 </div>
73 ) : event.youtube ? (
74 <div className="absolute right-0 bottom-0 p-6">
75 <a
76 className="button-sm bg-wall-600 text-white"
77 href={`https://www.youtube.com/watch?v=${event.youtube}`}
78 onClick={(e) => e.stopPropagation()}
79 target="_blank"
80 >
81 ▶ Watch
82 </a>
83 </div>
84 ) : null}
85 </div>
86 </Link>
87 </div>
88 </div>
89 );