lume: add events page fed by Events API

Signed-off-by: Xe Iaso <me@xeiaso.net>

1 files changed, 34 insertions, 0 deletions

diff --git a/lume/src/_components/EventCard.jsx b/lume/src/_components/EventCard.jsx
new file mode 100644
index 0000000..62dbcfe
--- /dev/null
+++ b/lume/src/_components/EventCard.jsx
@@ -0,0 +1,34 @@
+const timestampPBtoDate = ({ seconds }) => {
+    return new Date(seconds * 1000);
+};
+
+const formatDate = (date) => {
+    return date.toLocaleDateString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+    });
+};
+
+// takes within.website.x.mi.Event
+export default ({ name, url, start_date, end_date, location, description }) => {
+    const startDate = formatDate(timestampPBtoDate(start_date));
+    const endDate = formatDate(timestampPBtoDate(end_date));
+    return (
+        <div className="rounded-lg p-4 bg-bg-1 dark:bg-bgDark-1">
+            <h2 className="text-lg mb-2 text-fg-1 dark:text-fgDark-1">
+                <a href={url} target="_blank" rel="noopener noreferrer" className="text-blue-dark dark:text-blueDark-light">
+                    {name} <span role="img" aria-label="link">🔗</span>
+                </a>
+            </h2>
+            <div className="card-content text-fg-1 dark:text-fgDark-1">
+                <p>
+                    {location} - {startDate} {start_date.seconds !== end_date.seconds ? `thru ${endDate})}` : ""}
+                </p>
+                <p className="prose">
+                    {description}
+                </p>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file