@greatapps/common 1.1.219 → 1.1.221

package/src/components/layouts/ProfilePopover.tsx

@@ -1,184 +1,179 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Popover } from "../ui/overlay/Popover";
-import { Progress } from "../ui/feedback/Progress";
-import { Separator } from "../ui/data-display/Separator";
-import { IconSettings } from '@tabler/icons-react';
-import { NavBarItem } from "./NavBarItem";
-import { UserAvatar } from "../ui/data-display/UserAvatar";
-import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
-import { useAuth } from "../../providers/auth.provider";
-import { cn } from "../../infra/utils/clsx";
-import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
-
-export interface ProfileMenuItem {
-  icon?: React.ReactNode;
-  label: string;
-  onClick: () => void;
-}
-
-export interface ProfilePopoverProps {
-  side?: "top" | "bottom" | "left" | "right";
-  align?: "start" | "center" | "end";
-  contentClassName?: string;
-  onEditProfile?: () => void;
-  onCreditsClick?: () => void;
-  menuItems?: ProfileMenuItem[];
-  logoutRedirect?: string;
-}
-
-function ProfilePopover({
-  side = "top",
-  align = "start",
-  contentClassName = "absolute bottom-2 left-[26px]",
-  onEditProfile,
-  onCreditsClick,
-  menuItems = [],
-  logoutRedirect = "/login",
-}: ProfilePopoverProps) {
-  const router = useRouter();
-  const { user, logout } = useAuth();
-  const [isLoggingOut, setIsLoggingOut] = useState(false);
-
-  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
-    useIaCredits();
-
-  const handleLogout = async () => {
-    try {
-      setIsLoggingOut(true);
-      await logout();
-    } finally {
-      setIsLoggingOut(false);
-      if (logoutRedirect !== "/login") {
-        router.push(logoutRedirect);
-      }
-    }
-  };
-
-  const hasSubscription = !isSubscriptionLoading && subscription !== null;
-  const showCreditsSkeleton = hasSubscription && isCreditsLoading;
-  const showCredits =
-    hasSubscription && !isCreditsLoading;
-  const creditsPercentage =
-    showCredits && summary.totalCredits > 0
-      ? (summary.usedCredits / summary.totalCredits) * 100
-      : 0;
-
-  return (
-    <>
-      <LoadingOverlay isLoading={isLoggingOut} message="Saindo da sua conta..." />
-      <Popover>
-        <PopoverPrimitive.Trigger className="cursor-pointer">
-          {user && (
-            <UserAvatar
-              key={user.id}
-              photo={user.photo}
-              name={user.name}
-              size={40}
-            />
-          )}
-        </PopoverPrimitive.Trigger>
-
-        <PopoverPrimitive.Portal>
-          <PopoverPrimitive.Content
-            className={cn(
-              "w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99",
-              contentClassName,
-            )}
-            side={side}
-            align={align}
-            sideOffset={8}
-          >
-            <div className="grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full">
-              {user && (
-                <UserAvatar
-                  key={user.id}
-                  photo={user.photo}
-                  name={user.name}
-                  size={32}
-                />
-              )}
-
-              <div className="flex flex-col gap-0.5 min-w-0">
-                <span className="paragraph-small-semibold text-gray-950 truncate">
-                  {user?.name || ""}
-                </span>
-                <span className="paragraph-xsmall-medium text-gray-500 truncate">
-                  {user?.email || ""}
-                </span>
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
-              {showCreditsSkeleton && (
-                <div className="flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4">
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="paragraph-xsmall-semibold text-white truncate">
-                      Créditos usados
-                    </span>
-                    <div className="skeleton h-3.5 w-16 rounded" />
-                  </div>
-                  <div className="skeleton h-1.5 w-full rounded-full" />
-                </div>
-              )}
-
-              {showCredits && (
-                <div
-                  className={cn(
-                    "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors",
-                    onCreditsClick && "cursor-pointer hover:bg-gray-900",
-                  )}
-                  onClick={onCreditsClick}
-                >
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="paragraph-xsmall-semibold text-white truncate">
-                      Créditos usados
-                    </span>
-                    <span className="paragraph-xsmall-medium text-white/50">
-                      {summary.usedCredits.toLocaleString("pt-BR")}/
-                      {summary.totalCredits.toLocaleString("pt-BR")}
-                    </span>
-                  </div>
-                  <Progress
-                    className="bg-white/10"
-                    indicatorColor="bg-white"
-                    value={creditsPercentage}
-                  />
-                </div>
-              )}
-
-              <div className="flex flex-col gap-2">
-                {menuItems.length > 0 && (
-                  <div className="flex flex-col">
-                    {menuItems.map((item, index) => (
-                      <NavBarItem
-                        key={index}
-                        icon={item.icon}
-                        label={item.label}
-                        onClick={item.onClick}
-                      />
-                    ))}
-                  </div>
-                )}
-                {onEditProfile && (
-                  <NavBarItem
-                    icon={<IconSettings size={16} />}
-                    label="Configurações"
-                    onClick={onEditProfile}
-                  />
-                )}
-                <Separator />
-                <NavBarItem label="Sair" onClick={handleLogout} />
-              </div>
-            </div>
-          </PopoverPrimitive.Content>
-        </PopoverPrimitive.Portal>
-      </Popover>
-    </>
-  );
-}
-
-export { ProfilePopover };
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover } from "../ui/overlay/Popover";
+import { Progress } from "../ui/feedback/Progress";
+import { Separator } from "../ui/data-display/Separator";
+import { IconSettings } from "@tabler/icons-react";
+import { NavBarItem } from "./NavBarItem";
+import { UserAvatar } from "../ui/data-display/UserAvatar";
+import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
+import { useAuth } from "../../providers/auth.provider";
+import { cn } from "../../infra/utils/clsx";
+import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
+
+export interface ProfileMenuItem {
+  icon?: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}
+
+export interface ProfilePopoverProps {
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  contentClassName?: string;
+  onEditProfile?: () => void;
+  onCreditsClick?: () => void;
+  menuItems?: ProfileMenuItem[];
+  logoutRedirect?: string;
+}
+
+function ProfilePopover({
+  side = "top",
+  align = "start",
+  contentClassName = "absolute bottom-2 left-[26px]",
+  onEditProfile,
+  onCreditsClick,
+  menuItems = [],
+  logoutRedirect = "/login",
+}: ProfilePopoverProps) {
+  const router = useRouter();
+  const { user, logout } = useAuth();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
+    useIaCredits();
+
+  const handleLogout = async () => {
+    try {
+      setIsLoggingOut(true);
+      await logout();
+    } finally {
+      setIsLoggingOut(false);
+      if (logoutRedirect !== "/login") {
+        router.push(logoutRedirect);
+      }
+    }
+  };
+
+  const hasSubscription = !isSubscriptionLoading && subscription !== null;
+  const showCreditsSkeleton = hasSubscription && isCreditsLoading;
+  const showCredits = hasSubscription && !isCreditsLoading;
+  const creditsPercentage =
+    showCredits && summary.totalCredits > 0
+      ? (summary.usedCredits / summary.totalCredits) * 100
+      : 0;
+
+  return (
+    <>
+      <LoadingOverlay
+        isLoading={isLoggingOut}
+        message="Saindo da sua conta..."
+      />
+      <Popover>
+        <PopoverPrimitive.Trigger className="cursor-pointer">
+          {user && (
+            <UserAvatar
+              key={user.id}
+              photo={user.photo}
+              name={user.name}
+              size={40}
+            />
+          )}
+        </PopoverPrimitive.Trigger>
+
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content
+            className={cn(
+              "w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99",
+              contentClassName,
+            )}
+            side={side}
+            align={align}
+            sideOffset={8}
+          >
+            <div className="grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full">
+              {user && (
+                <UserAvatar
+                  key={user.id}
+                  photo={user.photo}
+                  name={user.name}
+                  size={32}
+                />
+              )}
+
+              <div className="flex flex-col gap-0.5 min-w-0">
+                <span className="paragraph-small-semibold text-gray-950 truncate">
+                  {user?.name || ""}
+                </span>
+                <span className="paragraph-xsmall-medium text-gray-500 truncate">
+                  {user?.email || ""}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
+              {showCreditsSkeleton && (
+                <div className="flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="paragraph-xsmall-semibold text-white truncate">
+                      Créditos usados
+                    </span>
+                    <div className="skeleton h-3.5 w-16 rounded" />
+                  </div>
+                  <div className="skeleton h-1.5 w-full rounded-full" />
+                </div>
+              )}
+
+              {showCredits && (
+                <div
+                  className={cn(
+                    "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors",
+                    onCreditsClick && "cursor-pointer hover:bg-gray-900",
+                  )}
+                  onClick={onCreditsClick}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="paragraph-xsmall-semibold text-white truncate">
+                      Créditos usados
+                    </span>
+                    <span className="paragraph-xsmall-medium text-white/50">
+                      {summary.usedCredits.toLocaleString("pt-BR")}/
+                      {summary.totalCredits.toLocaleString("pt-BR")}
+                    </span>
+                  </div>
+                  <Progress
+                    className="bg-white/10"
+                    indicatorColor="bg-white"
+                    value={creditsPercentage}
+                  />
+                </div>
+              )}
+
+              <div className="flex flex-col gap-2">
+                {menuItems.length > 0 && (
+                  <div className="flex flex-col">
+                    {menuItems.map((item, index) => (
+                      <NavBarItem
+                        key={index}
+                        icon={item.icon}
+                        label={item.label}
+                        onClick={item.onClick}
+                      />
+                    ))}
+                  </div>
+                )}
+                <Separator />
+                <NavBarItem label="Sair" onClick={handleLogout} />
+              </div>
+            </div>
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      </Popover>
+    </>
+  );
+}
+
+export { ProfilePopover };