@@ -1,23 +1,24 @@
11import Head from "next/head";
2−import Link from "next/link";
2+import cn from "classnames";
33import { DateTime } from "luxon";
4−
4+import { useState } from "react";
55import Meta from "../components/Meta";
66import {
77 Container,
88 SingleColumn,
99 Section,
1010 IntraNav,
11+ TwoUp,
1112} from "@urbit/foundation-design-system";
1213import Footer from "../components/Footer";
1314import Header from "../components/Header";
1415import EventPreview from "../components/EventPreview";
15−import { contact } from "../lib/constants";
16−import { getAllEvents, generateRealtimeDate } from "../lib/lib";
16+import { getAllEvents, generateRealtimeDate, pair } from "../lib/lib";
1717
1818import { eventKeys } from "../lib/constants";
1919
2020export default function Events({ events, search }) {
21+ const [selected, setSelected] = useState("All");
2122 const post = {
2223 title: "Events",
2324 description: "In-person, remote, and recorded events about Urbit.",
@@ -25,32 +26,63 @@ export default function Events({ events, search }) {
2526
2627 const now = DateTime.now();
2728
28− const pastEvents = events.filter((event) => {
29− const ends = generateRealtimeDate(event.ends);
30− return ends < now;
31− });
29+ const selectionFilter = (event) => {
30+ if (selected === "All") {
31+ return true;
32+ } else if (selected === "In-person") {
33+ return event.location !== "Online Event";
34+ } else if (selected === "Online") {
35+ return event.location === "Online Event";
36+ }
37+ };
38+
39+ const pastEvents = pair(
40+ events.filter(selectionFilter).filter((event) => {
41+ const ends = generateRealtimeDate(event.ends);
42+ return ends < now;
43+ })
44+ );
3245
33− const futureEvents = events
34− .filter((event) => {
46+ const futureEvents = pair(
47+ events
48+ .filter(selectionFilter)
49+ .filter((event) => {
50+ const starts = generateRealtimeDate(event.starts);
51+ return starts > now;
52+ })
53+ .sort((a, b) => {
54+ const aStarts = generateRealtimeDate(a.starts).ts;
55+ const bStarts = generateRealtimeDate(b.starts).ts;
56+ if (aStarts > bStarts) {
57+ return 1;
58+ } else if (aStarts === bStarts) {
59+ return 0;
60+ }
61+ return -1;
62+ })
63+ );
64+
65+ const happeningNow = pair(
66+ events.filter(selectionFilter).filter((event) => {
3567 const starts = generateRealtimeDate(event.starts);
36− return starts > now;
68+ const ends = generateRealtimeDate(event.ends);
69+ return starts < DateTime.now() && ends > now;
3770 })
38− .sort((a, b) => {
39− const aStarts = generateRealtimeDate(a.starts).ts;
40− const bStarts = generateRealtimeDate(b.starts).ts;
41− if (aStarts > bStarts) {
42− return 1;
43− } else if (aStarts === bStarts) {
44− return 0;
45− }
46− return -1;
47− });
71+ );
4872
49− const happeningNow = events.filter((event) => {
50− const starts = generateRealtimeDate(event.starts);
51− const ends = generateRealtimeDate(event.ends);
52− return starts < DateTime.now() && ends > now;
53− });
73+ const SelectedButton = ({ selection, text }) => {
74+ return (
75+ <a
76+ className={cn("badge-lg w-fit cursor-pointer type-ui", {
77+ "bg-wall-600 text-white": selected === selection,
78+ "bg-wall-100 text-wall-500": selected !== selection,
79+ })}
80+ onClick={() => setSelected(selection)}
81+ >
82+ {text}
83+ </a>
84+ );
85+ };
5486
5587 return (
5688 <Container>
@@ -64,13 +96,11 @@ export default function Events({ events, search }) {
6496 <Section narrow>
6597 <div className="measure">
6698 <h1 className="pb-16">Events</h1>
67− <p className="pb-6">
68− Events of all kinds: In-person, Remote, and Recorded.
69− </p>
70− <p>
71− <a href={contact.newsletter}>Subscribe</a> to the Urbit Newsletter
72− for regular updates, including new blog posts and events.
73− </p>
99+ <div className="flex space-x-2">
100+ <SelectedButton selection="All" text="All Events" />
101+ <SelectedButton selection="In-person" text="In-person" />
102+ <SelectedButton selection="Online" text="Online" />
103+ </div>
74104 </div>
75105 </Section>
76106
@@ -80,8 +110,14 @@ export default function Events({ events, search }) {
80110 <div className="mb-8 mt-16 table">
81111 <h3 className="text-green-400">Happening Now</h3>
82112 </div>
83− {happeningNow.map((post) => {
84− return <EventPreview big event={post} className="mb-8" />;
113+ {happeningNow.map((group) => {
114+ return (
115+ <TwoUp>
116+ {group.map((post) => (
117+ <EventPreview big event={post} className="mb-8" />
118+ ))}
119+ </TwoUp>
120+ );
85121 })}
86122 </>
87123 ) : null}
@@ -90,8 +126,14 @@ export default function Events({ events, search }) {
90126 <div className="mb-8 mt-16 table">
91127 <h3 className="">Coming Soon</h3>
92128 </div>
93− {futureEvents.map((post) => {
94− return <EventPreview big event={post} className="mb-8" />;
129+ {futureEvents.map((group) => {
130+ return (
131+ <TwoUp>
132+ {group.map((post) => (
133+ <EventPreview event={post} className="mb-8" />
134+ ))}
135+ </TwoUp>
136+ );
95137 })}
96138 </>
97139 ) : null}
@@ -99,8 +141,14 @@ export default function Events({ events, search }) {
99141 <h3 className="text-wall-500">Past Events</h3>
100142 </div>
101143
102− {pastEvents.map((post) => {
103− return <EventPreview big event={post} className="mb-8" />;
144+ {pastEvents.map((group) => {
145+ return (
146+ <TwoUp>
147+ {group.map((post) => (
148+ <EventPreview event={post} className="mb-8" />
149+ ))}
150+ </TwoUp>
151+ );
104152 })}
105153 </Section>
106154 </SingleColumn>