Add blog

Author: manuarora700

components/Divider.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Divider() {
+  return (
+    <div className="my-4">
+      <hr />
+    </div>
+  );
+}

components/HighlightBox.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+export default function HighlightBox({ children }) {
+  return (
+    <div
+      className="relative inline-block z-0 mt-0 mb-0"
+      style={{ marginTop: "0px", marginBottom: "0px" }}
+    >
+      <p
+        className="z-10 p-0 leading-0"
+        style={{ marginTop: "0px", marginBottom: "0px" }}
+      >
+        {children}
+      </p>
+      <div
+        className="absolute bottom-0 left-0 right-0 mt-10 h-2 inline-block bg-green-200 dark:bg-green-600"
+        style={{ zIndex: -10 }}
+      ></div>
+    </div>
+  );
+}

components/MDXComponents.js

@@ -10,7 +10,11 @@ import ConsCard from "@/components/ConsCard";
 // import YouTube from "@/components/metrics/Youtube";
 import Step from "@/components/Step";
 import StepLarge from "@/components/StepLarge";
+import StepLargeCustom from "@/components/StepLargeCustom";
+import HighlightBox from "@/components/HighlightBox";
 import StepCheck from "@/components/StepCheck";
+import Divider from "@/components/Divider";
+import Table from "@/components/Table";
 import VideoDemo from "./VideoDemo";
 
 const CustomLink = (props) => {
@@ -38,6 +42,10 @@ const MDXComponents = {
   StepCheck,
   Tweet,
   VideoDemo,
+  HighlightBox,
+  Divider,
+  Table,
+  StepLargeCustom,
 };
 
 export default MDXComponents;

components/StepCheck.js

@@ -27,7 +27,7 @@
 export default function StepCheck({ title }) {
   return (
     <div className="flex font-small items-baseline mb-2">
-      <div className="h-4 w-4 mr-2">
+      <div className="">
         <svg
           className="h-5 w-5 mr-2 text-green-500 inline-block"
           xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +43,7 @@ export default function StepCheck({ title }) {
           />
         </svg>
       </div>
-      <span>{title}</span>
+      <span class="content-center">{title}</span>
     </div>
   );
 }

components/StepLargeCustom.js

@@ -0,0 +1,15 @@
+export default function StepLarge({ number, title }) {
+  return (
+    <div className="step flex items-baseline md:items-center py-4">
+      <div className="flex items-start md:items-center justify-center border border-gray-200 font-extrabold dark:border-gray-900 rounded-full h-8 w-8 text-green-500">
+        {number}
+      </div>
+      <h1
+        className="ml-3 tracking-tight font-bold text-lg md:text-6xl dark:text-white"
+        style={{ marginBottom: "0px" }}
+      >
+        {title}
+      </h1>
+    </div>
+  );
+}

components/Table.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function Table({ headers, body }) {
+  return (
+    <table className="table pl-4 p-4 bg-white dark:bg-gray-700 shadow-lg rounded-md">
+      <thead className="ml-10">
+        <tr>
+          {headers.map((header) => (
+            <th className="border-b-2 p-4 dark:border-dark-5 dark:text-gray-100 whitespace-nowrap font-normal text-gray-900">
+              {header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {body.map((row) => (
+          <tr className="text-gray-700">
+            {row.map((data) => (
+              <td className="border-b-2 p-4 dark:border-dark-5 dark:text-gray-100">
+                {data}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}