git.iko.soy/urbit.org
on master help sign in
EventPreview: rewrite in flexbox
bd4e442Matilde Park
components/EventPreview.js+36−36
compare with master
unifiedsplit
@@ -20,18 +20,16 @@ export default function EventPreview({ event, className, big }) {
20 generateRealtimeDate(event.starts) > DateTime.now() && !inFuture;
20 generateRealtimeDate(event.starts) > DateTime.now() && !inFuture;
21
21
22 return (
22 return (
23− <div
24− className={`cursor-pointer aspect-w-4 aspect-h-5 md:aspect-w-5 md:aspect-h-4 ${className}`}
23+ <div className={`cursor-pointer h-full ${className}`}>
25− >
26 <div
24 <div
27 key={event.slug}
25 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 `}
29 style={{ backgroundImage: `url(${event.image})` || "" }}
27 style={{ backgroundImage: `url(${event.image})` || "" }}
30 >
28 >
31 <Link href={`/events/${event.slug}`}>
29 <Link href={`/events/${event.slug}`}>
32 <div
30 <div
33 className={classNames(
31 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",
35 {
33 {
36 "backdrop-brightness-50 rounded-xl": Boolean(
34 "backdrop-brightness-50 rounded-xl": Boolean(
37 event?.darken_image
35 event?.darken_image
@@ -50,38 +48,40 @@ export default function EventPreview({ event, className, big }) {
50 </p>
48 </p>
51 </div>
49 </div>
52
50
53− <div className="absolute p-6 left-0 bottom-0 w-full pr-32">
51+ <div className="flex justify-between items-end">
52+ <div className="">
54− <p className={`${blackText} type-sub mb-1`}>{event.location}</p>
53+ <p className={`${blackText} type-sub mb-1`}>{event.location}</p>
55− <DateRange
54+ <DateRange
56− starts={starts}
55+ starts={starts}
57− ends={ends}
56+ ends={ends}
58− className={`${grayText} type-sub`}
57+ className={`${grayText} type-sub`}
59− />
58+ />
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>
83 </div>
59 </div>
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>
84− ) : null}
83+ ) : null}
84+ </div>
85 </div>
85 </div>
86 </Link>
86 </Link>
87 </div>
87 </div>