refactor(talks): extract talk components

website/src/components/talk/Events.astro

@@ -0,0 +1,42 @@
+---
+interface Event {
+  date: string
+  location: string
+  name: string
+  online?: boolean
+  time: string
+  url?: string
+}
+
+interface Props {
+  events: Event[]
+}
+
+const { events } = Astro.props
+---
+
+{events && (
+  <div>
+    <h2>Events</h2>
+    
+    <div>
+      <ul class="ml-4 list-disc">
+        {events.map((event) => (
+          <li>
+            {event.url ? (<a class="link" href={event.url}>{event.name}</a>) : event.name}
+
+            {event.location && `in ${event.location}`}
+
+            - {new Date(event.date).toLocaleDateString('en-GB', {
+              day: 'numeric',
+              month: 'long',
+              year: 'numeric',
+            })}
+
+            {event.online && '(online)'}
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+)}

website/src/components/talk/Slides.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+  id: string
+  ratio?: string
+}
+
+const { id, ratio }: Props = Astro.props
+---
+
+<div>
+  <h2 class="mb-2">Slides</h2>
+
+  <div class="slides">
+    <noscript>**Please enable JavaScript to view slides.**</noscript>
+    <script
+      class="speakerdeck-embed"
+      data-id={id}
+      data-ratio={ratio ?? '1.29456384323641'}
+      src="//speakerdeck.com/assets/embed.js"
+    ></script>
+  </div>
+</div>

website/src/components/talk/Video.astro

@@ -0,0 +1,25 @@
+---
+interface Props {
+  id: string
+  type: string
+}
+
+const { id, type }: Props = Astro.props
+---
+
+{type == "youtube" && (
+  <div>
+    <h2 class="mb-2">Video</h2>
+
+    <div class="video-full">
+      <iframe
+        width="678"
+        height="408"
+        src={`https://www.youtube.com/embed/${id}?rel=0&iv_load_policy=3`}
+        frameborder="0"
+        allowfullscreen
+      >
+      </iframe>
+    </div>
+  </div>
+)}