feat: profile tab top zappers

closes #662

packages/app/src/Components/Event/Note/ReactionsModal.tsx

@@ -10,7 +10,7 @@ import Icon from "@/Components/Icons/Icon";
 import Modal from "@/Components/Modal/Modal";
 import TabSelectors, { Tab } from "@/Components/TabSelectors/TabSelectors";
 import ProfileImage from "@/Components/User/ProfileImage";
-import { formatShort } from "@/Utils/Number";
+import ZapAmount from "@/Components/zap-amount";
 
 import messages from "../../messages";
 
@@ -84,10 +84,7 @@ const ReactionsModal = ({ onClose, event, initialTab = 0 }: ReactionsModalProps)
             z =>
               z.sender && (
                 <div key={z.id} className="reactions-item">
-                  <div className="zap-reaction-icon">
-                    <Icon name="zap-solid" size={20} className="text-zap" />
-                    <span className="zap-amount">{formatShort(z.amount)}</span>
-                  </div>
+                  <ZapAmount n={z.amount} />
                   <ProfileImage
                     showProfileCard={true}
                     pubkey={z.anonZap ? "" : z.sender}

packages/app/src/Components/User/ProfileImage.tsx

@@ -16,7 +16,7 @@ import { ProfileLink } from "./ProfileLink";
 
 export interface ProfileImageProps {
   pubkey: HexKey;
-  subHeader?: JSX.Element;
+  subHeader?: ReactNode;
   showUsername?: boolean;
   className?: string;
   link?: string;

packages/app/src/Components/User/ProfilePreview.tsx

@@ -15,6 +15,7 @@ export interface ProfilePreviewProps {
     linkToProfile?: boolean;
     profileCards?: boolean;
   };
+  subHeader?: ReactNode;
   profile?: UserMetadata;
   actions?: ReactNode;
   className?: string;
@@ -50,7 +51,7 @@ export default memo(function ProfilePreview(props: ProfilePreviewProps) {
               pubkey={pubkey}
               profile={props.profile}
               link={options.linkToProfile ?? true ? undefined : ""}
-              subHeader={options.about ? <div className="about">{user?.about}</div> : undefined}
+              subHeader={options.about ? <div className="about">{user?.about}</div> : props.subHeader}
               showProfileCard={options.profileCards}
             />
             {props.actions ?? (

packages/app/src/Components/zap-amount.tsx

@@ -0,0 +1,12 @@
+import { formatShort } from "@/Utils/Number";
+
+import Icon from "./Icons/Icon";
+
+export default function ZapAmount({ n }: { n: number }) {
+  return (
+    <div className="flex gap-2 items-center text-xl font-bold">
+      <Icon name="zap-solid" size={20} className="text-zap" />
+      <span>{formatShort(n)}</span>
+    </div>
+  );
+}