👉 Add blog

Author: manuarora700

components/Button.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function Button({ text, url }) {
+  return (
+    <a
+      href={url}
+      style={{ color: "#ffffff", textDecoration: "none" }}
+      class="mr-2 inline-block rounded-md px-6 py-3 bg-black text-gray-50 text-sm border border-gray-100 dark:border dark:border-gray-100"
+    >
+      {text}
+    </a>
+  );
+}

components/MDXComponents.js

@@ -16,6 +16,8 @@ import StepCheck from "@/components/StepCheck";
 import Divider from "@/components/Divider";
 import Table from "@/components/Table";
 import VideoDemo from "./VideoDemo";
+import VideoComponent from "./VideoComponent";
+import Button from "./Button";
 
 const CustomLink = (props) => {
   const href = props.href;
@@ -46,6 +48,8 @@ const MDXComponents = {
   Divider,
   Table,
   StepLargeCustom,
+  VideoComponent,
+  Button,
 };
 
 export default MDXComponents;

components/VideoComponent.js

@@ -0,0 +1,32 @@
+import React from "react";
+
+export default function VideoComponent({ videoUrl }) {
+  return (
+    <div
+      class="max-w-4xl mx-auto"
+      style={{
+        overflow: "hidden",
+        paddingBottom: "56.25%",
+        position: "relative",
+        height: "0",
+      }}
+    >
+      <iframe
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          height: "100%",
+          width: "100%",
+        }}
+        width="520"
+        height="325"
+        src={videoUrl}
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+    </div>
+  );
+}