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