From 20baae0c6805efde8620564995130e6571b8e636 Mon Sep 17 00:00:00 2001
From: khalilcodes <khalilali.j@gmail.com>
Date: Wed, 18 May 2022 19:03:19 +0300
Subject: [PATCH] [site/mdx][s]: add twitter embed component to parse twitter
 links in markdown

---
 site/components/Link.js | 45 ++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/site/components/Link.js b/site/components/Link.js
index b1d97df..0cb260e 100644
--- a/site/components/Link.js
+++ b/site/components/Link.js
@@ -1,31 +1,30 @@
-import Link from "next/link";
 import ReactPlayer from "react-player";
-
-const videoLinks = [
-  "youtube.com",
-  "dailymotion.com",
-  "vimeo.com",
-  "soundcloud.com",
-  "facebook.com/watch",
-  "twitch.com",
-];
+import TwitterEmbed from "./TwitterEmbed";
+import { YOUTUBE_REGEX, TWITTER_REGEX } from "../lib/constants";
 
 export const Paragraph = (props) => {
   if (
     typeof props.children == "object" &&
     props.children.props &&
-    props.children.props.href &&
-    videoLinks.some((str) => props.children.props.href.includes(str))
-  )
-    return (
-      <div className="relative pt-[56.25%]" {...props}>
-        <ReactPlayer
-          className="absolute top-0 left-0"
-          width="100%"
-          height="100%"
-          url={props.children.props.href}
-        />
-      </div>
-    );
+    props.children.props.href
+  ) {
+    if (YOUTUBE_REGEX.test(props.children.props.href)) {
+      return (
+        <div className="relative pt-[56.25%] my-8" {...props}>
+          <ReactPlayer
+            className="absolute top-0 left-0"
+            width="100%"
+            height="100%"
+            url={props.children.props.href}
+          />
+        </div>
+      );
+    }
+
+    if (TWITTER_REGEX.test(props.children.props.href)) {
+      return <TwitterEmbed url={props.children.props.href} {...props} />;
+    }
+  }
+
   return <p {...props} />;
 };