feat(MemberCount): display actual member count in a tooltip

guildxyz · Dec 9, 2024 · e17a31b · e17a31b
1 parent b805f99
commit e17a31b
Showing 1 changed file with 21 additions and 1 deletion.
diff --git a/src/components/[guild]/RoleCard/components/MemberCount.tsx b/src/components/[guild]/RoleCard/components/MemberCount.tsx
@@ -45,10 +45,12 @@ const MemberCount = ({
 
 type WithSyncProps = Props & {
   roleId?: number
+  tooltipContent?: string // used only if sync status is not "STARTED"
 }
 
 const MemberCountWithSyncIndicator = ({
   roleId,
+  tooltipContent,
   ...rest
 }: PropsWithChildren<WithSyncProps>) => {
   const { status, data } = useActiveStatusUpdates(roleId)
@@ -76,6 +78,19 @@ const MemberCountWithSyncIndicator = ({
       </Tooltip>
     )
 
+  if (!!tooltipContent)
+    return (
+      <Tooltip>
+        <TooltipTrigger>
+          <MemberCount {...rest} />
+        </TooltipTrigger>
+
+        <TooltipContent>
+          <p>{tooltipContent}</p>
+        </TooltipContent>
+      </Tooltip>
+    )
+
   return <MemberCount {...rest} />
 }
 
@@ -101,7 +116,9 @@ const RoleCardMemberCount = ({
   memberCount,
   roleId,
   lastSyncedAt,
-}: PropsWithChildren<WithSyncProps & { lastSyncedAt: string }>) => {
+}: PropsWithChildren<
+  Omit<WithSyncProps, "tooltipContent"> & { lastSyncedAt: string }
+>) => {
   const { featureFlags } = useGuild()
   const { isAdmin } = useGuildPermission()
   const { isSuperAdmin } = useUser()
@@ -111,6 +128,9 @@ const RoleCardMemberCount = ({
       memberCount={memberCount}
       roleId={roleId}
       className="!bg-transparent text-muted-foreground"
+      tooltipContent={new Intl.NumberFormat("en-US", {
+        notation: "standard",
+      }).format(memberCount)}
     >
       {isSuperAdmin ? (
         <MemberCountLastSyncTooltip lastSyncedAt={lastSyncedAt}>