✨ Video Player

src/components/posts/Video.tsx

@@ -0,0 +1,41 @@
+import { useState, Fragment } from "react";
+
+export default function Video({
+  sources,
+}: {
+  sources: { caption: string; url: string }[];
+}) {
+  const [focus, setFocus] = useState<boolean[]>(
+    sources.map((_, idx) => idx === 0)
+  );
+
+  function changeFocus(idx: number) {
+    setFocus(focus.map((_, idx) => idx === idx));
+  }
+
+  return (
+    <div role="tablist" className="tabs tabs-lifted">
+      {sources.map((item, idx) => (
+        <Fragment key={idx}>
+          <input
+            type="radio"
+            name={item.caption}
+            role="tab"
+            className="tab"
+            aria-label={item.caption}
+            checked={focus[idx]}
+            onChange={() => changeFocus(idx)}
+          />
+          <div
+            role="tabpanel"
+            className="tab-content bg-base-100 border-base-300 rounded-box"
+          >
+            <video className="mb-0 block w-full h-[360px]" controls>
+                <source src={item.url} />
+            </video>
+          </div>
+        </Fragment>
+      ))}
+    </div>
+  );
+}

src/pages/posts/[slug].astro

@@ -1,5 +1,6 @@
 ---
 import PageLayout from "../../layouts/PageLayout.astro";
+import Video from "../../components/posts/Video.tsx";
 
 import { POST_TYPES } from "../../scripts/consts";
 import { client } from "../../../tina/__generated__/client";
@@ -9,6 +10,10 @@ export const prerender = false;
 
 const { slug } = Astro.params;
 
+const components = {
+  Video,
+}
+
 const { data } = await client.queries.post({
   relativePath: (slug ?? "index") + ".mdx",
 });
@@ -30,7 +35,7 @@ const { data } = await client.queries.post({
         <div class="divider"></div>
 
         <div class="prose max-w-none">
-          <TinaMarkdown content={data.post._body} />
+          <TinaMarkdown content={data.post._body} components={components} />
         </div>
       </div>
     </div>