Add component for extracting thumbnail of youtube

apps/blog/src/components/MDXComponents/index.tsx

@@ -2,6 +2,7 @@ import type { AnchorHTMLAttributes, DetailedHTMLProps, ImgHTMLAttributes, TableH
 import NextLink from "next/link";
 import { Icon } from "@marshallku/icon";
 import PostImage from "#components/PostImage";
+import YoutubeThumbnailExtractor from "#components/YoutubeThumbnailExtractor";
 
 function Link({
     href,
@@ -46,6 +47,7 @@ const MDXComponents = {
             <table {...props} />
         </div>
     ),
+    YoutubeThumbnailExtractor,
 };
 
 export default MDXComponents;

apps/blog/src/components/YoutubeThumbnailExtractor/index.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+const VIDEO_SIZES = ["hq720", "sddefault", "hqdefault", "mqdefault", "default"];
+
+function YoutubeThumbnailExtractor() {
+    const [videoId, setVideoId] = useState("");
+    const [videoUrl, setVideoUrl] = useState("");
+    const [thumbnails, setThumbnails] = useState<string[]>([]);
+
+    const handleSubmit = useCallback(
+        (e: React.FormEvent<HTMLFormElement>) => {
+            e.preventDefault();
+            const youtubeRegex = /youtu\.?be(\.com)?\/(live\/)?(shorts\/|watch\?v=|embed\/)?([^&?\s]+)/;
+            const id = videoUrl.match(youtubeRegex)?.[4];
+            if (!id) return;
+            setVideoId(id);
+            const thumbnails = VIDEO_SIZES.map((size) => `https://i.ytimg.com/vi/${id}/${size}.jpg`);
+            setThumbnails(thumbnails);
+        },
+        [videoUrl],
+    );
+
+    return (
+        <>
+            <form className="form" onSubmit={handleSubmit}>
+                <input
+                    type="text"
+                    className="form__input"
+                    name="uri"
+                    placeholder="URI of Youtube video"
+                    value={videoUrl}
+                    onChange={(e) => setVideoUrl(e.target.value)}
+                />
+                <button type="submit" className="form__submit">
+                    Export
+                </button>
+            </form>
+            <div className="result" style={{ display: videoId ? "block" : "none" }}>
+                <div className="result__title">Thumbnails</div>
+                <div className="result__thumbnail">
+                    {thumbnails.map((thumbnail) => (
+                        <img key={thumbnail} src={thumbnail} alt={thumbnail} />
+                    ))}
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default YoutubeThumbnailExtractor;