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