git.iko.soy/urbit.org
on 8df1a18 help sign in
urbit.org/components/EventPreview.js
122 lines 4.2 kB history raw
1import Link from "next/link";
2import { DateTime } from "luxon";
3import {
4 ShowOrHide,
5 ReadableList,
6 Person,
7 DateRange,
8} from "../components/Snippets";
9import {
10 generateDisplayDate,
11 generateRealtimeDate,
12 formatDate,
13 formatTime,
14 formatTimeZone,
15} from "../lib/lib";
17export default function EventPreview({ event, className, big }) {
18 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
19 const grayText = event?.dark ? "text-washedWhite" : "text-wall-400";
20 const blackText = event?.dark ? "text-white" : "text-wall-600";
22 const starts = generateDisplayDate(event.starts, event.timezone);
23 const ends = generateDisplayDate(event.ends, event.timezone);
25 const inFuture = generateRealtimeDate(starts) > DateTime.now();
27 const happeningNow =
28 generateRealtimeDate(event.starts) > DateTime.now() && !inFuture;
30 return (
31 <div
32 className={`cursor-pointer aspect-w-4 aspect-h-5 md:aspect-w-5 md:aspect-h-4 ${className}`}
33 >
34 <div
35 key={event.slug}
36 className={`bg-wall-100 rounded-xl bg-cover bg-center bg-no-repeat `}
37 style={{ backgroundImage: `url(${event.image})` || "" }}
38 >
39 <Link href={`/events/${event.slug}`}>
40 <div
41 className={`flex flex-col p-6 justify-between items-between h-full relative`}
42 >
43 <div
44 className={`flex-grow-1 flex ${
45 big ? "justify-center" : ""
46 } flex-col h-full`}
47 >
48 <h3 className={`${blackText} mb-2`}>{event.title}</h3>
49 <p className={`${blackText} mb-2`}>{event.location}</p>
50 <DateRange
51 starts={starts}
52 ends={ends}
53 className={`${grayText} type-sub`}
54 />
55 </div>
57 <div className="absolute p-6 left-0 bottom-0 w-full pr-32">
58 <ShowOrHide condition={event.hosts}>
59 <p className={blackText + " type-sub"}>
60 <b>{"Hosted by "}</b>
61 <ReadableList>
62 {event.hosts?.map((host, index) => (
63 <Person
64 key={`${host.name}-${host.patp}`}
65 nameClassNames={blackText}
66 patpClassNames={blackText}
67 name={host.name}
68 patp={host.patp}
69 />
70 ))}
71 </ReadableList>
72 </p>
73 </ShowOrHide>
74 <ShowOrHide condition={event.guests}>
75 <p className={blackText + " type-sub"}>
76 <b>
77 {event.guests?.length > 1 ? "With guests " : "With guest "}
78 </b>
79 <ReadableList>
80 {event.guests?.map((guest, index) => (
81 <Person
82 key={`${guest.name}-${guest.patp}`}
83 nameClassNames={blackText}
84 patpClassNames={blackText}
85 name={guest.name}
86 patp={guest.patp}
87 />
88 ))}
89 </ReadableList>
90 </p>
91 </ShowOrHide>
92 </div>
94 {inFuture && event.registration_url ? (
95 <div className="absolute right-0 bottom-0 p-6">
96 <a
97 className="button-sm bg-green-400 text-white"
98 href={event.registration_url}
99 onClick={(e) => e.stopPropagation()}
100 target="_blank"
101 >
102 RSVP
103 </a>
104 </div>
105 ) : event.youtube ? (
106 <div className="absolute right-0 bottom-0 p-6">
107 <a
108 className="button-sm bg-wall-600 text-white"
109 href={`https://www.youtube.com/watch?v=${event.youtube}`}
110 onClick={(e) => e.stopPropagation()}
111 target="_blank"
112 >
113 ▶ Watch
114 </a>
115 </div>
116 ) : null}
117 </div>
118 </Link>
119 </div>
120 </div>
121 );