@greatapps/common 1.1.3 → 1.1.4
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.
- package/dist/components/layouts/NotificationsPopover.mjs +6 -5
- package/dist/components/layouts/NotificationsPopover.mjs.map +1 -1
- package/dist/components/layouts/ProfilePopover.mjs +7 -6
- package/dist/components/layouts/ProfilePopover.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/layouts/NotificationsPopover.tsx +64 -52
- package/src/components/layouts/ProfilePopover.tsx +9 -6
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState } from "react";
|
|
4
4
|
import { Bell } from "lucide-react";
|
|
5
|
-
import
|
|
5
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
6
|
+
import { Popover } from "../ui/overlay/Popover";
|
|
6
7
|
import { Button } from "../ui/buttons/Button";
|
|
7
8
|
import { NotificationItem } from "./NotificationItem";
|
|
8
9
|
import { cn } from "../../infra/utils/clsx";
|
|
@@ -21,7 +22,7 @@ function NotificationsPopover({
|
|
|
21
22
|
if (isOpen) setHasNewNotifications(false);
|
|
22
23
|
};
|
|
23
24
|
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
|
|
24
|
-
/* @__PURE__ */ jsx(
|
|
25
|
+
/* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { className: "cursor-pointer", children: /* @__PURE__ */ jsxs(
|
|
25
26
|
"div",
|
|
26
27
|
{
|
|
27
28
|
className: `relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`,
|
|
@@ -31,8 +32,8 @@ function NotificationsPopover({
|
|
|
31
32
|
]
|
|
32
33
|
}
|
|
33
34
|
) }),
|
|
34
|
-
/* @__PURE__ */ jsxs(
|
|
35
|
-
|
|
35
|
+
/* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
36
|
+
PopoverPrimitive.Content,
|
|
36
37
|
{
|
|
37
38
|
className: cn(
|
|
38
39
|
"absolute bottom-2 left-[26px] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200",
|
|
@@ -68,7 +69,7 @@ function NotificationsPopover({
|
|
|
68
69
|
)
|
|
69
70
|
]
|
|
70
71
|
}
|
|
71
|
-
)
|
|
72
|
+
) })
|
|
72
73
|
] });
|
|
73
74
|
}
|
|
74
75
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/NotificationsPopover.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { ReactNode, useState } from 'react';\r\nimport { Bell } from 'lucide-react';\r\nimport { Popover
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/NotificationsPopover.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { ReactNode, useState } from 'react';\r\nimport { Bell } from 'lucide-react';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Popover } from '../ui/overlay/Popover';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { NotificationItem } from './NotificationItem';\r\nimport { cn } from '../../infra/utils/clsx';\r\n\r\nexport interface NotificationData {\r\n icon: ReactNode;\r\n iconBgColor: string;\r\n title: string;\r\n time: string;\r\n}\r\n\r\nexport interface NotificationsPopoverProps {\r\n notifications?: NotificationData[];\r\n onViewAll?: () => void;\r\n side?: 'top' | 'bottom' | 'left' | 'right';\r\n align?: 'start' | 'center' | 'end';\r\n contentClassName?: string;\r\n badgeClassName?: string;\r\n}\r\n\r\nfunction NotificationsPopover({\r\n notifications = [],\r\n onViewAll,\r\n side,\r\n align,\r\n contentClassName,\r\n badgeClassName = 'bg-pages-400',\r\n}: NotificationsPopoverProps) {\r\n const [open, setOpen] = useState(false);\r\n const [hasNewNotifications, setHasNewNotifications] = useState(true);\r\n\r\n const handleOpenChange = (isOpen: boolean) => {\r\n setOpen(isOpen);\r\n if (isOpen) setHasNewNotifications(false);\r\n };\r\n\r\n return (\r\n <Popover open={open} onOpenChange={handleOpenChange}>\r\n <PopoverPrimitive.Trigger className=\"cursor-pointer\">\r\n <div\r\n className={`relative rounded-full p-2.5 ${open ? 'bg-gray-100' : 'hover:bg-gray-100'}`}\r\n >\r\n <Bell size={20} className=\"text-gray-500\" />\r\n {hasNewNotifications && (\r\n <span className={cn('absolute top-2 right-2 size-2.5 rounded-full', badgeClassName)} />\r\n )}\r\n </div>\r\n </PopoverPrimitive.Trigger>\r\n <PopoverPrimitive.Portal>\r\n <PopoverPrimitive.Content\r\n className={cn(\r\n 'absolute bottom-2 left-[26px] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200',\r\n contentClassName\r\n )}\r\n side={side}\r\n align={align}\r\n sideOffset={8}\r\n >\r\n <span className=\"paragraph-small-semibold text-gray-950 px-4\">Últimas notificações</span>\r\n\r\n {notifications.length > 0 ? (\r\n notifications.map((notification, index) => (\r\n <NotificationItem\r\n key={index}\r\n icon={notification.icon}\r\n iconBgColor={notification.iconBgColor}\r\n title={notification.title}\r\n time={notification.time}\r\n showBorder={index < notifications.length - 1}\r\n />\r\n ))\r\n ) : (\r\n <div className=\"flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]\">\r\n <div className=\"bg-gray-50 rounded-md p-2.5\">\r\n <Bell size={20} color=\"var(--color-gray-950)\" />\r\n </div>\r\n <span className=\"paragraph-small-medium text-gray-950\">Sem notificações por enquanto</span>\r\n </div>\r\n )}\r\n\r\n {onViewAll && (\r\n <Button\r\n variant=\"secondary\"\r\n className=\"h-8! mt-2 mb-4 mx-4 paragraph-small-semibold\"\r\n onClick={onViewAll}\r\n >\r\n Todas as notificações\r\n </Button>\r\n )}\r\n </PopoverPrimitive.Content>\r\n </PopoverPrimitive.Portal>\r\n </Popover>\r\n );\r\n}\r\n\r\nexport { NotificationsPopover };\r\n"],"mappings":";AA6CQ,SAGE,KAHF;AA3CR,SAAoB,gBAAgB;AACpC,SAAS,YAAY;AACrB,YAAY,sBAAsB;AAClC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAkBnB,SAAS,qBAAqB;AAAA,EAC5B,gBAAgB,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,IAAI;AAEnE,QAAM,mBAAmB,CAAC,WAAoB;AAC5C,YAAQ,MAAM;AACd,QAAI,OAAQ,wBAAuB,KAAK;AAAA,EAC1C;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,kBACjC;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,WAAU,kBAClC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,+BAA+B,OAAO,gBAAgB,mBAAmB;AAAA,QAEpF;AAAA,8BAAC,QAAK,MAAM,IAAI,WAAU,iBAAgB;AAAA,UACzC,uBACC,oBAAC,UAAK,WAAW,GAAG,gDAAgD,cAAc,GAAG;AAAA;AAAA;AAAA,IAEzF,GACF;AAAA,IACA,oBAAC,iBAAiB,QAAjB,EACD;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QAEZ;AAAA,8BAAC,UAAK,WAAU,+CAA8C,2CAAoB;AAAA,UAEjF,cAAc,SAAS,IACtB,cAAc,IAAI,CAAC,cAAc,UAC/B;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,aAAa;AAAA,cACnB,aAAa,aAAa;AAAA,cAC1B,OAAO,aAAa;AAAA,cACpB,MAAM,aAAa;AAAA,cACnB,YAAY,QAAQ,cAAc,SAAS;AAAA;AAAA,YALtC;AAAA,UAMP,CACD,IAED,qBAAC,SAAI,WAAU,4DACb;AAAA,gCAAC,SAAI,WAAU,+BACb,8BAAC,QAAK,MAAM,IAAI,OAAM,yBAAwB,GAChD;AAAA,YACA,oBAAC,UAAK,WAAU,wCAAuC,iDAA6B;AAAA,aACtF;AAAA,UAGD,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cACV;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IAEJ,GACA;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState } from "react";
|
|
4
4
|
import { useRouter } from "next/navigation";
|
|
5
|
-
import
|
|
5
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
6
|
+
import { Popover } from "../ui/overlay/Popover";
|
|
6
7
|
import { Button } from "../ui/buttons/Button";
|
|
7
8
|
import { Progress } from "../ui/feedback/Progress";
|
|
8
9
|
import { Separator } from "../ui/data-display/Separator";
|
|
@@ -13,7 +14,7 @@ import { cn } from "../../infra/utils/clsx";
|
|
|
13
14
|
function ProfilePopover({
|
|
14
15
|
side = "top",
|
|
15
16
|
align = "start",
|
|
16
|
-
contentClassName,
|
|
17
|
+
contentClassName = "absolute bottom-2 left-[26px]",
|
|
17
18
|
onEditProfile,
|
|
18
19
|
credits,
|
|
19
20
|
onCreditsClick,
|
|
@@ -40,7 +41,7 @@ function ProfilePopover({
|
|
|
40
41
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
41
42
|
isLoggingOut && logoutOverlay,
|
|
42
43
|
/* @__PURE__ */ jsxs(Popover, { children: [
|
|
43
|
-
/* @__PURE__ */ jsx(
|
|
44
|
+
/* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { className: "cursor-pointer", children: user && /* @__PURE__ */ jsx(
|
|
44
45
|
UserAvatar,
|
|
45
46
|
{
|
|
46
47
|
photo: user.photo,
|
|
@@ -50,8 +51,8 @@ function ProfilePopover({
|
|
|
50
51
|
},
|
|
51
52
|
user.id
|
|
52
53
|
) }),
|
|
53
|
-
/* @__PURE__ */ jsxs(
|
|
54
|
-
|
|
54
|
+
/* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
55
|
+
PopoverPrimitive.Content,
|
|
55
56
|
{
|
|
56
57
|
className: cn(
|
|
57
58
|
"w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99",
|
|
@@ -131,7 +132,7 @@ function ProfilePopover({
|
|
|
131
132
|
] })
|
|
132
133
|
]
|
|
133
134
|
}
|
|
134
|
-
)
|
|
135
|
+
) })
|
|
135
136
|
] })
|
|
136
137
|
] });
|
|
137
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 { Popover
|
|
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 { Button } from '../ui/buttons/Button';\r\nimport { Progress } from '../ui/feedback/Progress';\r\nimport { Separator } from '../ui/data-display/Separator';\r\nimport { NavBarItem } from './NavBarItem';\r\nimport { UserAvatar } from '../ui/data-display/UserAvatar';\r\nimport { useAuth } from '../../providers/auth.provider';\r\nimport { cn } from '../../infra/utils/clsx';\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 credits?: { used: number; total: number };\r\n onCreditsClick?: () => void;\r\n menuItems?: ProfileMenuItem[];\r\n logoutRedirect?: string;\r\n storageUrl?: string;\r\n logoutOverlay?: React.ReactNode;\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 credits,\r\n onCreditsClick,\r\n menuItems = [],\r\n logoutRedirect = '/login',\r\n storageUrl,\r\n logoutOverlay,\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 handleLogout = async () => {\r\n try {\r\n setIsLoggingOut(true);\r\n await logout();\r\n router.push(logoutRedirect);\r\n } catch (error) {\r\n console.error('Erro ao fazer logout:', error);\r\n } finally {\r\n setIsLoggingOut(false);\r\n }\r\n };\r\n\r\n const creditsPercentage =\r\n credits && credits.total > 0\r\n ? (credits.used / credits.total) * 100\r\n : 0;\r\n\r\n return (\r\n <>\r\n {isLoggingOut && logoutOverlay}\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 storageUrl={storageUrl}\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_auto] 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 storageUrl={storageUrl}\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\r\n {onEditProfile && (\r\n <Button\r\n variant=\"secondary\"\r\n className=\"paragraph-small-semibold h-8! whitespace-nowrap px-3 w-fit\"\r\n onClick={onEditProfile}\r\n >\r\n Editar Perfil\r\n </Button>\r\n )}\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 {credits && (\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 {credits.used.toLocaleString('pt-BR')}/\r\n {credits.total.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 <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
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
"use client"
|
|
1
|
+
"use client";
|
|
2
2
|
|
|
3
|
-
import { ReactNode, useState } from
|
|
4
|
-
import { Bell } from
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
3
|
+
import { ReactNode, useState } from "react";
|
|
4
|
+
import { Bell } from "lucide-react";
|
|
5
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
6
|
+
import { Popover } from "../ui/overlay/Popover";
|
|
7
|
+
import { Button } from "../ui/buttons/Button";
|
|
8
|
+
import { NotificationItem } from "./NotificationItem";
|
|
9
|
+
import { cn } from "../../infra/utils/clsx";
|
|
9
10
|
|
|
10
11
|
export interface NotificationData {
|
|
11
12
|
icon: ReactNode;
|
|
@@ -17,8 +18,8 @@ export interface NotificationData {
|
|
|
17
18
|
export interface NotificationsPopoverProps {
|
|
18
19
|
notifications?: NotificationData[];
|
|
19
20
|
onViewAll?: () => void;
|
|
20
|
-
side?:
|
|
21
|
-
align?:
|
|
21
|
+
side?: "top" | "bottom" | "left" | "right";
|
|
22
|
+
align?: "start" | "center" | "end";
|
|
22
23
|
contentClassName?: string;
|
|
23
24
|
badgeClassName?: string;
|
|
24
25
|
}
|
|
@@ -29,7 +30,7 @@ function NotificationsPopover({
|
|
|
29
30
|
side,
|
|
30
31
|
align,
|
|
31
32
|
contentClassName,
|
|
32
|
-
badgeClassName =
|
|
33
|
+
badgeClassName = "bg-pages-400",
|
|
33
34
|
}: NotificationsPopoverProps) {
|
|
34
35
|
const [open, setOpen] = useState(false);
|
|
35
36
|
const [hasNewNotifications, setHasNewNotifications] = useState(true);
|
|
@@ -41,57 +42,68 @@ function NotificationsPopover({
|
|
|
41
42
|
|
|
42
43
|
return (
|
|
43
44
|
<Popover open={open} onOpenChange={handleOpenChange}>
|
|
44
|
-
<
|
|
45
|
+
<PopoverPrimitive.Trigger className="cursor-pointer">
|
|
45
46
|
<div
|
|
46
|
-
className={`relative rounded-full p-2.5 ${open ?
|
|
47
|
+
className={`relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`}
|
|
47
48
|
>
|
|
48
49
|
<Bell size={20} className="text-gray-500" />
|
|
49
50
|
{hasNewNotifications && (
|
|
50
|
-
<span
|
|
51
|
+
<span
|
|
52
|
+
className={cn(
|
|
53
|
+
"absolute top-2 right-2 size-2.5 rounded-full",
|
|
54
|
+
badgeClassName,
|
|
55
|
+
)}
|
|
56
|
+
/>
|
|
51
57
|
)}
|
|
52
58
|
</div>
|
|
53
|
-
</
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
</PopoverPrimitive.Trigger>
|
|
60
|
+
<PopoverPrimitive.Portal>
|
|
61
|
+
<PopoverPrimitive.Content
|
|
62
|
+
className={cn(
|
|
63
|
+
"absolute bottom-2 left-[26px] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200",
|
|
64
|
+
contentClassName,
|
|
65
|
+
)}
|
|
66
|
+
side={side}
|
|
67
|
+
align={align}
|
|
68
|
+
sideOffset={8}
|
|
69
|
+
>
|
|
70
|
+
<span className="paragraph-small-semibold text-gray-950 px-4">
|
|
71
|
+
Últimas notificações
|
|
72
|
+
</span>
|
|
64
73
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
74
|
+
{notifications.length > 0 ? (
|
|
75
|
+
notifications.map((notification, index) => (
|
|
76
|
+
<NotificationItem
|
|
77
|
+
key={index}
|
|
78
|
+
icon={notification.icon}
|
|
79
|
+
iconBgColor={notification.iconBgColor}
|
|
80
|
+
title={notification.title}
|
|
81
|
+
time={notification.time}
|
|
82
|
+
showBorder={index < notifications.length - 1}
|
|
83
|
+
/>
|
|
84
|
+
))
|
|
85
|
+
) : (
|
|
86
|
+
<div className="flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]">
|
|
87
|
+
<div className="bg-gray-50 rounded-md p-2.5">
|
|
88
|
+
<Bell size={20} color="var(--color-gray-950)" />
|
|
89
|
+
</div>
|
|
90
|
+
<span className="paragraph-small-medium text-gray-950">
|
|
91
|
+
Sem notificações por enquanto
|
|
92
|
+
</span>
|
|
80
93
|
</div>
|
|
81
|
-
|
|
82
|
-
</div>
|
|
83
|
-
)}
|
|
94
|
+
)}
|
|
84
95
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
96
|
+
{onViewAll && (
|
|
97
|
+
<Button
|
|
98
|
+
variant="secondary"
|
|
99
|
+
className="h-8! mt-2 mb-4 mx-4 paragraph-small-semibold"
|
|
100
|
+
onClick={onViewAll}
|
|
101
|
+
>
|
|
102
|
+
Todas as notificações
|
|
103
|
+
</Button>
|
|
104
|
+
)}
|
|
105
|
+
</PopoverPrimitive.Content>
|
|
106
|
+
</PopoverPrimitive.Portal>
|
|
95
107
|
</Popover>
|
|
96
108
|
);
|
|
97
109
|
}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { useRouter } from 'next/navigation';
|
|
5
|
-
import
|
|
5
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
6
|
+
import { Popover } from '../ui/overlay/Popover';
|
|
6
7
|
import { Button } from '../ui/buttons/Button';
|
|
7
8
|
import { Progress } from '../ui/feedback/Progress';
|
|
8
9
|
import { Separator } from '../ui/data-display/Separator';
|
|
@@ -33,7 +34,7 @@ export interface ProfilePopoverProps {
|
|
|
33
34
|
function ProfilePopover({
|
|
34
35
|
side = 'top',
|
|
35
36
|
align = 'start',
|
|
36
|
-
contentClassName,
|
|
37
|
+
contentClassName = 'absolute bottom-2 left-[26px]',
|
|
37
38
|
onEditProfile,
|
|
38
39
|
credits,
|
|
39
40
|
onCreditsClick,
|
|
@@ -67,7 +68,7 @@ function ProfilePopover({
|
|
|
67
68
|
<>
|
|
68
69
|
{isLoggingOut && logoutOverlay}
|
|
69
70
|
<Popover>
|
|
70
|
-
<
|
|
71
|
+
<PopoverPrimitive.Trigger className="cursor-pointer">
|
|
71
72
|
{user && (
|
|
72
73
|
<UserAvatar
|
|
73
74
|
key={user.id}
|
|
@@ -77,9 +78,10 @@ function ProfilePopover({
|
|
|
77
78
|
storageUrl={storageUrl}
|
|
78
79
|
/>
|
|
79
80
|
)}
|
|
80
|
-
</
|
|
81
|
+
</PopoverPrimitive.Trigger>
|
|
81
82
|
|
|
82
|
-
<
|
|
83
|
+
<PopoverPrimitive.Portal>
|
|
84
|
+
<PopoverPrimitive.Content
|
|
83
85
|
className={cn(
|
|
84
86
|
'w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99',
|
|
85
87
|
contentClassName
|
|
@@ -162,7 +164,8 @@ function ProfilePopover({
|
|
|
162
164
|
<NavBarItem label="Sair" onClick={handleLogout} />
|
|
163
165
|
</div>
|
|
164
166
|
</div>
|
|
165
|
-
</
|
|
167
|
+
</PopoverPrimitive.Content>
|
|
168
|
+
</PopoverPrimitive.Portal>
|
|
166
169
|
</Popover>
|
|
167
170
|
</>
|
|
168
171
|
);
|