feat: badges

- render badges in cards
- render mentioned badges in chat
- render host badge awards in chat
- render accepted badges next to username

src/element/badge.tsx

@@ -0,0 +1,21 @@
+import "./badge.css";
+import type { NostrEvent } from "@snort/system";
+import { findTag } from "utils";
+
+export function Badge({ ev }: { ev: NostrEvent }) {
+  const name = findTag(ev, "name") || findTag(ev, "d");
+  const description = findTag(ev, "description");
+  const thumb = findTag(ev, "thumb");
+  const image = findTag(ev, "image");
+  return (
+    <div className="badge">
+      <img className="badge-thumbnail" src={thumb || image} alt={name} />
+      <div className="badge-details">
+        <h4 className="badge-name">{name}</h4>
+        {description?.length > 0 && (
+          <p className="badge-description">{description}</p>
+        )}
+      </div>
+    </div>
+  );
+}