feat: application handler note render

packages/app/src/Components/Event/Application.tsx

@@ -0,0 +1,39 @@
+import { mapEventToProfile, TaggedNostrEvent } from "@snort/system";
+import { FormattedMessage } from "react-intl";
+
+import KindName from "../kind-name";
+import Avatar from "../User/Avatar";
+import DisplayName from "../User/DisplayName";
+import ProfileImage from "../User/ProfileImage";
+
+export function ApplicationHandler({ ev }: { ev: TaggedNostrEvent }) {
+  const profile = mapEventToProfile(ev);
+  const kinds = ev.tags
+    .filter(a => a[0] === "k")
+    .map(a => Number(a[1]))
+    .sort((a, b) => a - b);
+  return (
+    <div className="p flex gap-2 flex-col">
+      <div className="flex items-center gap-2 text-xl">
+        <Avatar user={profile} pubkey={""} size={120} />
+        <div className="flex flex-col gap-2">
+          <DisplayName user={profile} pubkey={""} />
+          <div className="text-sm  flex items-center gap-2">
+            <div className="text-gray-light">
+              <FormattedMessage defaultMessage="Published by" />
+            </div>
+            <ProfileImage className="inline" pubkey={ev.pubkey} size={30} link="" />
+          </div>
+        </div>
+      </div>
+      <FormattedMessage defaultMessage="Supported Kinds:" />
+      <div className="flex flex-wrap">
+        {kinds.map(a => (
+          <div key={a} className="pill">
+            <KindName kind={a} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}