Add video to pan zoom and add to docs sidebar

FormidableLabs · Nov 20, 2024 · caecfe2 · caecfe2
1 parent 0bebf4b
commit caecfe2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/website/docs/assets/line.mp4 b/website/docs/assets/line.mp4
diff --git a/website/docs/pan-zoom.mdx b/website/docs/pan-zoom.mdx
@@ -1,7 +1,24 @@
+import ReactPlayer from "react-player/lazy";
+import lineMp4 from "./assets/line.mp4";
+
 # Pan/Zoom
 
 The `CartesianChart` and `PolarChart` components have opt-in support for "pan/zoom" gestures simply by using the `useChartTransformState` hook.
 
+<div className="flex justify-center mb-10">
+  <div className="rounded-md overflow-hidden border shadow">
+    <ReactPlayer
+      width={350}
+      height={(1096 / 764) * 350}
+      playing={true}
+      loop={true}
+      controls={true}
+      url={lineMp4}
+    />
+  </div>
+</div>
+
+
 ## useChartTransformState
 
 The `useChartTransformState` hook provides the necessary state management for pan and zoom gestures. It returns an object with a `state` property that contains:

diff --git a/website/sidebars.ts b/website/sidebars.ts
@@ -76,6 +76,7 @@ const sidebars = {
     },
 
     "animated-paths",
+    "pan-zoom",
   ],
   // By default, Docusaurus generates a sidebar from the docs folder structure
   // tutorialSidebar: [{ type: "autogenerated", dirName: "." }],