@greatapps/common 1.1.169 → 1.1.170
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,9 +4,9 @@ import { useState } from "react";
|
|
|
4
4
|
import { useRouter } from "next/navigation";
|
|
5
5
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
6
6
|
import { Popover } from "../ui/overlay/Popover";
|
|
7
|
-
import { Button } from "../ui/buttons/Button";
|
|
8
7
|
import { Progress } from "../ui/feedback/Progress";
|
|
9
8
|
import { Separator } from "../ui/data-display/Separator";
|
|
9
|
+
import { Settings } from "lucide-react";
|
|
10
10
|
import { NavBarItem } from "./NavBarItem";
|
|
11
11
|
import { UserAvatar } from "../ui/data-display/UserAvatar";
|
|
12
12
|
import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
|
|
@@ -64,7 +64,7 @@ function ProfilePopover({
|
|
|
64
64
|
align,
|
|
65
65
|
sideOffset: 8,
|
|
66
66
|
children: [
|
|
67
|
-
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[
|
|
67
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full", children: [
|
|
68
68
|
user && /* @__PURE__ */ jsx(
|
|
69
69
|
UserAvatar,
|
|
70
70
|
{
|
|
@@ -77,16 +77,7 @@ function ProfilePopover({
|
|
|
77
77
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
|
|
78
78
|
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950 truncate", children: user?.name || "" }),
|
|
79
79
|
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-gray-500 truncate", children: user?.email || "" })
|
|
80
|
-
] })
|
|
81
|
-
onEditProfile && /* @__PURE__ */ jsx(
|
|
82
|
-
Button,
|
|
83
|
-
{
|
|
84
|
-
variant: "secondary",
|
|
85
|
-
className: "paragraph-small-semibold h-8! whitespace-nowrap px-3 w-fit",
|
|
86
|
-
onClick: onEditProfile,
|
|
87
|
-
children: "Editar Perfil"
|
|
88
|
-
}
|
|
89
|
-
)
|
|
80
|
+
] })
|
|
90
81
|
] }),
|
|
91
82
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5", children: [
|
|
92
83
|
showCreditsSkeleton && /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4", children: [
|
|
@@ -134,6 +125,14 @@ function ProfilePopover({
|
|
|
134
125
|
},
|
|
135
126
|
index
|
|
136
127
|
)) }),
|
|
128
|
+
onEditProfile && /* @__PURE__ */ jsx(
|
|
129
|
+
NavBarItem,
|
|
130
|
+
{
|
|
131
|
+
icon: /* @__PURE__ */ jsx(Settings, { size: 16 }),
|
|
132
|
+
label: "Configura\xE7\xF5es",
|
|
133
|
+
onClick: onEditProfile
|
|
134
|
+
}
|
|
135
|
+
),
|
|
137
136
|
/* @__PURE__ */ jsx(Separator, {}),
|
|
138
137
|
/* @__PURE__ */ jsx(NavBarItem, { label: "Sair", onClick: handleLogout })
|
|
139
138
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { useRouter } from \"next/navigation\";\r\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport { Popover } from \"../ui/overlay/Popover\";\r\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { useRouter } from \"next/navigation\";\r\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport { Popover } from \"../ui/overlay/Popover\";\r\nimport { Progress } from \"../ui/feedback/Progress\";\r\nimport { Separator } from \"../ui/data-display/Separator\";\r\nimport { Settings } from \"lucide-react\";\r\nimport { NavBarItem } from \"./NavBarItem\";\r\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\r\nimport { LoadingOverlay } from \"../ui/feedback/LoadingOverlay\";\r\nimport { useAuth } from \"../../providers/auth.provider\";\r\nimport { cn } from \"../../infra/utils/clsx\";\r\nimport { useIaCredits } from \"../../modules/ia-credits/hooks/ia-credits.hook\";\r\n\r\nexport interface ProfileMenuItem {\r\n icon?: React.ReactNode;\r\n label: string;\r\n onClick: () => void;\r\n}\r\n\r\nexport interface ProfilePopoverProps {\r\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n align?: \"start\" | \"center\" | \"end\";\r\n contentClassName?: string;\r\n onEditProfile?: () => void;\r\n onCreditsClick?: () => void;\r\n menuItems?: ProfileMenuItem[];\r\n logoutRedirect?: string;\r\n}\r\n\r\nfunction ProfilePopover({\r\n side = \"top\",\r\n align = \"start\",\r\n contentClassName = \"absolute bottom-2 left-[26px]\",\r\n onEditProfile,\r\n onCreditsClick,\r\n menuItems = [],\r\n logoutRedirect = \"/login\",\r\n}: ProfilePopoverProps) {\r\n const router = useRouter();\r\n const { user, logout } = useAuth();\r\n const [isLoggingOut, setIsLoggingOut] = useState(false);\r\n\r\n const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =\r\n useIaCredits();\r\n\r\n const handleLogout = async () => {\r\n try {\r\n setIsLoggingOut(true);\r\n await logout();\r\n } finally {\r\n setIsLoggingOut(false);\r\n if (logoutRedirect !== \"/login\") {\r\n router.push(logoutRedirect);\r\n }\r\n }\r\n };\r\n\r\n const hasSubscription = !isSubscriptionLoading && subscription !== null;\r\n const showCreditsSkeleton = hasSubscription && isCreditsLoading;\r\n const showCredits =\r\n hasSubscription && !isCreditsLoading;\r\n const creditsPercentage =\r\n showCredits && summary.totalCredits > 0\r\n ? (summary.usedCredits / summary.totalCredits) * 100\r\n : 0;\r\n\r\n return (\r\n <>\r\n <LoadingOverlay isLoading={isLoggingOut} message=\"Saindo da sua conta...\" />\r\n <Popover>\r\n <PopoverPrimitive.Trigger className=\"cursor-pointer\">\r\n {user && (\r\n <UserAvatar\r\n key={user.id}\r\n photo={user.photo}\r\n name={user.name}\r\n size={40}\r\n />\r\n )}\r\n </PopoverPrimitive.Trigger>\r\n\r\n <PopoverPrimitive.Portal>\r\n <PopoverPrimitive.Content\r\n className={cn(\r\n \"w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99\",\r\n contentClassName,\r\n )}\r\n side={side}\r\n align={align}\r\n sideOffset={8}\r\n >\r\n <div className=\"grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full\">\r\n {user && (\r\n <UserAvatar\r\n key={user.id}\r\n photo={user.photo}\r\n name={user.name}\r\n size={32}\r\n />\r\n )}\r\n\r\n <div className=\"flex flex-col gap-0.5 min-w-0\">\r\n <span className=\"paragraph-small-semibold text-gray-950 truncate\">\r\n {user?.name || \"\"}\r\n </span>\r\n <span className=\"paragraph-xsmall-medium text-gray-500 truncate\">\r\n {user?.email || \"\"}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div className=\"flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5\">\r\n {showCreditsSkeleton && (\r\n <div className=\"flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4\">\r\n <div className=\"flex items-center justify-between gap-2\">\r\n <span className=\"paragraph-xsmall-semibold text-white truncate\">\r\n Créditos usados\r\n </span>\r\n <div className=\"skeleton h-3.5 w-16 rounded\" />\r\n </div>\r\n <div className=\"skeleton h-1.5 w-full rounded-full\" />\r\n </div>\r\n )}\r\n\r\n {showCredits && (\r\n <div\r\n className={cn(\r\n \"flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors\",\r\n onCreditsClick && \"cursor-pointer hover:bg-gray-900\",\r\n )}\r\n onClick={onCreditsClick}\r\n >\r\n <div className=\"flex items-center justify-between gap-2\">\r\n <span className=\"paragraph-xsmall-semibold text-white truncate\">\r\n Créditos usados\r\n </span>\r\n <span className=\"paragraph-xsmall-medium text-white/50\">\r\n {summary.usedCredits.toLocaleString(\"pt-BR\")}/\r\n {summary.totalCredits.toLocaleString(\"pt-BR\")}\r\n </span>\r\n </div>\r\n <Progress\r\n className=\"bg-white/10\"\r\n indicatorColor=\"bg-white\"\r\n value={creditsPercentage}\r\n />\r\n </div>\r\n )}\r\n\r\n <div className=\"flex flex-col gap-2\">\r\n {menuItems.length > 0 && (\r\n <div className=\"flex flex-col\">\r\n {menuItems.map((item, index) => (\r\n <NavBarItem\r\n key={index}\r\n icon={item.icon}\r\n label={item.label}\r\n onClick={item.onClick}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n {onEditProfile && (\r\n <NavBarItem\r\n icon={<Settings size={16} />}\r\n label=\"Configurações\"\r\n onClick={onEditProfile}\r\n />\r\n )}\r\n <Separator />\r\n <NavBarItem label=\"Sair\" onClick={handleLogout} />\r\n </div>\r\n </div>\r\n </PopoverPrimitive.Content>\r\n </PopoverPrimitive.Portal>\r\n </Popover>\r\n </>\r\n );\r\n}\r\n\r\nexport { ProfilePopover };\r\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -4,9 +4,9 @@ import { useState } from "react";
|
|
|
4
4
|
import { useRouter } from "next/navigation";
|
|
5
5
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
6
6
|
import { Popover } from "../ui/overlay/Popover";
|
|
7
|
-
import { Button } from "../ui/buttons/Button";
|
|
8
7
|
import { Progress } from "../ui/feedback/Progress";
|
|
9
8
|
import { Separator } from "../ui/data-display/Separator";
|
|
9
|
+
import { Settings } from "lucide-react";
|
|
10
10
|
import { NavBarItem } from "./NavBarItem";
|
|
11
11
|
import { UserAvatar } from "../ui/data-display/UserAvatar";
|
|
12
12
|
import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
|
|
@@ -92,7 +92,7 @@ function ProfilePopover({
|
|
|
92
92
|
align={align}
|
|
93
93
|
sideOffset={8}
|
|
94
94
|
>
|
|
95
|
-
<div className="grid grid-cols-[
|
|
95
|
+
<div className="grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full">
|
|
96
96
|
{user && (
|
|
97
97
|
<UserAvatar
|
|
98
98
|
key={user.id}
|
|
@@ -110,16 +110,6 @@ function ProfilePopover({
|
|
|
110
110
|
{user?.email || ""}
|
|
111
111
|
</span>
|
|
112
112
|
</div>
|
|
113
|
-
|
|
114
|
-
{onEditProfile && (
|
|
115
|
-
<Button
|
|
116
|
-
variant="secondary"
|
|
117
|
-
className="paragraph-small-semibold h-8! whitespace-nowrap px-3 w-fit"
|
|
118
|
-
onClick={onEditProfile}
|
|
119
|
-
>
|
|
120
|
-
Editar Perfil
|
|
121
|
-
</Button>
|
|
122
|
-
)}
|
|
123
113
|
</div>
|
|
124
114
|
|
|
125
115
|
<div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
|
|
@@ -173,6 +163,13 @@ function ProfilePopover({
|
|
|
173
163
|
))}
|
|
174
164
|
</div>
|
|
175
165
|
)}
|
|
166
|
+
{onEditProfile && (
|
|
167
|
+
<NavBarItem
|
|
168
|
+
icon={<Settings size={16} />}
|
|
169
|
+
label="Configurações"
|
|
170
|
+
onClick={onEditProfile}
|
|
171
|
+
/>
|
|
172
|
+
)}
|
|
176
173
|
<Separator />
|
|
177
174
|
<NavBarItem label="Sair" onClick={handleLogout} />
|
|
178
175
|
</div>
|