@greatapps/common 1.1.94 → 1.1.95
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.
|
@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import Image from "next/image";
|
|
4
4
|
import { ProfilePopover } from "./ProfilePopover";
|
|
5
5
|
import { useAccountModals } from "../../store/useAccountModals";
|
|
6
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
|
|
6
7
|
function AppMobileNavBar({
|
|
7
8
|
appIconActive = false,
|
|
8
9
|
appIconIndicator = false,
|
|
@@ -17,26 +18,32 @@ function AppMobileNavBar({
|
|
|
17
18
|
const { openConfigurations } = useAccountModals();
|
|
18
19
|
return /* @__PURE__ */ jsxs("div", { className: "fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200", children: [
|
|
19
20
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
|
|
20
|
-
/* @__PURE__ */ jsxs(
|
|
21
|
-
|
|
22
|
-
{
|
|
23
|
-
className: `relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? "cursor-pointer hover:bg-gray-100" : ""}`,
|
|
24
|
-
onClick: onLogoClick,
|
|
25
|
-
children: [
|
|
26
|
-
/* @__PURE__ */ jsx(Image, { src: "/icons/great-icon.svg", alt: "GreatApps", width: 28, height: 28 }),
|
|
27
|
-
logoIndicator && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" })
|
|
28
|
-
]
|
|
29
|
-
}
|
|
30
|
-
),
|
|
31
|
-
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
32
|
-
/* @__PURE__ */ jsx(
|
|
21
|
+
/* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
22
|
+
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
33
23
|
"div",
|
|
34
24
|
{
|
|
35
|
-
className: `size-10 flex items-center justify-center rounded-lg transition-colors
|
|
36
|
-
onClick:
|
|
37
|
-
children:
|
|
25
|
+
className: `relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? "cursor-pointer hover:bg-gray-100" : ""}`,
|
|
26
|
+
onClick: onLogoClick,
|
|
27
|
+
children: [
|
|
28
|
+
/* @__PURE__ */ jsx(Image, { src: "/icons/great-icon.svg", alt: "GreatApps", width: 28, height: 28 }),
|
|
29
|
+
logoIndicator && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" })
|
|
30
|
+
]
|
|
38
31
|
}
|
|
39
|
-
),
|
|
32
|
+
) }),
|
|
33
|
+
/* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "GreatApps" })
|
|
34
|
+
] }),
|
|
35
|
+
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
36
|
+
/* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
37
|
+
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
className: `size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${appIconActive ? "bg-pages-300" : "bg-pages-50"} ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`,
|
|
41
|
+
onClick: onAppIconClick,
|
|
42
|
+
children: /* @__PURE__ */ jsx(Image, { src: "/icons/icon-navbar.svg", alt: "GreatPages", width: 24, height: 24 })
|
|
43
|
+
}
|
|
44
|
+
) }),
|
|
45
|
+
/* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "GreatPages" })
|
|
46
|
+
] }),
|
|
40
47
|
appIconIndicator && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl" })
|
|
41
48
|
] }),
|
|
42
49
|
extraLeftSlot
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\nimport Image from 'next/image';\nimport { ProfilePopover } from './ProfilePopover';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\n\nexport interface AppMobileNavBarProps {\n appIconActive?: boolean;\n /** Shows the colored indicator bar below the app icon */\n appIconIndicator?: boolean;\n /** Shows the gray indicator bar below the GreatApps logo */\n logoIndicator?: boolean;\n /** Called when the GreatApps logo is clicked */\n onLogoClick?: () => void;\n /** Called when the app icon (e.g. GreatPages) is clicked */\n onAppIconClick?: () => void;\n /** Extra slot rendered after the app icon (e.g. project selector) */\n extraLeftSlot?: ReactNode;\n /** Required: the right-side action element (toggle button, sheet button, etc.) */\n rightActionSlot: ReactNode;\n menuItems?: ProfileMenuItem[];\n onCreditsClick?: () => void;\n}\n\nexport function AppMobileNavBar({\n appIconActive = false,\n appIconIndicator = false,\n logoIndicator = false,\n onLogoClick,\n onAppIconClick,\n extraLeftSlot,\n rightActionSlot,\n menuItems = [],\n onCreditsClick,\n}: AppMobileNavBarProps) {\n const { openConfigurations } = useAccountModals();\n\n return (\n <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n <div className=\"flex items-center gap-1.5\">\n <div\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\nimport Image from 'next/image';\nimport { ProfilePopover } from './ProfilePopover';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\n\nexport interface AppMobileNavBarProps {\n appIconActive?: boolean;\n /** Shows the colored indicator bar below the app icon */\n appIconIndicator?: boolean;\n /** Shows the gray indicator bar below the GreatApps logo */\n logoIndicator?: boolean;\n /** Called when the GreatApps logo is clicked */\n onLogoClick?: () => void;\n /** Called when the app icon (e.g. GreatPages) is clicked */\n onAppIconClick?: () => void;\n /** Extra slot rendered after the app icon (e.g. project selector) */\n extraLeftSlot?: ReactNode;\n /** Required: the right-side action element (toggle button, sheet button, etc.) */\n rightActionSlot: ReactNode;\n menuItems?: ProfileMenuItem[];\n onCreditsClick?: () => void;\n}\n\nexport function AppMobileNavBar({\n appIconActive = false,\n appIconIndicator = false,\n logoIndicator = false,\n onLogoClick,\n onAppIconClick,\n extraLeftSlot,\n rightActionSlot,\n menuItems = [],\n onCreditsClick,\n}: AppMobileNavBarProps) {\n const { openConfigurations } = useAccountModals();\n\n return (\n <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n <div className=\"flex items-center gap-1.5\">\n <Tooltip>\n <TooltipTrigger asChild>\n <div\n className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? 'cursor-pointer hover:bg-gray-100' : ''}`}\n onClick={onLogoClick}\n >\n <Image src=\"/icons/great-icon.svg\" alt=\"GreatApps\" width={28} height={28} />\n {logoIndicator && (\n <div className=\"absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl\" />\n )}\n </div>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">GreatApps</TooltipContent>\n </Tooltip>\n <div className=\"relative\">\n <Tooltip>\n <TooltipTrigger asChild>\n <div\n className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${\n appIconActive ? 'bg-pages-300' : 'bg-pages-50'\n } ${onAppIconClick ? 'cursor-pointer hover:opacity-80' : ''}`}\n onClick={onAppIconClick}\n >\n <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n </div>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">GreatPages</TooltipContent>\n </Tooltip>\n {appIconIndicator && (\n <div className=\"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl\" />\n )}\n </div>\n {extraLeftSlot}\n </div>\n <div className=\"flex items-center gap-1.5\">\n <ProfilePopover\n side=\"bottom\"\n align=\"end\"\n contentClassName=\"\"\n onEditProfile={() => openConfigurations()}\n onCreditsClick={onCreditsClick}\n menuItems={menuItems}\n />\n {rightActionSlot}\n </div>\n </div>\n );\n}\n"],"mappings":";AA6CY,SAIE,KAJF;AA1CZ,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAEjC,SAAS,SAAS,gBAAgB,sBAAsB;AAoBjD,SAAS,gBAAgB;AAAA,EAC9B,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAyB;AACvB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,SACE,qBAAC,SAAI,WAAU,qHACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA,2BAAC,WACC;AAAA,4BAAC,kBAAe,SAAO,MACrB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,kFAAkF,cAAc,qCAAqC,EAAE;AAAA,YAClJ,SAAS;AAAA,YAET;AAAA,kCAAC,SAAM,KAAI,yBAAwB,KAAI,aAAY,OAAO,IAAI,QAAQ,IAAI;AAAA,cACzE,iBACC,oBAAC,SAAI,WAAU,0FAAyF;AAAA;AAAA;AAAA,QAE5G,GACF;AAAA,QACA,oBAAC,kBAAe,MAAK,UAAS,uBAAS;AAAA,SACzC;AAAA,MACA,qBAAC,SAAI,WAAU,YACb;AAAA,6BAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,sFACT,gBAAgB,iBAAiB,aACnC,IAAI,iBAAiB,oCAAoC,EAAE;AAAA,cAC3D,SAAS;AAAA,cAET,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,UAC9E,GACF;AAAA,UACA,oBAAC,kBAAe,MAAK,UAAS,wBAAU;AAAA,WAC1C;AAAA,QACC,oBACC,oBAAC,SAAI,WAAU,2FAA0F;AAAA,SAE7G;AAAA,MACC;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB,eAAe,MAAM,mBAAmB;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
|
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@ import Image from 'next/image';
|
|
|
5
5
|
import { ProfilePopover } from './ProfilePopover';
|
|
6
6
|
import { useAccountModals } from '../../store/useAccountModals';
|
|
7
7
|
import type { ProfileMenuItem } from './ProfilePopover';
|
|
8
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';
|
|
8
9
|
|
|
9
10
|
export interface AppMobileNavBarProps {
|
|
10
11
|
appIconActive?: boolean;
|
|
@@ -40,24 +41,34 @@ export function AppMobileNavBar({
|
|
|
40
41
|
return (
|
|
41
42
|
<div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
|
|
42
43
|
<div className="flex items-center gap-1.5">
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
44
|
+
<Tooltip>
|
|
45
|
+
<TooltipTrigger asChild>
|
|
46
|
+
<div
|
|
47
|
+
className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? 'cursor-pointer hover:bg-gray-100' : ''}`}
|
|
48
|
+
onClick={onLogoClick}
|
|
49
|
+
>
|
|
50
|
+
<Image src="/icons/great-icon.svg" alt="GreatApps" width={28} height={28} />
|
|
51
|
+
{logoIndicator && (
|
|
52
|
+
<div className="absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" />
|
|
53
|
+
)}
|
|
54
|
+
</div>
|
|
55
|
+
</TooltipTrigger>
|
|
56
|
+
<TooltipContent side="bottom">GreatApps</TooltipContent>
|
|
57
|
+
</Tooltip>
|
|
52
58
|
<div className="relative">
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
<Tooltip>
|
|
60
|
+
<TooltipTrigger asChild>
|
|
61
|
+
<div
|
|
62
|
+
className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${
|
|
63
|
+
appIconActive ? 'bg-pages-300' : 'bg-pages-50'
|
|
64
|
+
} ${onAppIconClick ? 'cursor-pointer hover:opacity-80' : ''}`}
|
|
65
|
+
onClick={onAppIconClick}
|
|
66
|
+
>
|
|
67
|
+
<Image src="/icons/icon-navbar.svg" alt="GreatPages" width={24} height={24} />
|
|
68
|
+
</div>
|
|
69
|
+
</TooltipTrigger>
|
|
70
|
+
<TooltipContent side="bottom">GreatPages</TooltipContent>
|
|
71
|
+
</Tooltip>
|
|
61
72
|
{appIconIndicator && (
|
|
62
73
|
<div className="absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl" />
|
|
63
74
|
)}
|