feat: render emoji packs and goals in cards

src/element/hypertext.tsx

@@ -1,25 +1,63 @@
 import { NostrLink } from "./nostr-link";
 
+const FileExtensionRegex = /\.([\w]+)$/i;
+
 interface HyperTextProps {
   link: string;
 }
 
-export function HyperText({ link }: HyperTextProps) {
+export function HyperText({ link, children }: HyperTextProps) {
   try {
     const url = new URL(link);
-    if (url.protocol === "nostr:" || url.protocol === "web+nostr:") {
+    const extension =
+      FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
+
+    if (extension) {
+      switch (extension) {
+        case "gif":
+        case "jpg":
+        case "jpeg":
+        case "png":
+        case "bmp":
+        case "webp": {
+          return (
+            <img
+              src={url.toString()}
+              alt={url.toString()}
+              objectFit="contain"
+            />
+          );
+        }
+        case "wav":
+        case "mp3":
+        case "ogg": {
+          return <audio key={url.toString()} src={url.toString()} controls />;
+        }
+        case "mp4":
+        case "mov":
+        case "mkv":
+        case "avi":
+        case "m4v":
+        case "webm": {
+          return <video key={url.toString()} src={url.toString()} controls />;
+        }
+        default:
+          return <a href={url.toString()}>{children || url.toString()}</a>;
+      }
+    } else if (url.protocol === "nostr:" || url.protocol === "web+nostr:") {
       return <NostrLink link={link} />;
     } else {
       <a href={link} target="_blank" rel="noreferrer">
-        {link}
+        {children}
       </a>;
     }
-  } catch {
+  } catch (error) {
+    console.error(error);
     // Ignore the error.
   }
   return (
     <a href={link} target="_blank" rel="noreferrer">
-      {link}
+      {children}
     </a>
   );
 }