@greatapps/common 1.1.780 → 1.1.782
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/AppMobileNavBar.mjs +64 -5
- package/dist/components/layouts/AppMobileNavBar.mjs.map +1 -1
- package/dist/components/layouts/AppNavBar.mjs +2 -0
- package/dist/components/layouts/AppNavBar.mjs.map +1 -1
- package/dist/components/layouts/GreatDomainIcon.mjs +40 -0
- package/dist/components/layouts/GreatDomainIcon.mjs.map +1 -0
- package/dist/components/layouts/NavBar.mjs +109 -52
- package/dist/components/layouts/NavBar.mjs.map +1 -1
- package/dist/i18n/messages/en-us.mjs +3 -1
- package/dist/i18n/messages/en-us.mjs.map +1 -1
- package/dist/i18n/messages/es-es.mjs +3 -1
- package/dist/i18n/messages/es-es.mjs.map +1 -1
- package/dist/i18n/messages/pt-br.mjs +3 -1
- package/dist/i18n/messages/pt-br.mjs.map +1 -1
- package/package.json +7 -8
- package/src/components/layouts/AppMobileNavBar.tsx +90 -6
- package/src/components/layouts/AppNavBar.tsx +5 -1
- package/src/components/layouts/GreatDomainIcon.tsx +43 -0
- package/src/components/layouts/NavBar.tsx +158 -66
- package/src/i18n/messages/en-us.ts +2 -0
- package/src/i18n/messages/es-es.ts +2 -0
- package/src/i18n/messages/pt-br.ts +2 -0
- package/src/modules/plans/hooks/use-plan-by-id.hook.ts +1 -1
|
@@ -6,6 +6,7 @@ import Link from "next/link";
|
|
|
6
6
|
import { useTranslations } from "next-intl";
|
|
7
7
|
import { IconChevronRight } from "@tabler/icons-react";
|
|
8
8
|
import { Separator } from "../ui/data-display/Separator";
|
|
9
|
+
import { GreatDomainIcon } from "./GreatDomainIcon";
|
|
9
10
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
|
|
10
11
|
import {
|
|
11
12
|
useDesktopSidebarStore,
|
|
@@ -20,7 +21,9 @@ import { cn } from "../../infra/utils/clsx";
|
|
|
20
21
|
type NavBarProps = {
|
|
21
22
|
logoHref: string;
|
|
22
23
|
appIconHref: string;
|
|
23
|
-
|
|
24
|
+
/** Sem href o ícone do GreatDomain não é renderizado: é a flag do app. */
|
|
25
|
+
domainIconHref?: string;
|
|
26
|
+
activeApp?: "gapps" | "gpages" | "gdomain";
|
|
24
27
|
showExpandButton?: boolean;
|
|
25
28
|
onExpandClick?: () => void;
|
|
26
29
|
children?: React.ReactNode;
|
|
@@ -30,6 +33,7 @@ type NavBarProps = {
|
|
|
30
33
|
function NavBar({
|
|
31
34
|
logoHref,
|
|
32
35
|
appIconHref,
|
|
36
|
+
domainIconHref,
|
|
33
37
|
activeApp,
|
|
34
38
|
showExpandButton = false,
|
|
35
39
|
onExpandClick,
|
|
@@ -130,7 +134,9 @@ function NavBar({
|
|
|
130
134
|
<IconChevronRight size={16} className="text-gray-500" />
|
|
131
135
|
</button>
|
|
132
136
|
</TooltipTrigger>
|
|
133
|
-
<TooltipContent side="right">
|
|
137
|
+
<TooltipContent side="right">
|
|
138
|
+
{translate("common.layout.navbar.expandMenu")}
|
|
139
|
+
</TooltipContent>
|
|
134
140
|
</Tooltip>
|
|
135
141
|
)}
|
|
136
142
|
{/* Desktop expand button */}
|
|
@@ -144,78 +150,164 @@ function NavBar({
|
|
|
144
150
|
<IconChevronRight size={16} className="text-gray-500" />
|
|
145
151
|
</button>
|
|
146
152
|
</TooltipTrigger>
|
|
147
|
-
<TooltipContent side="right">
|
|
153
|
+
<TooltipContent side="right">
|
|
154
|
+
{translate("common.layout.navbar.expandMenu")}
|
|
155
|
+
</TooltipContent>
|
|
148
156
|
</Tooltip>
|
|
149
157
|
)}
|
|
150
158
|
</div>
|
|
151
159
|
|
|
152
|
-
{/*
|
|
153
|
-
<div className="
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
160
|
+
{/* Ícones de app — 8px entre eles (Figma 5929:2676) */}
|
|
161
|
+
<div className="flex flex-col gap-2 items-center">
|
|
162
|
+
{/* GreatPages icon */}
|
|
163
|
+
<div className="relative">
|
|
164
|
+
<Tooltip>
|
|
165
|
+
<TooltipTrigger asChild>
|
|
166
|
+
<Link
|
|
167
|
+
href={appIconHref}
|
|
168
|
+
className={cn(
|
|
169
|
+
"size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
|
|
170
|
+
activeApp === "gpages"
|
|
171
|
+
? isDefaultWl
|
|
172
|
+
? "bg-cyan-100 border-white ring-cyan-300"
|
|
173
|
+
: "border-white ring-transparent"
|
|
174
|
+
: isDefaultWl
|
|
175
|
+
? "hover:bg-gray-100 border-transparent ring-transparent"
|
|
176
|
+
: "border-transparent ring-transparent",
|
|
177
|
+
)}
|
|
178
|
+
style={
|
|
179
|
+
!isDefaultWl
|
|
180
|
+
? {
|
|
181
|
+
backgroundColor: primaryColor,
|
|
182
|
+
boxShadow:
|
|
183
|
+
activeApp === "gpages"
|
|
184
|
+
? `0 0 0 2px ${primaryColor}40`
|
|
185
|
+
: undefined,
|
|
186
|
+
opacity: activeApp !== "gpages" ? 0.2 : undefined,
|
|
187
|
+
}
|
|
188
|
+
: undefined
|
|
189
|
+
}
|
|
190
|
+
>
|
|
191
|
+
{isDefaultWl ? (
|
|
192
|
+
<Image
|
|
193
|
+
src="/icons/icon-navbar.svg"
|
|
194
|
+
alt="GreatPages"
|
|
195
|
+
width={24}
|
|
196
|
+
height={24}
|
|
197
|
+
/>
|
|
198
|
+
) : (
|
|
199
|
+
<svg
|
|
200
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
201
|
+
width="24"
|
|
202
|
+
height="24"
|
|
203
|
+
viewBox="0 0 24 24"
|
|
204
|
+
fill="none"
|
|
205
|
+
stroke="white"
|
|
206
|
+
strokeWidth="2"
|
|
207
|
+
strokeLinecap="round"
|
|
208
|
+
strokeLinejoin="round"
|
|
209
|
+
>
|
|
210
|
+
<path d="M4 8h16" />
|
|
211
|
+
<path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" />
|
|
212
|
+
<path d="M8 4v4" />
|
|
213
|
+
</svg>
|
|
214
|
+
)}
|
|
215
|
+
</Link>
|
|
216
|
+
</TooltipTrigger>
|
|
217
|
+
<TooltipContent side="right">
|
|
218
|
+
{isDefaultWl
|
|
219
|
+
? translate("common.layout.navbar.greatPages")
|
|
220
|
+
: translate("common.layout.navbar.pages")}
|
|
221
|
+
</TooltipContent>
|
|
222
|
+
</Tooltip>
|
|
223
|
+
<div
|
|
224
|
+
className={cn(
|
|
225
|
+
"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
|
|
226
|
+
isDefaultWl ? "bg-cyan-300" : "",
|
|
227
|
+
activeApp === "gpages" ? "opacity-100" : "opacity-0",
|
|
228
|
+
)}
|
|
229
|
+
style={
|
|
230
|
+
!isDefaultWl ? { backgroundColor: primaryColor } : undefined
|
|
231
|
+
}
|
|
232
|
+
/>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
{/* GreatDomain icon */}
|
|
236
|
+
{domainIconHref ? (
|
|
237
|
+
<div className="relative">
|
|
238
|
+
<Tooltip>
|
|
239
|
+
<TooltipTrigger asChild>
|
|
240
|
+
<Link
|
|
241
|
+
href={domainIconHref}
|
|
242
|
+
aria-label={
|
|
243
|
+
isDefaultWl
|
|
244
|
+
? translate("common.layout.navbar.greatDomain")
|
|
245
|
+
: translate("common.layout.navbar.domains")
|
|
246
|
+
}
|
|
247
|
+
className={cn(
|
|
248
|
+
"size-10 rounded-[10px] cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
|
|
249
|
+
activeApp === "gdomain"
|
|
250
|
+
? isDefaultWl
|
|
251
|
+
? "bg-[#EDE9FE] border-white ring-[#C092FF]"
|
|
252
|
+
: "border-white ring-transparent"
|
|
253
|
+
: isDefaultWl
|
|
254
|
+
? "hover:bg-gray-100 border-transparent ring-transparent"
|
|
255
|
+
: "border-transparent ring-transparent",
|
|
256
|
+
)}
|
|
257
|
+
style={
|
|
258
|
+
!isDefaultWl
|
|
259
|
+
? {
|
|
260
|
+
backgroundColor: primaryColor,
|
|
261
|
+
boxShadow:
|
|
262
|
+
activeApp === "gdomain"
|
|
263
|
+
? `0 0 0 2px ${primaryColor}40`
|
|
264
|
+
: undefined,
|
|
265
|
+
opacity: activeApp !== "gdomain" ? 0.2 : undefined,
|
|
266
|
+
}
|
|
267
|
+
: undefined
|
|
268
|
+
}
|
|
269
|
+
>
|
|
270
|
+
{isDefaultWl ? (
|
|
271
|
+
<GreatDomainIcon active={activeApp === "gdomain"} />
|
|
272
|
+
) : (
|
|
273
|
+
<svg
|
|
274
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
275
|
+
width="24"
|
|
276
|
+
height="24"
|
|
277
|
+
viewBox="0 0 24 24"
|
|
278
|
+
fill="none"
|
|
279
|
+
stroke="white"
|
|
280
|
+
strokeWidth="2"
|
|
281
|
+
strokeLinecap="round"
|
|
282
|
+
strokeLinejoin="round"
|
|
283
|
+
>
|
|
284
|
+
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
|
|
285
|
+
<path d="M3.6 9h16.8" />
|
|
286
|
+
<path d="M3.6 15h16.8" />
|
|
287
|
+
<path d="M11.5 3a17 17 0 0 0 0 18" />
|
|
288
|
+
<path d="M12.5 3a17 17 0 0 1 0 18" />
|
|
289
|
+
</svg>
|
|
290
|
+
)}
|
|
291
|
+
</Link>
|
|
292
|
+
</TooltipTrigger>
|
|
293
|
+
<TooltipContent side="right">
|
|
294
|
+
{isDefaultWl
|
|
295
|
+
? translate("common.layout.navbar.greatDomain")
|
|
296
|
+
: translate("common.layout.navbar.domains")}
|
|
297
|
+
</TooltipContent>
|
|
298
|
+
</Tooltip>
|
|
299
|
+
<div
|
|
158
300
|
className={cn(
|
|
159
|
-
"
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
? "bg-cyan-100 border-white ring-cyan-300"
|
|
163
|
-
: "border-white ring-transparent"
|
|
164
|
-
: isDefaultWl
|
|
165
|
-
? "hover:bg-gray-100 border-transparent ring-transparent"
|
|
166
|
-
: "border-transparent ring-transparent",
|
|
301
|
+
"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
|
|
302
|
+
isDefaultWl ? "bg-[#984DFF]" : "",
|
|
303
|
+
activeApp === "gdomain" ? "opacity-100" : "opacity-0",
|
|
167
304
|
)}
|
|
168
305
|
style={
|
|
169
|
-
!isDefaultWl
|
|
170
|
-
? {
|
|
171
|
-
backgroundColor: primaryColor,
|
|
172
|
-
boxShadow:
|
|
173
|
-
activeApp === "gpages"
|
|
174
|
-
? `0 0 0 2px ${primaryColor}40`
|
|
175
|
-
: undefined,
|
|
176
|
-
opacity: activeApp !== "gpages" ? 0.2 : undefined,
|
|
177
|
-
}
|
|
178
|
-
: undefined
|
|
306
|
+
!isDefaultWl ? { backgroundColor: primaryColor } : undefined
|
|
179
307
|
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
src="/icons/icon-navbar.svg"
|
|
184
|
-
alt="GreatPages"
|
|
185
|
-
width={24}
|
|
186
|
-
height={24}
|
|
187
|
-
/>
|
|
188
|
-
) : (
|
|
189
|
-
<svg
|
|
190
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
191
|
-
width="24"
|
|
192
|
-
height="24"
|
|
193
|
-
viewBox="0 0 24 24"
|
|
194
|
-
fill="none"
|
|
195
|
-
stroke="white"
|
|
196
|
-
strokeWidth="2"
|
|
197
|
-
strokeLinecap="round"
|
|
198
|
-
strokeLinejoin="round"
|
|
199
|
-
>
|
|
200
|
-
<path d="M4 8h16" />
|
|
201
|
-
<path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" />
|
|
202
|
-
<path d="M8 4v4" />
|
|
203
|
-
</svg>
|
|
204
|
-
)}
|
|
205
|
-
</Link>
|
|
206
|
-
</TooltipTrigger>
|
|
207
|
-
<TooltipContent side="right">
|
|
208
|
-
{isDefaultWl ? translate('common.layout.navbar.greatPages') : translate('common.layout.navbar.pages')}
|
|
209
|
-
</TooltipContent>
|
|
210
|
-
</Tooltip>
|
|
211
|
-
<div
|
|
212
|
-
className={cn(
|
|
213
|
-
"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
|
|
214
|
-
isDefaultWl ? "bg-cyan-300" : "",
|
|
215
|
-
activeApp === "gpages" ? "opacity-100" : "opacity-0",
|
|
216
|
-
)}
|
|
217
|
-
style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
|
|
218
|
-
/>
|
|
308
|
+
/>
|
|
309
|
+
</div>
|
|
310
|
+
) : null}
|
|
219
311
|
</div>
|
|
220
312
|
</div>
|
|
221
313
|
|
|
@@ -11,7 +11,7 @@ export function usePlanById(idPlan?: number | string | null) {
|
|
|
11
11
|
const queryClient = useQueryClient();
|
|
12
12
|
const plansKey = useAuthQueryKey([...PLANS_QUERY_KEY]);
|
|
13
13
|
|
|
14
|
-
return useQuery({
|
|
14
|
+
return useQuery<SuccessResult<Plan>>({
|
|
15
15
|
queryKey: [...plansKey, idPlan],
|
|
16
16
|
queryFn: ({ signal }) =>
|
|
17
17
|
apiFetch<SuccessResult<Plan>>(`/api/plans/${idPlan}`, { signal }),
|