refactor note component

src/app/note/components/user/mention.tsx

@@ -0,0 +1,16 @@
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
+
+export const NoteMentionUser = ({ pubkey }: { pubkey: string }) => {
+  const { user, isError, isLoading } = useProfile(pubkey);
+
+  return (
+    <>
+      {isError || isLoading ? (
+        <span className="inline-flex h-4 w-10 animate-pulse rounded bg-zinc-800"></span>
+      ) : (
+        <span className="cursor-pointer text-fuchsia-500">@{user?.username || user?.name || shortenKey(pubkey)}</span>
+      )}
+    </>
+  );
+};