🚀 ADD - blog++, projects++

Author: manuarora700

components/MDXComponents.js

@@ -11,6 +11,7 @@ import ConsCard from "@/components/ConsCard";
 import Step from "@/components/Step";
 import StepLarge from "@/components/StepLarge";
 import StepCheck from "@/components/StepCheck";
+import VideoDemo from "./VideoDemo";
 
 const CustomLink = (props) => {
   const href = props.href;
@@ -36,6 +37,7 @@ const MDXComponents = {
   StepLarge,
   StepCheck,
   Tweet,
+  VideoDemo,
 };
 
 export default MDXComponents;

components/ProjectCard.js

@@ -21,6 +21,24 @@ export default function ProjectCard({ title, description, href, icon, tags }) {
             </svg>
           </div>
         )}
+        {icon === "devmedium" && (
+          <div className="h-8 w-8 ml-2 mr-4">
+            <svg
+              className="h-8 w-8 min-w-lg text-gray-900 dark:text-gray-100"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
+              />
+            </svg>
+          </div>
+        )}
         {icon === "github" && (
           <div className="h-8 w-8 ml-2 mr-4">
             <svg

components/VideoDemo.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { useState, useEffect, useRef } from "react";
+
+export default function VideoDemo({ src, width, label = false }) {
+  const [speed, setSpeed] = useState(parseFloat(4.0));
+
+  // useEffect(() => {}, [speed]);
+  const videoRef = useRef();
+
+  const setPlayback = () => {
+    videoRef.current.playbackRate = parseFloat(speed);
+    console.log(videoRef.current.playbackRate);
+  };
+
+  const changePlayback = (e) => {
+    setSpeed(parseFloat(e.target.value));
+    videoRef.current.playbackRate = parseFloat(speed);
+  };
+  return (
+    <div className="flex flex-col justify-center">
+      <div>
+        <video
+          ref={videoRef}
+          onCanPlay={setPlayback}
+          playsInline
+          src={src}
+          muted
+          autoPlay
+          loop
+          width={width}
+        ></video>
+      </div>
+      {label && (
+        <label htmlFor="video-speed" className="mt-8">
+          🐢{" "}
+          <input
+            type="range"
+            min="0.8"
+            max="4.2"
+            step="0.10"
+            value={speed}
+            name="video-speed"
+            onChange={(e) => changePlayback(e)}
+          />{" "}
+          🐇
+        </label>
+      )}
+    </div>
+  );
+}