add tooltip

Author: mlsmaycon

src/modules/users/table-cells/UserStatusCell.tsx

@@ -1,4 +1,6 @@
+import FullTooltip from "@components/FullTooltip";
 import { cn } from "@utils/helpers";
+import { HelpCircle } from "lucide-react";
 import React from "react";
 import { User } from "@/interfaces/User";
 
@@ -35,6 +37,26 @@ export default function UserStatusCell({ user }: Readonly<Props>) {
     >
       <span className={cn("h-2 w-2 rounded-full", color)}></span>
       {text}
+      {isPendingApproval && (
+        <FullTooltip
+          content={
+            <div className={"max-w-xs text-xs"}>
+              <p>This user requires approval from an administrator.</p>
+              <p className="mt-2">
+                To disable user approval requirements for new users, go to the account{" "}
+                <span className="text-nb-gray-200 inline-flex gap-1 items-center max-h-[22px] font-medium bg-nb-gray-900 py-[3px] text-[11px] px-[5px] border border-nb-gray-800 rounded-[4px]">
+                  Settings
+                </span>{" "}
+                and disable "User Approval Required".
+              </p>
+            </div>
+          }
+          interactive={true}
+          side="right"
+        >
+          <HelpCircle size={14} className="text-orange-400 cursor-help" />
+        </FullTooltip>
+      )}
     </div>
   );
 }