git.iko.soy/urbit.org
on cb112e8 help sign in
urbit.org/components/EventPreview.js
33 lines 1.4 kB history raw
1import Link from "next/link";
3export default function EventPreview({ event, className, title }) {
4 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
5 const grayText = event.extra?.dark ? "text-midWhite" : "text-gray";
6 const blackText = event.extra?.dark ? "text-white" : "text-black";
8 return (
9 <div className={`cursor-pointer ${className}`}>
10 {title ? <h3 className="mb-2">{title}</h3> : null}
11 <div
12 key={event.slug}
13 className={`bg-wall rounded-xl h-96 bg-cover bg-center bg-no-repeat`}
14 style={{ backgroundImage: `url(${event.extra?.image})` || "" }}
15 >
16 <Link href={`/events/${event.slug}`}>
17 <div className="flex flex-col p-4 justify-between items-between h-full relative">
18 <div className="flex-grow-1 flex flex-col justify-center h-full">
19 <h4 className={`mb-4 ${blackText}`}>{event.title}</h4>
20 <p className={grayText}>{event?.type}</p>
21 </div>
22 <div className="absolute p-4 left-0 bottom-0 w-full">
23 <p className={`${grayText} type-ui-small`}>{event.extra.host}</p>
24 <p className={`${grayText} type-ui-small`}>
25 {event.extra.guests}
26 </p>
27 </div>
28 </div>
29 </Link>
30 </div>
31 </div>
32 );