feat: render emoji packs and goals in cards

src/element/emoji-pack.tsx

@@ -0,0 +1,24 @@
+import "./emoji-pack.css";
+import { type NostrEvent } from "@snort/system";
+
+import { Mention } from "element/mention";
+import { findTag } from "utils";
+
+export function EmojiPack({ ev }: { ev: NostrEvent }) {
+  const name = findTag(ev, "d");
+  const emoji = ev.tags.filter((e) => e.at(0) === "emoji");
+  return (
+    <div className="emoji-pack">
+      <div className="emoji-pack-title">
+        <h4>{name}</h4>
+        <Mention pubkey={ev.pubkey} />
+      </div>
+      <div className="emoji-pack-emojis">
+        {emoji.map((e) => {
+          const [, name, image] = e;
+          return <img alt={name} className="emoji" src={image} />;
+        })}
+      </div>
+    </div>
+  );
+}