Clickable profiles, open in a new window

src/element/profile.css

@@ -16,3 +16,7 @@
     outline: unset;
     object-fit: cover;
 }
+
+.profile:hover {
+    opacity: 0.8;
+}

src/element/profile.tsx

@@ -2,6 +2,7 @@ import "./profile.css";
 import { useUserProfile } from "@snort/system-react";
 import { UserMetadata } from "@snort/system";
 import { hexToBech32 } from "@snort/shared";
+import { linkToProfileHex } from "utils";
 import { System } from "index";
 
 export interface ProfileOptions {
@@ -32,10 +33,10 @@ export function Profile({
   const profile = useUserProfile(System, pubkey);
 
   return (
-    <div className="profile">
+    <a href={linkToProfileHex(pubkey)} target="_blank" className="profile">
       {(options?.showAvatar ?? true) && <img src={profile?.picture ?? ""} />}
       {(options?.showName ?? true) &&
         (options?.overrideName ?? getName(pubkey, profile))}
-    </div>
+    </a>
   );
 }

src/utils.ts

@@ -1,8 +1,13 @@
 import { NostrEvent } from "@snort/system";
+import { hexToBech32 } from "@snort/shared";
 
 export function findTag(e: NostrEvent | undefined, tag: string) {
     const maybeTag = e?.tags.find(evTag => {
         return evTag[0] === tag;
     });
     return maybeTag && maybeTag[1];
-}
+}
+
+export function linkToProfileHex(pubkeyHex: string) {
+    return `https://snort.social/p/${hexToBech32("npub", pubkeyHex)}`;
+}