updated note preview component

src/components/note/content/preview.tsx

@@ -0,0 +1,43 @@
+import { ImagePreview } from '@components/note/preview/image';
+import { VideoPreview } from '@components/note/preview/video';
+
+import { useEffect, useState } from 'react';
+import ReactPlayer from 'react-player';
+
+export default function NotePreview({ content }: { content: string }) {
+  const [video, setVideo] = useState(null);
+  const [images, setImages] = useState([]);
+
+  useEffect(() => {
+    const urls = content.match(
+      /((http|ftp|https):\/\/)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi
+    );
+
+    if (urls !== null && urls.length > 0) {
+      urls.forEach((url) => {
+        // make sure url alway have http://
+        if (!/^https?:\/\//i.test(url)) {
+          url = 'http://' + url;
+        }
+        // parse url with new URL();
+        const parseURL = new URL(url, 'https://uselume.xyz');
+        // parse image url
+        if (parseURL.pathname.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+          // add image to preview
+          setImages((images) => [...images, parseURL.href]);
+        } else if (ReactPlayer.canPlay(parseURL.href)) {
+          // add video to preview
+          setVideo(parseURL.href);
+        }
+      });
+    }
+  }, [content]);
+
+  if (video) {
+    return <VideoPreview data={video} />;
+  } else if (images.length > 0) {
+    return <ImagePreview data={images} />;
+  } else {
+    return <></>;
+  }
+}