docs: add video component

bamlab · Oct 28, 2024 · 503986c · 503986c
1 parent 2656d5e
commit 503986c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/website/docs/index.md b/website/docs/index.md
@@ -14,10 +14,7 @@ sidebar_position: 1
 flashlight measure
 ```
 
-<video autoPlay muted controls style={{width: "100%"}}>
-
-  <source src="https://github.com/bamlab/flashlight/assets/4534323/4038a342-f145-4c3b-8cde-17949bf52612"/>
-</video>
+<Video url="https://github.com/bamlab/flashlight/assets/4534323/4038a342-f145-4c3b-8cde-17949bf52612"/>
 
 ## Going further
 

diff --git a/website/src/components/Video.tsx b/website/src/components/Video.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Video = ({ url }: { url: string }) => (
+  <video autoPlay muted controls style={{ width: "100%" }}>
+    <source src={url} />
+  </video>
+);
diff --git a/website/src/theme/MDXComponents.js b/website/src/theme/MDXComponents.js
@@ -2,11 +2,13 @@
 import MDXComponents from "@theme-original/MDXComponents";
 import Contact from "@site/src/components/Contact.mdx";
 import Install from "@site/src/components/Install.mdx";
+import { Video } from "@site/src/components/Video";
 
 const _module = {
   ...MDXComponents,
   Contact,
   Install,
+  Video,
 };
 
 export default _module;