@@ -10,60 +10,104 @@ import Section from "../components/Section";
1010import BackgroundImage from "../components/BackgroundImage";
1111import { getAllPosts, formatDate } from "../lib/lib";
1212
13−function assignEventCard(event) {
14− if (event.extra.youtube) {
15− return (
16− <img
17− src={`http://img.youtube.com/vi/${event.extra.youtube}/maxresdefault.jpg`}
18− className="w-full rounded-lg h-auto w-full"
19− />
20− );
21− }
22−
23− if (event.extra.image) {
24− return (
25− <BackgroundImage
26− src={event.extra.image}
27− style={{ height: "620px" }}
28− className="w-full rounded-lg"
29− />
30− );
31− }
13+// function assignEventCard(event) {
14+// if (event.extra.youtube) {
15+// return (
16+// <img
17+// src={`http://img.youtube.com/vi/${event.extra.youtube}/maxresdefault.jpg`}
18+// className="w-full rounded-lg h-auto w-full"
19+// />
20+// );
21+// }
22+//
23+// if (event.extra.image) {
24+// return (
25+// <BackgroundImage
26+// src={event.extra.image}
27+// style={{ height: "620px" }}
28+// className="w-full rounded-lg"
29+// />
30+// );
31+// }
32+//
33+// return (
34+// <div
35+// className="w-full rounded-lg bg-wall"
36+// style={{ height: "620px" }}
37+// ></div>
38+// );
39+// }
40+//
41+// function EventCard(props) {
42+// return (
43+// <div key={props.event.slug} className="mb-24 cursor-pointer">
44+// <Link href={`/events/${props.event.slug}`}>
45+// <div>
46+// {assignEventCard(props.event)}
47+// <h3 className="mt-4">{props.event.title}</h3>
48+// <div className="flex items-baseline">
49+// {props.event.extra.author ? (
50+// <div className="type-ui text-gray mt-4">
51+// {props.event.extra.author}
52+// </div>
53+// ) : null}
54+// {props.event.extra.author && post.extra.ship ? (
55+// <div className="mx-1 text-gray">•</div>
56+// ) : null}
57+// {props.event.extra.ship ? (
58+// <div className="type-ui text-gray font-mono">
59+// {props.event.extra.ship}
60+// </div>
61+// ) : null}
62+// </div>
63+//
64+// <div className="type-ui text-gray mt-2">
65+// {formatDate(new Date(props.event.date))} - {props.event.extra.time}
66+// </div>
67+// </div>
68+// </Link>
69+// </div>
70+// );
71+// }
3272
73+function EventCard({ event }) {
3374 return (
3475 <div
35− className="w-full rounded-lg bg-wall"
36− style={{ height: "620px" }}
37− ></div>
38− );
39−}
40−
41−function EventCard(props) {
42− return (
43− <div key={props.event.slug} className="mb-24 cursor-pointer">
44− <Link href={`/events/${props.event.slug}`}>
45− <div>
46− {assignEventCard(props.event)}
47− <h3 className="mt-4">{props.event.title}</h3>
48− <div className="flex items-baseline">
49− {props.event.extra.author ? (
50− <div className="type-ui text-gray mt-4">
51− {props.event.extra.author}
52− </div>
53− ) : null}
54− {props.event.extra.author && post.extra.ship ? (
55− <div className="mx-1 text-gray">•</div>
56− ) : null}
57− {props.event.extra.ship ? (
58− <div className="type-ui text-gray font-mono">
59− {props.event.extra.ship}
60− </div>
61− ) : null}
76+ key={event.slug}
77+ className="mb-24 cursor-pointer bg-wall rounded-xl tile-height"
78+ style={{ backgroundImage: event.extra?.image || "" }}
79+ >
80+ <Link href={`/events/${event.slug}`}>
81+ <div className="flex flex-col p-8 justify-between items-between h-full relative">
82+ <div className="flex-grow-1 flex flex-col justify-center h-full">
83+ <h3 className="mb-4">{event.title}</h3>
84+ <h4 className="mt-4 type-gray">{event?.type}</h4>
6285 </div>
63−
64− <div className="type-ui text-gray mt-2">
65− {formatDate(new Date(props.event.date))} - {props.event.extra.time}
86+ <div className="absolute left-8 bottom-8 w-full">
87+ <p className="text-gray">{event.extra.host}</p>
88+ <p className="text-gray">{event.extra.guests}</p>
6689 </div>
90+ {event.extra.youtube ? (
91+ <a
92+ onClick={(e) => e.stopPropagation()}
93+ className="absolute w-16 h-16 right-8 bottom-8 bg-white flex items-center justify-center rounded-full bg-cover bg-center bg-no-repeat"
94+ target="_blank"
95+ href={`https://www.youtube.com/watch?v=${event.extra.youtube}`}
96+ >
97+ <svg
98+ width="48"
99+ height="48"
100+ viewBox="0 0 16 16"
101+ fill="none"
102+ xmlns="http://www.w3.org/2000/svg"
103+ >
104+ <path
105+ d="M11.25 7.56699C11.5833 7.75944 11.5833 8.24056 11.25 8.43301L6.75 11.0311C6.41667 11.2235 6 10.983 6 10.5981L6 5.40192C6 5.01702 6.41667 4.77646 6.75 4.96891L11.25 7.56699Z"
106+ fill="black"
107+ />
108+ </svg>
109+ </a>
110+ ) : null}
67111 </div>
68112 </Link>
69113 </div>
@@ -73,11 +117,14 @@ function EventCard(props) {
73117export default function Events({ pastEvents, currentEvents, search }) {
74118 return (
75119 <Container>
120+ <Head>
121+ <title>Urbit • Events</title>
122+ </Head>
76123 <SingleColumn>
77124 <Header search={search} />
78125 <Section narrow>
79126 <div className="measure">
80− <h2 className="pb-16">Urbit Events</h2>
127+ <h1 className="pb-16">Events</h1>
81128 <p className="pb-6">
82129 Events of all kinds: In-person, Remote, and Recorded.
83130 </p>