@@ -20,18 +20,16 @@ export default function EventPreview({ event, className, big }) {
2020 generateRealtimeDate(event.starts) > DateTime.now() && !inFuture;
2121
2222 return (
23− <div
24− className={`cursor-pointer aspect-w-4 aspect-h-5 md:aspect-w-5 md:aspect-h-4 ${className}`}
25− >
23+ <div className={`cursor-pointer h-full ${className}`}>
2624 <div
2725 key={event.slug}
28− className={`bg-wall-100 rounded-xl bg-cover bg-center bg-no-repeat `}
26+ className={`bg-wall-100 min-h-[320px] h-full flex flex-col rounded-xl bg-cover bg-center bg-no-repeat `}
2927 style={{ backgroundImage: `url(${event.image})` || "" }}
3028 >
3129 <Link href={`/events/${event.slug}`}>
3230 <div
3331 className={classNames(
34− "flex flex-col p-6 justify-between items-between h-full relative",
32+ "flex flex-col p-6 min-h-[320px] justify-between items-between h-full relative",
3533 {
3634 "backdrop-brightness-50 rounded-xl": Boolean(
3735 event?.darken_image
@@ -50,38 +48,40 @@ export default function EventPreview({ event, className, big }) {
5048 </p>
5149 </div>
5250
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>
61−
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>
51+ <div className="flex justify-between items-end">
52+ <div className="">
53+ <p className={`${blackText} type-sub mb-1`}>{event.location}</p>
54+ <DateRange
55+ starts={starts}
56+ ends={ends}
57+ className={`${grayText} type-sub`}
58+ />
8359 </div>
84− ) : null}
60+
61+ {inFuture && event.registration_url ? (
62+ <div>
63+ <a
64+ className="button-sm bg-green-400 text-white"
65+ href={event.registration_url}
66+ onClick={(e) => e.stopPropagation()}
67+ target="_blank"
68+ >
69+ RSVP
70+ </a>
71+ </div>
72+ ) : event.youtube ? (
73+ <div className="shrink-0">
74+ <a
75+ className="button-sm bg-wall-600 text-white shrink-0"
76+ href={`https://www.youtube.com/watch?v=${event.youtube}`}
77+ onClick={(e) => e.stopPropagation()}
78+ target="_blank"
79+ >
80+ ▶ Watch
81+ </a>
82+ </div>
83+ ) : null}
84+ </div>
8585 </div>
8686 </Link>
8787 </div>