@logickernel/bridge 0.5.0 → 0.6.0
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/README.md +199 -1
- package/dist/next/components.cjs +1348 -0
- package/dist/next/components.cjs.map +1 -0
- package/dist/next/components.d.cts +104 -0
- package/dist/next/components.d.ts +104 -0
- package/dist/next/components.js +1313 -0
- package/dist/next/components.js.map +1 -0
- package/dist/next/index.cjs +1341 -0
- package/dist/next/index.cjs.map +1 -1
- package/dist/next/index.d.cts +4 -0
- package/dist/next/index.d.ts +4 -0
- package/dist/next/index.js +1308 -1
- package/dist/next/index.js.map +1 -1
- package/package.json +42 -3
|
@@ -0,0 +1,1313 @@
|
|
|
1
|
+
import * as React2 from 'react';
|
|
2
|
+
import { useState, useEffect } from 'react';
|
|
3
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import * as LucideIcons from 'lucide-react';
|
|
6
|
+
import { ChevronRight, ChevronsUpDown, BadgeCheck, LogOut, GalleryVerticalEnd, Check, PanelLeftIcon, XIcon } from 'lucide-react';
|
|
7
|
+
import { clsx } from 'clsx';
|
|
8
|
+
import { twMerge } from 'tailwind-merge';
|
|
9
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
10
|
+
import '@radix-ui/react-separator';
|
|
11
|
+
import * as SheetPrimitive from '@radix-ui/react-dialog';
|
|
12
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
13
|
+
import { usePathname, useRouter } from 'next/navigation';
|
|
14
|
+
import Link from 'next/link';
|
|
15
|
+
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
16
|
+
import { signOut } from 'next-auth/react';
|
|
17
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
18
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
19
|
+
|
|
20
|
+
// src/next/components/ui/sidebar.tsx
|
|
21
|
+
var MOBILE_BREAKPOINT = 768;
|
|
22
|
+
function useIsMobile() {
|
|
23
|
+
const [isMobile, setIsMobile] = React2.useState(void 0);
|
|
24
|
+
React2.useEffect(() => {
|
|
25
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
26
|
+
const onChange = () => {
|
|
27
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
28
|
+
};
|
|
29
|
+
mql.addEventListener("change", onChange);
|
|
30
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
31
|
+
return () => mql.removeEventListener("change", onChange);
|
|
32
|
+
}, []);
|
|
33
|
+
return !!isMobile;
|
|
34
|
+
}
|
|
35
|
+
function cn(...inputs) {
|
|
36
|
+
return twMerge(clsx(inputs));
|
|
37
|
+
}
|
|
38
|
+
var buttonVariants = cva(
|
|
39
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
40
|
+
{
|
|
41
|
+
variants: {
|
|
42
|
+
variant: {
|
|
43
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
44
|
+
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
45
|
+
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
46
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
47
|
+
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
48
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
49
|
+
},
|
|
50
|
+
size: {
|
|
51
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
52
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
53
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
54
|
+
icon: "size-9",
|
|
55
|
+
"icon-sm": "size-8",
|
|
56
|
+
"icon-lg": "size-10"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
defaultVariants: {
|
|
60
|
+
variant: "default",
|
|
61
|
+
size: "default"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
function Button({
|
|
66
|
+
className,
|
|
67
|
+
variant,
|
|
68
|
+
size,
|
|
69
|
+
asChild = false,
|
|
70
|
+
...props
|
|
71
|
+
}) {
|
|
72
|
+
const Comp = asChild ? Slot : "button";
|
|
73
|
+
return /* @__PURE__ */ jsx(
|
|
74
|
+
Comp,
|
|
75
|
+
{
|
|
76
|
+
"data-slot": "button",
|
|
77
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
78
|
+
...props
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
function Sheet({ ...props }) {
|
|
83
|
+
return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
|
|
84
|
+
}
|
|
85
|
+
function SheetPortal({
|
|
86
|
+
...props
|
|
87
|
+
}) {
|
|
88
|
+
return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
|
|
89
|
+
}
|
|
90
|
+
function SheetOverlay({
|
|
91
|
+
className,
|
|
92
|
+
...props
|
|
93
|
+
}) {
|
|
94
|
+
return /* @__PURE__ */ jsx(
|
|
95
|
+
SheetPrimitive.Overlay,
|
|
96
|
+
{
|
|
97
|
+
"data-slot": "sheet-overlay",
|
|
98
|
+
className: cn(
|
|
99
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
|
100
|
+
className
|
|
101
|
+
),
|
|
102
|
+
...props
|
|
103
|
+
}
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
function SheetContent({
|
|
107
|
+
className,
|
|
108
|
+
children,
|
|
109
|
+
side = "right",
|
|
110
|
+
...props
|
|
111
|
+
}) {
|
|
112
|
+
return /* @__PURE__ */ jsxs(SheetPortal, { children: [
|
|
113
|
+
/* @__PURE__ */ jsx(SheetOverlay, {}),
|
|
114
|
+
/* @__PURE__ */ jsxs(
|
|
115
|
+
SheetPrimitive.Content,
|
|
116
|
+
{
|
|
117
|
+
"data-slot": "sheet-content",
|
|
118
|
+
className: cn(
|
|
119
|
+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
120
|
+
side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
|
121
|
+
side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
|
122
|
+
side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
|
123
|
+
side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
|
124
|
+
className
|
|
125
|
+
),
|
|
126
|
+
...props,
|
|
127
|
+
children: [
|
|
128
|
+
children,
|
|
129
|
+
/* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
|
|
130
|
+
/* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
|
|
131
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
132
|
+
] })
|
|
133
|
+
]
|
|
134
|
+
}
|
|
135
|
+
)
|
|
136
|
+
] });
|
|
137
|
+
}
|
|
138
|
+
function SheetHeader({ className, ...props }) {
|
|
139
|
+
return /* @__PURE__ */ jsx(
|
|
140
|
+
"div",
|
|
141
|
+
{
|
|
142
|
+
"data-slot": "sheet-header",
|
|
143
|
+
className: cn("flex flex-col gap-1.5 p-4", className),
|
|
144
|
+
...props
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
function SheetTitle({
|
|
149
|
+
className,
|
|
150
|
+
...props
|
|
151
|
+
}) {
|
|
152
|
+
return /* @__PURE__ */ jsx(
|
|
153
|
+
SheetPrimitive.Title,
|
|
154
|
+
{
|
|
155
|
+
"data-slot": "sheet-title",
|
|
156
|
+
className: cn("text-foreground font-semibold", className),
|
|
157
|
+
...props
|
|
158
|
+
}
|
|
159
|
+
);
|
|
160
|
+
}
|
|
161
|
+
function SheetDescription({
|
|
162
|
+
className,
|
|
163
|
+
...props
|
|
164
|
+
}) {
|
|
165
|
+
return /* @__PURE__ */ jsx(
|
|
166
|
+
SheetPrimitive.Description,
|
|
167
|
+
{
|
|
168
|
+
"data-slot": "sheet-description",
|
|
169
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
170
|
+
...props
|
|
171
|
+
}
|
|
172
|
+
);
|
|
173
|
+
}
|
|
174
|
+
function Skeleton({ className, ...props }) {
|
|
175
|
+
return /* @__PURE__ */ jsx(
|
|
176
|
+
"div",
|
|
177
|
+
{
|
|
178
|
+
"data-slot": "skeleton",
|
|
179
|
+
className: cn("bg-accent animate-pulse rounded-md", className),
|
|
180
|
+
...props
|
|
181
|
+
}
|
|
182
|
+
);
|
|
183
|
+
}
|
|
184
|
+
function TooltipProvider({
|
|
185
|
+
delayDuration = 0,
|
|
186
|
+
...props
|
|
187
|
+
}) {
|
|
188
|
+
return /* @__PURE__ */ jsx(
|
|
189
|
+
TooltipPrimitive.Provider,
|
|
190
|
+
{
|
|
191
|
+
"data-slot": "tooltip-provider",
|
|
192
|
+
delayDuration,
|
|
193
|
+
...props
|
|
194
|
+
}
|
|
195
|
+
);
|
|
196
|
+
}
|
|
197
|
+
function Tooltip({
|
|
198
|
+
...props
|
|
199
|
+
}) {
|
|
200
|
+
return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
|
|
201
|
+
}
|
|
202
|
+
function TooltipTrigger({
|
|
203
|
+
...props
|
|
204
|
+
}) {
|
|
205
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
206
|
+
}
|
|
207
|
+
function TooltipContent({
|
|
208
|
+
className,
|
|
209
|
+
sideOffset = 0,
|
|
210
|
+
children,
|
|
211
|
+
...props
|
|
212
|
+
}) {
|
|
213
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
214
|
+
TooltipPrimitive.Content,
|
|
215
|
+
{
|
|
216
|
+
"data-slot": "tooltip-content",
|
|
217
|
+
sideOffset,
|
|
218
|
+
className: cn(
|
|
219
|
+
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
|
220
|
+
className
|
|
221
|
+
),
|
|
222
|
+
...props,
|
|
223
|
+
children: [
|
|
224
|
+
children,
|
|
225
|
+
/* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
|
|
226
|
+
]
|
|
227
|
+
}
|
|
228
|
+
) });
|
|
229
|
+
}
|
|
230
|
+
var SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
231
|
+
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
232
|
+
var SIDEBAR_WIDTH = "16rem";
|
|
233
|
+
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
234
|
+
var SIDEBAR_WIDTH_ICON = "3rem";
|
|
235
|
+
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
236
|
+
var SidebarContext = React2.createContext(null);
|
|
237
|
+
function useSidebar() {
|
|
238
|
+
const context = React2.useContext(SidebarContext);
|
|
239
|
+
if (!context) {
|
|
240
|
+
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
241
|
+
}
|
|
242
|
+
return context;
|
|
243
|
+
}
|
|
244
|
+
function SidebarProvider({
|
|
245
|
+
defaultOpen = true,
|
|
246
|
+
open: openProp,
|
|
247
|
+
onOpenChange: setOpenProp,
|
|
248
|
+
className,
|
|
249
|
+
style,
|
|
250
|
+
children,
|
|
251
|
+
...props
|
|
252
|
+
}) {
|
|
253
|
+
const isMobile = useIsMobile();
|
|
254
|
+
const [openMobile, setOpenMobile] = React2.useState(false);
|
|
255
|
+
const [_open, _setOpen] = React2.useState(defaultOpen);
|
|
256
|
+
const open = openProp ?? _open;
|
|
257
|
+
const setOpen = React2.useCallback(
|
|
258
|
+
(value) => {
|
|
259
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
260
|
+
if (setOpenProp) {
|
|
261
|
+
setOpenProp(openState);
|
|
262
|
+
} else {
|
|
263
|
+
_setOpen(openState);
|
|
264
|
+
}
|
|
265
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
266
|
+
},
|
|
267
|
+
[setOpenProp, open]
|
|
268
|
+
);
|
|
269
|
+
const toggleSidebar = React2.useCallback(() => {
|
|
270
|
+
return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
|
|
271
|
+
}, [isMobile, setOpen, setOpenMobile]);
|
|
272
|
+
React2.useEffect(() => {
|
|
273
|
+
const handleKeyDown = (event) => {
|
|
274
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
275
|
+
event.preventDefault();
|
|
276
|
+
toggleSidebar();
|
|
277
|
+
}
|
|
278
|
+
};
|
|
279
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
280
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
281
|
+
}, [toggleSidebar]);
|
|
282
|
+
const state = open ? "expanded" : "collapsed";
|
|
283
|
+
const contextValue = React2.useMemo(
|
|
284
|
+
() => ({
|
|
285
|
+
state,
|
|
286
|
+
open,
|
|
287
|
+
setOpen,
|
|
288
|
+
isMobile,
|
|
289
|
+
openMobile,
|
|
290
|
+
setOpenMobile,
|
|
291
|
+
toggleSidebar
|
|
292
|
+
}),
|
|
293
|
+
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
|
294
|
+
);
|
|
295
|
+
return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
|
|
296
|
+
"div",
|
|
297
|
+
{
|
|
298
|
+
"data-slot": "sidebar-wrapper",
|
|
299
|
+
style: {
|
|
300
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
301
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
302
|
+
...style
|
|
303
|
+
},
|
|
304
|
+
className: cn(
|
|
305
|
+
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
|
|
306
|
+
className
|
|
307
|
+
),
|
|
308
|
+
...props,
|
|
309
|
+
children
|
|
310
|
+
}
|
|
311
|
+
) }) });
|
|
312
|
+
}
|
|
313
|
+
function Sidebar({
|
|
314
|
+
side = "left",
|
|
315
|
+
variant = "sidebar",
|
|
316
|
+
collapsible = "offcanvas",
|
|
317
|
+
className,
|
|
318
|
+
children,
|
|
319
|
+
...props
|
|
320
|
+
}) {
|
|
321
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
322
|
+
if (collapsible === "none") {
|
|
323
|
+
return /* @__PURE__ */ jsx(
|
|
324
|
+
"div",
|
|
325
|
+
{
|
|
326
|
+
"data-slot": "sidebar",
|
|
327
|
+
className: cn(
|
|
328
|
+
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
|
|
329
|
+
className
|
|
330
|
+
),
|
|
331
|
+
...props,
|
|
332
|
+
children
|
|
333
|
+
}
|
|
334
|
+
);
|
|
335
|
+
}
|
|
336
|
+
if (isMobile) {
|
|
337
|
+
return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs(
|
|
338
|
+
SheetContent,
|
|
339
|
+
{
|
|
340
|
+
"data-sidebar": "sidebar",
|
|
341
|
+
"data-slot": "sidebar",
|
|
342
|
+
"data-mobile": "true",
|
|
343
|
+
className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
|
|
344
|
+
style: {
|
|
345
|
+
"--sidebar-width": SIDEBAR_WIDTH_MOBILE
|
|
346
|
+
},
|
|
347
|
+
side,
|
|
348
|
+
children: [
|
|
349
|
+
/* @__PURE__ */ jsxs(SheetHeader, { className: "sr-only", children: [
|
|
350
|
+
/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }),
|
|
351
|
+
/* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })
|
|
352
|
+
] }),
|
|
353
|
+
/* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
|
|
354
|
+
]
|
|
355
|
+
}
|
|
356
|
+
) });
|
|
357
|
+
}
|
|
358
|
+
return /* @__PURE__ */ jsxs(
|
|
359
|
+
"div",
|
|
360
|
+
{
|
|
361
|
+
className: "group peer text-sidebar-foreground hidden md:block",
|
|
362
|
+
"data-state": state,
|
|
363
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
364
|
+
"data-variant": variant,
|
|
365
|
+
"data-side": side,
|
|
366
|
+
"data-slot": "sidebar",
|
|
367
|
+
children: [
|
|
368
|
+
/* @__PURE__ */ jsx(
|
|
369
|
+
"div",
|
|
370
|
+
{
|
|
371
|
+
"data-slot": "sidebar-gap",
|
|
372
|
+
className: cn(
|
|
373
|
+
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
|
374
|
+
"group-data-[collapsible=offcanvas]:w-0",
|
|
375
|
+
"group-data-[side=right]:rotate-180",
|
|
376
|
+
variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
|
377
|
+
)
|
|
378
|
+
}
|
|
379
|
+
),
|
|
380
|
+
/* @__PURE__ */ jsx(
|
|
381
|
+
"div",
|
|
382
|
+
{
|
|
383
|
+
"data-slot": "sidebar-container",
|
|
384
|
+
className: cn(
|
|
385
|
+
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
386
|
+
side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
387
|
+
// Adjust the padding for floating and inset variants.
|
|
388
|
+
variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
389
|
+
className
|
|
390
|
+
),
|
|
391
|
+
...props,
|
|
392
|
+
children: /* @__PURE__ */ jsx(
|
|
393
|
+
"div",
|
|
394
|
+
{
|
|
395
|
+
"data-sidebar": "sidebar",
|
|
396
|
+
"data-slot": "sidebar-inner",
|
|
397
|
+
className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
|
|
398
|
+
children
|
|
399
|
+
}
|
|
400
|
+
)
|
|
401
|
+
}
|
|
402
|
+
)
|
|
403
|
+
]
|
|
404
|
+
}
|
|
405
|
+
);
|
|
406
|
+
}
|
|
407
|
+
function SidebarTrigger({
|
|
408
|
+
className,
|
|
409
|
+
onClick,
|
|
410
|
+
...props
|
|
411
|
+
}) {
|
|
412
|
+
const { toggleSidebar } = useSidebar();
|
|
413
|
+
return /* @__PURE__ */ jsxs(
|
|
414
|
+
Button,
|
|
415
|
+
{
|
|
416
|
+
"data-sidebar": "trigger",
|
|
417
|
+
"data-slot": "sidebar-trigger",
|
|
418
|
+
variant: "ghost",
|
|
419
|
+
size: "icon",
|
|
420
|
+
className: cn("size-7", className),
|
|
421
|
+
onClick: (event) => {
|
|
422
|
+
onClick?.(event);
|
|
423
|
+
toggleSidebar();
|
|
424
|
+
},
|
|
425
|
+
...props,
|
|
426
|
+
children: [
|
|
427
|
+
/* @__PURE__ */ jsx(PanelLeftIcon, {}),
|
|
428
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
|
|
429
|
+
]
|
|
430
|
+
}
|
|
431
|
+
);
|
|
432
|
+
}
|
|
433
|
+
function SidebarRail({ className, ...props }) {
|
|
434
|
+
const { toggleSidebar } = useSidebar();
|
|
435
|
+
return /* @__PURE__ */ jsx(
|
|
436
|
+
"button",
|
|
437
|
+
{
|
|
438
|
+
"data-sidebar": "rail",
|
|
439
|
+
"data-slot": "sidebar-rail",
|
|
440
|
+
"aria-label": "Toggle Sidebar",
|
|
441
|
+
tabIndex: -1,
|
|
442
|
+
onClick: toggleSidebar,
|
|
443
|
+
title: "Toggle Sidebar",
|
|
444
|
+
className: cn(
|
|
445
|
+
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
|
|
446
|
+
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
|
447
|
+
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
|
448
|
+
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
|
|
449
|
+
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
|
450
|
+
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
|
451
|
+
className
|
|
452
|
+
),
|
|
453
|
+
...props
|
|
454
|
+
}
|
|
455
|
+
);
|
|
456
|
+
}
|
|
457
|
+
function SidebarInset({ className, ...props }) {
|
|
458
|
+
return /* @__PURE__ */ jsx(
|
|
459
|
+
"main",
|
|
460
|
+
{
|
|
461
|
+
"data-slot": "sidebar-inset",
|
|
462
|
+
className: cn(
|
|
463
|
+
"bg-background relative flex w-full flex-1 flex-col",
|
|
464
|
+
"px-4",
|
|
465
|
+
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
|
466
|
+
className
|
|
467
|
+
),
|
|
468
|
+
...props
|
|
469
|
+
}
|
|
470
|
+
);
|
|
471
|
+
}
|
|
472
|
+
function SidebarHeader({ className, ...props }) {
|
|
473
|
+
return /* @__PURE__ */ jsx(
|
|
474
|
+
"div",
|
|
475
|
+
{
|
|
476
|
+
"data-slot": "sidebar-header",
|
|
477
|
+
"data-sidebar": "header",
|
|
478
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
479
|
+
...props
|
|
480
|
+
}
|
|
481
|
+
);
|
|
482
|
+
}
|
|
483
|
+
function SidebarFooter({ className, ...props }) {
|
|
484
|
+
return /* @__PURE__ */ jsx(
|
|
485
|
+
"div",
|
|
486
|
+
{
|
|
487
|
+
"data-slot": "sidebar-footer",
|
|
488
|
+
"data-sidebar": "footer",
|
|
489
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
490
|
+
...props
|
|
491
|
+
}
|
|
492
|
+
);
|
|
493
|
+
}
|
|
494
|
+
function SidebarContent({ className, ...props }) {
|
|
495
|
+
return /* @__PURE__ */ jsx(
|
|
496
|
+
"div",
|
|
497
|
+
{
|
|
498
|
+
"data-slot": "sidebar-content",
|
|
499
|
+
"data-sidebar": "content",
|
|
500
|
+
className: cn(
|
|
501
|
+
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
|
502
|
+
className
|
|
503
|
+
),
|
|
504
|
+
...props
|
|
505
|
+
}
|
|
506
|
+
);
|
|
507
|
+
}
|
|
508
|
+
function SidebarGroup({ className, ...props }) {
|
|
509
|
+
return /* @__PURE__ */ jsx(
|
|
510
|
+
"div",
|
|
511
|
+
{
|
|
512
|
+
"data-slot": "sidebar-group",
|
|
513
|
+
"data-sidebar": "group",
|
|
514
|
+
className: cn("relative flex w-full min-w-0 flex-col p-2", className),
|
|
515
|
+
...props
|
|
516
|
+
}
|
|
517
|
+
);
|
|
518
|
+
}
|
|
519
|
+
function SidebarGroupLabel({
|
|
520
|
+
className,
|
|
521
|
+
asChild = false,
|
|
522
|
+
...props
|
|
523
|
+
}) {
|
|
524
|
+
const Comp = asChild ? Slot : "div";
|
|
525
|
+
return /* @__PURE__ */ jsx(
|
|
526
|
+
Comp,
|
|
527
|
+
{
|
|
528
|
+
"data-slot": "sidebar-group-label",
|
|
529
|
+
"data-sidebar": "group-label",
|
|
530
|
+
className: cn(
|
|
531
|
+
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
532
|
+
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
|
533
|
+
className
|
|
534
|
+
),
|
|
535
|
+
...props
|
|
536
|
+
}
|
|
537
|
+
);
|
|
538
|
+
}
|
|
539
|
+
function SidebarMenu({ className, ...props }) {
|
|
540
|
+
return /* @__PURE__ */ jsx(
|
|
541
|
+
"ul",
|
|
542
|
+
{
|
|
543
|
+
"data-slot": "sidebar-menu",
|
|
544
|
+
"data-sidebar": "menu",
|
|
545
|
+
className: cn("flex w-full min-w-0 flex-col gap-1", className),
|
|
546
|
+
...props
|
|
547
|
+
}
|
|
548
|
+
);
|
|
549
|
+
}
|
|
550
|
+
function SidebarMenuItem({ className, ...props }) {
|
|
551
|
+
return /* @__PURE__ */ jsx(
|
|
552
|
+
"li",
|
|
553
|
+
{
|
|
554
|
+
"data-slot": "sidebar-menu-item",
|
|
555
|
+
"data-sidebar": "menu-item",
|
|
556
|
+
className: cn("group/menu-item relative", className),
|
|
557
|
+
...props
|
|
558
|
+
}
|
|
559
|
+
);
|
|
560
|
+
}
|
|
561
|
+
var sidebarMenuButtonVariants = cva(
|
|
562
|
+
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
563
|
+
{
|
|
564
|
+
variants: {
|
|
565
|
+
variant: {
|
|
566
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
567
|
+
outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
|
|
568
|
+
},
|
|
569
|
+
size: {
|
|
570
|
+
default: "h-8 text-sm",
|
|
571
|
+
sm: "h-7 text-xs",
|
|
572
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
|
|
573
|
+
}
|
|
574
|
+
},
|
|
575
|
+
defaultVariants: {
|
|
576
|
+
variant: "default",
|
|
577
|
+
size: "default"
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
);
|
|
581
|
+
function SidebarMenuButton({
|
|
582
|
+
asChild = false,
|
|
583
|
+
isActive = false,
|
|
584
|
+
variant = "default",
|
|
585
|
+
size = "default",
|
|
586
|
+
tooltip,
|
|
587
|
+
className,
|
|
588
|
+
...props
|
|
589
|
+
}) {
|
|
590
|
+
const Comp = asChild ? Slot : "button";
|
|
591
|
+
const { isMobile, state } = useSidebar();
|
|
592
|
+
const button = /* @__PURE__ */ jsx(
|
|
593
|
+
Comp,
|
|
594
|
+
{
|
|
595
|
+
"data-slot": "sidebar-menu-button",
|
|
596
|
+
"data-sidebar": "menu-button",
|
|
597
|
+
"data-size": size,
|
|
598
|
+
"data-active": isActive,
|
|
599
|
+
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
|
600
|
+
...props
|
|
601
|
+
}
|
|
602
|
+
);
|
|
603
|
+
if (!tooltip) {
|
|
604
|
+
return button;
|
|
605
|
+
}
|
|
606
|
+
if (typeof tooltip === "string") {
|
|
607
|
+
tooltip = {
|
|
608
|
+
children: tooltip
|
|
609
|
+
};
|
|
610
|
+
}
|
|
611
|
+
return /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
612
|
+
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
|
|
613
|
+
/* @__PURE__ */ jsx(
|
|
614
|
+
TooltipContent,
|
|
615
|
+
{
|
|
616
|
+
side: "right",
|
|
617
|
+
align: "center",
|
|
618
|
+
hidden: state !== "collapsed" || isMobile,
|
|
619
|
+
...tooltip
|
|
620
|
+
}
|
|
621
|
+
)
|
|
622
|
+
] });
|
|
623
|
+
}
|
|
624
|
+
function SidebarMenuSub({ className, ...props }) {
|
|
625
|
+
return /* @__PURE__ */ jsx(
|
|
626
|
+
"ul",
|
|
627
|
+
{
|
|
628
|
+
"data-slot": "sidebar-menu-sub",
|
|
629
|
+
"data-sidebar": "menu-sub",
|
|
630
|
+
className: cn(
|
|
631
|
+
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
|
|
632
|
+
"group-data-[collapsible=icon]:hidden",
|
|
633
|
+
className
|
|
634
|
+
),
|
|
635
|
+
...props
|
|
636
|
+
}
|
|
637
|
+
);
|
|
638
|
+
}
|
|
639
|
+
function SidebarMenuSubItem({
|
|
640
|
+
className,
|
|
641
|
+
...props
|
|
642
|
+
}) {
|
|
643
|
+
return /* @__PURE__ */ jsx(
|
|
644
|
+
"li",
|
|
645
|
+
{
|
|
646
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
647
|
+
"data-sidebar": "menu-sub-item",
|
|
648
|
+
className: cn("group/menu-sub-item relative", className),
|
|
649
|
+
...props
|
|
650
|
+
}
|
|
651
|
+
);
|
|
652
|
+
}
|
|
653
|
+
function SidebarMenuSubButton({
|
|
654
|
+
asChild = false,
|
|
655
|
+
size = "md",
|
|
656
|
+
isActive = false,
|
|
657
|
+
className,
|
|
658
|
+
...props
|
|
659
|
+
}) {
|
|
660
|
+
const Comp = asChild ? Slot : "a";
|
|
661
|
+
return /* @__PURE__ */ jsx(
|
|
662
|
+
Comp,
|
|
663
|
+
{
|
|
664
|
+
"data-slot": "sidebar-menu-sub-button",
|
|
665
|
+
"data-sidebar": "menu-sub-button",
|
|
666
|
+
"data-size": size,
|
|
667
|
+
"data-active": isActive,
|
|
668
|
+
className: cn(
|
|
669
|
+
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
670
|
+
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
|
671
|
+
size === "sm" && "text-xs",
|
|
672
|
+
size === "md" && "text-sm",
|
|
673
|
+
"group-data-[collapsible=icon]:hidden",
|
|
674
|
+
className
|
|
675
|
+
),
|
|
676
|
+
...props
|
|
677
|
+
}
|
|
678
|
+
);
|
|
679
|
+
}
|
|
680
|
+
function Collapsible({
|
|
681
|
+
...props
|
|
682
|
+
}) {
|
|
683
|
+
return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
|
|
684
|
+
}
|
|
685
|
+
function CollapsibleTrigger2({
|
|
686
|
+
...props
|
|
687
|
+
}) {
|
|
688
|
+
return /* @__PURE__ */ jsx(
|
|
689
|
+
CollapsiblePrimitive.CollapsibleTrigger,
|
|
690
|
+
{
|
|
691
|
+
"data-slot": "collapsible-trigger",
|
|
692
|
+
...props
|
|
693
|
+
}
|
|
694
|
+
);
|
|
695
|
+
}
|
|
696
|
+
function CollapsibleContent2({
|
|
697
|
+
...props
|
|
698
|
+
}) {
|
|
699
|
+
return /* @__PURE__ */ jsx(
|
|
700
|
+
CollapsiblePrimitive.CollapsibleContent,
|
|
701
|
+
{
|
|
702
|
+
"data-slot": "collapsible-content",
|
|
703
|
+
...props
|
|
704
|
+
}
|
|
705
|
+
);
|
|
706
|
+
}
|
|
707
|
+
var ICON_MAP = {
|
|
708
|
+
Home: LucideIcons.Home,
|
|
709
|
+
Users: LucideIcons.Users,
|
|
710
|
+
GalleryVerticalEnd: LucideIcons.GalleryVerticalEnd,
|
|
711
|
+
Settings: LucideIcons.Settings,
|
|
712
|
+
CreditCard: LucideIcons.CreditCard,
|
|
713
|
+
Building2: LucideIcons.Building2,
|
|
714
|
+
Check: LucideIcons.Check,
|
|
715
|
+
ChevronsUpDown: LucideIcons.ChevronsUpDown,
|
|
716
|
+
ChevronRight: LucideIcons.ChevronRight,
|
|
717
|
+
BadgeCheck: LucideIcons.BadgeCheck,
|
|
718
|
+
LogOut: LucideIcons.LogOut
|
|
719
|
+
// Add more icons as needed
|
|
720
|
+
};
|
|
721
|
+
function getIconComponent(icon) {
|
|
722
|
+
if (!icon) {
|
|
723
|
+
return void 0;
|
|
724
|
+
}
|
|
725
|
+
if (typeof icon !== "string") {
|
|
726
|
+
return icon;
|
|
727
|
+
}
|
|
728
|
+
return ICON_MAP[icon];
|
|
729
|
+
}
|
|
730
|
+
function NavMain({ items }) {
|
|
731
|
+
const pathname = usePathname();
|
|
732
|
+
const groups = [];
|
|
733
|
+
let currentGroup = {
|
|
734
|
+
items: []
|
|
735
|
+
};
|
|
736
|
+
items.forEach((item) => {
|
|
737
|
+
const iconComponent = getIconComponent(item.icon);
|
|
738
|
+
if (!item.url) {
|
|
739
|
+
if (currentGroup.items.length > 0 || currentGroup.label) {
|
|
740
|
+
groups.push(currentGroup);
|
|
741
|
+
}
|
|
742
|
+
currentGroup = {
|
|
743
|
+
label: { title: item.title, icon: iconComponent },
|
|
744
|
+
items: []
|
|
745
|
+
};
|
|
746
|
+
} else {
|
|
747
|
+
currentGroup.items.push({
|
|
748
|
+
title: item.title,
|
|
749
|
+
url: item.url,
|
|
750
|
+
icon: iconComponent,
|
|
751
|
+
isActive: item.isActive,
|
|
752
|
+
items: item.items
|
|
753
|
+
});
|
|
754
|
+
}
|
|
755
|
+
});
|
|
756
|
+
if (currentGroup.items.length > 0 || currentGroup.label) {
|
|
757
|
+
groups.push(currentGroup);
|
|
758
|
+
}
|
|
759
|
+
return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [
|
|
760
|
+
group.label && /* @__PURE__ */ jsxs(SidebarGroupLabel, { children: [
|
|
761
|
+
group.label.icon && /* @__PURE__ */ jsx(group.label.icon, { className: "mr-2" }),
|
|
762
|
+
group.label.title
|
|
763
|
+
] }),
|
|
764
|
+
group.items.length > 0 && /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((item) => {
|
|
765
|
+
const isActive = pathname === item.url || item.isActive;
|
|
766
|
+
const hasSubItems = item.items && item.items.length > 0;
|
|
767
|
+
if (hasSubItems) {
|
|
768
|
+
return /* @__PURE__ */ jsx(
|
|
769
|
+
Collapsible,
|
|
770
|
+
{
|
|
771
|
+
asChild: true,
|
|
772
|
+
defaultOpen: isActive,
|
|
773
|
+
className: "group/collapsible",
|
|
774
|
+
children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
|
|
775
|
+
/* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
776
|
+
SidebarMenuButton,
|
|
777
|
+
{
|
|
778
|
+
tooltip: item.title,
|
|
779
|
+
isActive,
|
|
780
|
+
children: [
|
|
781
|
+
item.icon && /* @__PURE__ */ jsx(item.icon, {}),
|
|
782
|
+
/* @__PURE__ */ jsx("span", { children: item.title }),
|
|
783
|
+
/* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
|
|
784
|
+
]
|
|
785
|
+
}
|
|
786
|
+
) }),
|
|
787
|
+
/* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: subItem.url, children: /* @__PURE__ */ jsx("span", { children: subItem.title }) }) }) }, subItem.title)) }) })
|
|
788
|
+
] })
|
|
789
|
+
},
|
|
790
|
+
item.title
|
|
791
|
+
);
|
|
792
|
+
}
|
|
793
|
+
return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
|
|
794
|
+
SidebarMenuButton,
|
|
795
|
+
{
|
|
796
|
+
asChild: true,
|
|
797
|
+
tooltip: item.title,
|
|
798
|
+
isActive,
|
|
799
|
+
children: /* @__PURE__ */ jsxs(Link, { href: item.url, children: [
|
|
800
|
+
item.icon && /* @__PURE__ */ jsx(item.icon, {}),
|
|
801
|
+
/* @__PURE__ */ jsx("span", { children: item.title })
|
|
802
|
+
] })
|
|
803
|
+
}
|
|
804
|
+
) }, item.title);
|
|
805
|
+
}) })
|
|
806
|
+
] }, groupIndex)) });
|
|
807
|
+
}
|
|
808
|
+
function Avatar({
|
|
809
|
+
className,
|
|
810
|
+
...props
|
|
811
|
+
}) {
|
|
812
|
+
return /* @__PURE__ */ jsx(
|
|
813
|
+
AvatarPrimitive.Root,
|
|
814
|
+
{
|
|
815
|
+
"data-slot": "avatar",
|
|
816
|
+
className: cn(
|
|
817
|
+
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
|
|
818
|
+
className
|
|
819
|
+
),
|
|
820
|
+
...props
|
|
821
|
+
}
|
|
822
|
+
);
|
|
823
|
+
}
|
|
824
|
+
function AvatarImage({
|
|
825
|
+
className,
|
|
826
|
+
...props
|
|
827
|
+
}) {
|
|
828
|
+
return /* @__PURE__ */ jsx(
|
|
829
|
+
AvatarPrimitive.Image,
|
|
830
|
+
{
|
|
831
|
+
"data-slot": "avatar-image",
|
|
832
|
+
className: cn("aspect-square size-full", className),
|
|
833
|
+
...props
|
|
834
|
+
}
|
|
835
|
+
);
|
|
836
|
+
}
|
|
837
|
+
function AvatarFallback({
|
|
838
|
+
className,
|
|
839
|
+
...props
|
|
840
|
+
}) {
|
|
841
|
+
return /* @__PURE__ */ jsx(
|
|
842
|
+
AvatarPrimitive.Fallback,
|
|
843
|
+
{
|
|
844
|
+
"data-slot": "avatar-fallback",
|
|
845
|
+
className: cn(
|
|
846
|
+
"bg-muted flex size-full items-center justify-center rounded-full",
|
|
847
|
+
className
|
|
848
|
+
),
|
|
849
|
+
...props
|
|
850
|
+
}
|
|
851
|
+
);
|
|
852
|
+
}
|
|
853
|
+
function DropdownMenu({
|
|
854
|
+
...props
|
|
855
|
+
}) {
|
|
856
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
|
|
857
|
+
}
|
|
858
|
+
function DropdownMenuTrigger({
|
|
859
|
+
...props
|
|
860
|
+
}) {
|
|
861
|
+
return /* @__PURE__ */ jsx(
|
|
862
|
+
DropdownMenuPrimitive.Trigger,
|
|
863
|
+
{
|
|
864
|
+
"data-slot": "dropdown-menu-trigger",
|
|
865
|
+
...props
|
|
866
|
+
}
|
|
867
|
+
);
|
|
868
|
+
}
|
|
869
|
+
function DropdownMenuContent({
|
|
870
|
+
className,
|
|
871
|
+
sideOffset = 4,
|
|
872
|
+
...props
|
|
873
|
+
}) {
|
|
874
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
875
|
+
DropdownMenuPrimitive.Content,
|
|
876
|
+
{
|
|
877
|
+
"data-slot": "dropdown-menu-content",
|
|
878
|
+
sideOffset,
|
|
879
|
+
className: cn(
|
|
880
|
+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
|
881
|
+
className
|
|
882
|
+
),
|
|
883
|
+
...props
|
|
884
|
+
}
|
|
885
|
+
) });
|
|
886
|
+
}
|
|
887
|
+
function DropdownMenuGroup({
|
|
888
|
+
...props
|
|
889
|
+
}) {
|
|
890
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
891
|
+
}
|
|
892
|
+
function DropdownMenuItem({
|
|
893
|
+
className,
|
|
894
|
+
inset,
|
|
895
|
+
variant = "default",
|
|
896
|
+
...props
|
|
897
|
+
}) {
|
|
898
|
+
return /* @__PURE__ */ jsx(
|
|
899
|
+
DropdownMenuPrimitive.Item,
|
|
900
|
+
{
|
|
901
|
+
"data-slot": "dropdown-menu-item",
|
|
902
|
+
"data-inset": inset,
|
|
903
|
+
"data-variant": variant,
|
|
904
|
+
className: cn(
|
|
905
|
+
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
906
|
+
className
|
|
907
|
+
),
|
|
908
|
+
...props
|
|
909
|
+
}
|
|
910
|
+
);
|
|
911
|
+
}
|
|
912
|
+
function DropdownMenuLabel({
|
|
913
|
+
className,
|
|
914
|
+
inset,
|
|
915
|
+
...props
|
|
916
|
+
}) {
|
|
917
|
+
return /* @__PURE__ */ jsx(
|
|
918
|
+
DropdownMenuPrimitive.Label,
|
|
919
|
+
{
|
|
920
|
+
"data-slot": "dropdown-menu-label",
|
|
921
|
+
"data-inset": inset,
|
|
922
|
+
className: cn(
|
|
923
|
+
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
|
924
|
+
className
|
|
925
|
+
),
|
|
926
|
+
...props
|
|
927
|
+
}
|
|
928
|
+
);
|
|
929
|
+
}
|
|
930
|
+
function DropdownMenuSeparator({
|
|
931
|
+
className,
|
|
932
|
+
...props
|
|
933
|
+
}) {
|
|
934
|
+
return /* @__PURE__ */ jsx(
|
|
935
|
+
DropdownMenuPrimitive.Separator,
|
|
936
|
+
{
|
|
937
|
+
"data-slot": "dropdown-menu-separator",
|
|
938
|
+
className: cn("bg-border -mx-1 my-1 h-px", className),
|
|
939
|
+
...props
|
|
940
|
+
}
|
|
941
|
+
);
|
|
942
|
+
}
|
|
943
|
+
function getInitials(name, email) {
|
|
944
|
+
if (name) {
|
|
945
|
+
const parts = name.trim().split(/\s+/);
|
|
946
|
+
if (parts.length >= 2) {
|
|
947
|
+
const first = parts[0];
|
|
948
|
+
const last = parts[parts.length - 1];
|
|
949
|
+
if (first && last && first[0] && last[0]) {
|
|
950
|
+
return (first[0] + last[0]).toUpperCase();
|
|
951
|
+
}
|
|
952
|
+
}
|
|
953
|
+
const firstChar2 = name[0];
|
|
954
|
+
if (firstChar2) {
|
|
955
|
+
return firstChar2.toUpperCase();
|
|
956
|
+
}
|
|
957
|
+
}
|
|
958
|
+
const firstChar = email[0];
|
|
959
|
+
if (firstChar) {
|
|
960
|
+
return firstChar.toUpperCase();
|
|
961
|
+
}
|
|
962
|
+
return "?";
|
|
963
|
+
}
|
|
964
|
+
function NavUser({ user }) {
|
|
965
|
+
const sidebar = useSidebar();
|
|
966
|
+
const isMobile = sidebar?.isMobile ?? false;
|
|
967
|
+
const router = useRouter();
|
|
968
|
+
const initials = getInitials(user.name, user.email);
|
|
969
|
+
const displayName = user.name || user.email;
|
|
970
|
+
const handleSignOut = async () => {
|
|
971
|
+
await signOut({ redirect: false });
|
|
972
|
+
router.push("/auth/signin");
|
|
973
|
+
router.refresh();
|
|
974
|
+
};
|
|
975
|
+
return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
976
|
+
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
977
|
+
SidebarMenuButton,
|
|
978
|
+
{
|
|
979
|
+
size: "lg",
|
|
980
|
+
className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
|
|
981
|
+
children: [
|
|
982
|
+
/* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
|
|
983
|
+
/* @__PURE__ */ jsx(AvatarImage, { src: user.image || void 0, alt: displayName }),
|
|
984
|
+
/* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg", children: initials })
|
|
985
|
+
] }),
|
|
986
|
+
/* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
|
|
987
|
+
/* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: displayName }),
|
|
988
|
+
/* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: user.email })
|
|
989
|
+
] }),
|
|
990
|
+
/* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto size-4" })
|
|
991
|
+
]
|
|
992
|
+
}
|
|
993
|
+
) }),
|
|
994
|
+
/* @__PURE__ */ jsxs(
|
|
995
|
+
DropdownMenuContent,
|
|
996
|
+
{
|
|
997
|
+
className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
|
|
998
|
+
side: isMobile ? "bottom" : "right",
|
|
999
|
+
align: "end",
|
|
1000
|
+
sideOffset: 4,
|
|
1001
|
+
children: [
|
|
1002
|
+
/* @__PURE__ */ jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
|
|
1003
|
+
/* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
|
|
1004
|
+
/* @__PURE__ */ jsx(AvatarImage, { src: user.image || void 0, alt: displayName }),
|
|
1005
|
+
/* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg", children: initials })
|
|
1006
|
+
] }),
|
|
1007
|
+
/* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
|
|
1008
|
+
/* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: displayName }),
|
|
1009
|
+
/* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: user.email })
|
|
1010
|
+
] })
|
|
1011
|
+
] }) }),
|
|
1012
|
+
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
1013
|
+
/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
|
|
1014
|
+
/* @__PURE__ */ jsx(BadgeCheck, {}),
|
|
1015
|
+
"Account"
|
|
1016
|
+
] }) }),
|
|
1017
|
+
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
1018
|
+
/* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleSignOut, children: [
|
|
1019
|
+
/* @__PURE__ */ jsx(LogOut, {}),
|
|
1020
|
+
"Log out"
|
|
1021
|
+
] })
|
|
1022
|
+
]
|
|
1023
|
+
}
|
|
1024
|
+
)
|
|
1025
|
+
] }) }) });
|
|
1026
|
+
}
|
|
1027
|
+
function TeamSwitcher({
|
|
1028
|
+
teams,
|
|
1029
|
+
organizationId
|
|
1030
|
+
}) {
|
|
1031
|
+
const sidebar = useSidebar();
|
|
1032
|
+
const isMobile = sidebar?.isMobile ?? false;
|
|
1033
|
+
const pathname = usePathname();
|
|
1034
|
+
const router = useRouter();
|
|
1035
|
+
const pathSegments = pathname.split("/");
|
|
1036
|
+
const isAppOrgRoute = pathname.startsWith("/app/") && pathSegments.length > 2 && pathSegments[2] !== "user";
|
|
1037
|
+
const pathOrgId = isAppOrgRoute ? pathSegments[2] : null;
|
|
1038
|
+
const currentOrgId = organizationId || (pathOrgId && teams.some((team) => team.id === pathOrgId) ? pathOrgId : null);
|
|
1039
|
+
const activeTeam = currentOrgId ? teams.find((team) => team.id === currentOrgId) : null;
|
|
1040
|
+
const handleTeamChange = (teamId) => {
|
|
1041
|
+
router.push(`/app/${teamId}/home`);
|
|
1042
|
+
router.refresh();
|
|
1043
|
+
};
|
|
1044
|
+
const teamsWithLogo = teams.map((org) => {
|
|
1045
|
+
const logoIcon = org.logo ? getIconComponent(org.logo) : GalleryVerticalEnd;
|
|
1046
|
+
return {
|
|
1047
|
+
id: org.id,
|
|
1048
|
+
name: org.name,
|
|
1049
|
+
logo: logoIcon || GalleryVerticalEnd,
|
|
1050
|
+
plan: org.plan || "Member"
|
|
1051
|
+
};
|
|
1052
|
+
});
|
|
1053
|
+
if (teamsWithLogo.length === 0) {
|
|
1054
|
+
return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, { size: "lg", className: "cursor-default", children: [
|
|
1055
|
+
/* @__PURE__ */ jsx("div", { className: "bg-muted flex aspect-square size-8 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { className: "size-4 text-muted-foreground" }) }),
|
|
1056
|
+
/* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
|
|
1057
|
+
/* @__PURE__ */ jsx("span", { className: "truncate font-medium text-muted-foreground", children: "No organizations" }),
|
|
1058
|
+
/* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: "Join or create one" })
|
|
1059
|
+
] })
|
|
1060
|
+
] }) }) });
|
|
1061
|
+
}
|
|
1062
|
+
if (!activeTeam) {
|
|
1063
|
+
return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
1064
|
+
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
1065
|
+
SidebarMenuButton,
|
|
1066
|
+
{
|
|
1067
|
+
size: "lg",
|
|
1068
|
+
className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
|
|
1069
|
+
children: [
|
|
1070
|
+
/* @__PURE__ */ jsx("div", { className: "bg-muted flex aspect-square size-8 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { className: "size-4 text-muted-foreground" }) }),
|
|
1071
|
+
/* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
|
|
1072
|
+
/* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: "Organizations" }),
|
|
1073
|
+
/* @__PURE__ */ jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [
|
|
1074
|
+
teamsWithLogo.length,
|
|
1075
|
+
" available"
|
|
1076
|
+
] })
|
|
1077
|
+
] }),
|
|
1078
|
+
/* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto" })
|
|
1079
|
+
]
|
|
1080
|
+
}
|
|
1081
|
+
) }),
|
|
1082
|
+
/* @__PURE__ */ jsxs(
|
|
1083
|
+
DropdownMenuContent,
|
|
1084
|
+
{
|
|
1085
|
+
className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
|
|
1086
|
+
align: "start",
|
|
1087
|
+
side: isMobile ? "bottom" : "right",
|
|
1088
|
+
sideOffset: 4,
|
|
1089
|
+
children: [
|
|
1090
|
+
/* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-muted-foreground text-xs", children: "Select an organization" }),
|
|
1091
|
+
teamsWithLogo.map((team) => /* @__PURE__ */ jsxs(
|
|
1092
|
+
DropdownMenuItem,
|
|
1093
|
+
{
|
|
1094
|
+
onClick: () => handleTeamChange(team.id),
|
|
1095
|
+
className: "gap-2 p-2",
|
|
1096
|
+
children: [
|
|
1097
|
+
/* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-md border", children: /* @__PURE__ */ jsx(team.logo, { className: "size-3.5 shrink-0" }) }),
|
|
1098
|
+
team.name
|
|
1099
|
+
]
|
|
1100
|
+
},
|
|
1101
|
+
team.id
|
|
1102
|
+
)),
|
|
1103
|
+
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
1104
|
+
/* @__PURE__ */ jsxs(
|
|
1105
|
+
DropdownMenuItem,
|
|
1106
|
+
{
|
|
1107
|
+
className: "gap-2 p-2",
|
|
1108
|
+
onClick: () => router.push("/app/user/organizations"),
|
|
1109
|
+
children: [
|
|
1110
|
+
/* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { className: "size-4" }) }),
|
|
1111
|
+
/* @__PURE__ */ jsx("div", { className: "text-muted-foreground font-medium", children: "Manage organizations" })
|
|
1112
|
+
]
|
|
1113
|
+
}
|
|
1114
|
+
)
|
|
1115
|
+
]
|
|
1116
|
+
}
|
|
1117
|
+
)
|
|
1118
|
+
] }) }) });
|
|
1119
|
+
}
|
|
1120
|
+
const activeTeamWithLogo = teamsWithLogo.find(
|
|
1121
|
+
(team) => team.id === currentOrgId
|
|
1122
|
+
);
|
|
1123
|
+
if (!activeTeamWithLogo) {
|
|
1124
|
+
return null;
|
|
1125
|
+
}
|
|
1126
|
+
return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
1127
|
+
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
1128
|
+
SidebarMenuButton,
|
|
1129
|
+
{
|
|
1130
|
+
size: "lg",
|
|
1131
|
+
className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
|
|
1132
|
+
children: [
|
|
1133
|
+
/* @__PURE__ */ jsx("div", { className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(activeTeamWithLogo.logo, { className: "size-4" }) }),
|
|
1134
|
+
/* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
|
|
1135
|
+
/* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: activeTeamWithLogo.name }),
|
|
1136
|
+
/* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: activeTeamWithLogo.plan })
|
|
1137
|
+
] }),
|
|
1138
|
+
/* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto" })
|
|
1139
|
+
]
|
|
1140
|
+
}
|
|
1141
|
+
) }),
|
|
1142
|
+
/* @__PURE__ */ jsxs(
|
|
1143
|
+
DropdownMenuContent,
|
|
1144
|
+
{
|
|
1145
|
+
className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
|
|
1146
|
+
align: "start",
|
|
1147
|
+
side: isMobile ? "bottom" : "right",
|
|
1148
|
+
sideOffset: 4,
|
|
1149
|
+
children: [
|
|
1150
|
+
/* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-muted-foreground text-xs", children: "Organizations" }),
|
|
1151
|
+
teamsWithLogo.map((team) => /* @__PURE__ */ jsxs(
|
|
1152
|
+
DropdownMenuItem,
|
|
1153
|
+
{
|
|
1154
|
+
onClick: () => handleTeamChange(team.id),
|
|
1155
|
+
className: "gap-2 p-2",
|
|
1156
|
+
children: [
|
|
1157
|
+
/* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-md border", children: /* @__PURE__ */ jsx(team.logo, { className: "size-3.5 shrink-0" }) }),
|
|
1158
|
+
team.name,
|
|
1159
|
+
team.id === currentOrgId && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-4 w-4" })
|
|
1160
|
+
]
|
|
1161
|
+
},
|
|
1162
|
+
team.id
|
|
1163
|
+
)),
|
|
1164
|
+
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
1165
|
+
/* @__PURE__ */ jsxs(
|
|
1166
|
+
DropdownMenuItem,
|
|
1167
|
+
{
|
|
1168
|
+
className: "gap-2 p-2",
|
|
1169
|
+
onClick: () => router.push("/app/user/organizations"),
|
|
1170
|
+
children: [
|
|
1171
|
+
/* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { className: "size-4" }) }),
|
|
1172
|
+
/* @__PURE__ */ jsx("div", { className: "text-muted-foreground font-medium", children: "Manage organizations" })
|
|
1173
|
+
]
|
|
1174
|
+
}
|
|
1175
|
+
)
|
|
1176
|
+
]
|
|
1177
|
+
}
|
|
1178
|
+
)
|
|
1179
|
+
] }) }) });
|
|
1180
|
+
}
|
|
1181
|
+
function useNavigation({
|
|
1182
|
+
organizationId,
|
|
1183
|
+
apiBaseUrl = "/api",
|
|
1184
|
+
enabled = true
|
|
1185
|
+
} = {}) {
|
|
1186
|
+
const [items, setItems] = useState([]);
|
|
1187
|
+
const [organizations, setOrganizations] = useState([]);
|
|
1188
|
+
const [user, setUser] = useState(null);
|
|
1189
|
+
const [loading, setLoading] = useState(false);
|
|
1190
|
+
const [error, setError] = useState(null);
|
|
1191
|
+
useEffect(() => {
|
|
1192
|
+
if (!enabled || !organizationId) {
|
|
1193
|
+
setItems([]);
|
|
1194
|
+
setOrganizations([]);
|
|
1195
|
+
setUser(null);
|
|
1196
|
+
return;
|
|
1197
|
+
}
|
|
1198
|
+
const fetchNavigation = async () => {
|
|
1199
|
+
setLoading(true);
|
|
1200
|
+
setError(null);
|
|
1201
|
+
try {
|
|
1202
|
+
const response = await fetch(
|
|
1203
|
+
`${apiBaseUrl}/navigation/${organizationId}`,
|
|
1204
|
+
{
|
|
1205
|
+
credentials: "include"
|
|
1206
|
+
// Include cookies for auth
|
|
1207
|
+
}
|
|
1208
|
+
);
|
|
1209
|
+
if (!response.ok) {
|
|
1210
|
+
if (response.status === 401) {
|
|
1211
|
+
throw new Error("Unauthorized");
|
|
1212
|
+
}
|
|
1213
|
+
if (response.status === 404) {
|
|
1214
|
+
throw new Error("Organization not found");
|
|
1215
|
+
}
|
|
1216
|
+
throw new Error(`Failed to fetch navigation: ${response.statusText}`);
|
|
1217
|
+
}
|
|
1218
|
+
const data = await response.json();
|
|
1219
|
+
setItems(data.items || []);
|
|
1220
|
+
setOrganizations(data.organizations || []);
|
|
1221
|
+
setUser(data.user || null);
|
|
1222
|
+
} catch (err) {
|
|
1223
|
+
const error2 = err instanceof Error ? err : new Error("Unknown error");
|
|
1224
|
+
setError(error2);
|
|
1225
|
+
setItems([]);
|
|
1226
|
+
setOrganizations([]);
|
|
1227
|
+
setUser(null);
|
|
1228
|
+
} finally {
|
|
1229
|
+
setLoading(false);
|
|
1230
|
+
}
|
|
1231
|
+
};
|
|
1232
|
+
fetchNavigation();
|
|
1233
|
+
}, [organizationId, apiBaseUrl, enabled]);
|
|
1234
|
+
return { items, organizations, user, loading, error };
|
|
1235
|
+
}
|
|
1236
|
+
function AppSidebar({
|
|
1237
|
+
user: userProp,
|
|
1238
|
+
organizationId,
|
|
1239
|
+
apiBaseUrl,
|
|
1240
|
+
...props
|
|
1241
|
+
}) {
|
|
1242
|
+
const currentPathname = usePathname();
|
|
1243
|
+
const pathSegments = currentPathname.split("/");
|
|
1244
|
+
const isAppOrgRoute = currentPathname.startsWith("/app/") && pathSegments.length > 2 && pathSegments[2] !== "user";
|
|
1245
|
+
const pathOrgId = isAppOrgRoute ? pathSegments[2] : null;
|
|
1246
|
+
const {
|
|
1247
|
+
items: apiNavigationItems,
|
|
1248
|
+
organizations: apiOrganizations,
|
|
1249
|
+
user: navigationUser,
|
|
1250
|
+
loading: navigationLoading
|
|
1251
|
+
} = useNavigation({
|
|
1252
|
+
organizationId: organizationId || pathOrgId || void 0,
|
|
1253
|
+
apiBaseUrl,
|
|
1254
|
+
enabled: true
|
|
1255
|
+
});
|
|
1256
|
+
const user = navigationUser || userProp;
|
|
1257
|
+
const currentOrgId = organizationId || (pathOrgId && apiOrganizations.some((org) => org.id === pathOrgId) ? pathOrgId : void 0);
|
|
1258
|
+
let navigationItems = apiNavigationItems;
|
|
1259
|
+
if (currentOrgId && navigationItems.length > 0) {
|
|
1260
|
+
navigationItems = navigationItems.map((item) => ({
|
|
1261
|
+
...item,
|
|
1262
|
+
url: item.url?.replace("{organizationId}", currentOrgId),
|
|
1263
|
+
items: item.items?.map((subItem) => ({
|
|
1264
|
+
...subItem,
|
|
1265
|
+
url: subItem.url.replace("{organizationId}", currentOrgId)
|
|
1266
|
+
}))
|
|
1267
|
+
}));
|
|
1268
|
+
}
|
|
1269
|
+
const displayNavigationItems = currentOrgId ? navigationItems : [];
|
|
1270
|
+
return /* @__PURE__ */ jsxs(Sidebar, { collapsible: "icon", ...props, children: [
|
|
1271
|
+
/* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx(
|
|
1272
|
+
TeamSwitcher,
|
|
1273
|
+
{
|
|
1274
|
+
teams: apiOrganizations,
|
|
1275
|
+
organizationId: currentOrgId || void 0
|
|
1276
|
+
}
|
|
1277
|
+
) }),
|
|
1278
|
+
/* @__PURE__ */ jsx(SidebarContent, { children: navigationLoading ? /* @__PURE__ */ jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Loading..." }) : /* @__PURE__ */ jsx(NavMain, { items: displayNavigationItems }) }),
|
|
1279
|
+
/* @__PURE__ */ jsx(SidebarFooter, { children: user ? /* @__PURE__ */ jsx(NavUser, { user }) : /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, { size: "lg", disabled: true, children: [
|
|
1280
|
+
/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-lg" }),
|
|
1281
|
+
/* @__PURE__ */ jsxs("div", { className: "grid flex-1 gap-1 text-left text-sm", children: [
|
|
1282
|
+
/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
|
|
1283
|
+
/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-32" })
|
|
1284
|
+
] })
|
|
1285
|
+
] }) }) }) }),
|
|
1286
|
+
/* @__PURE__ */ jsx(SidebarRail, {})
|
|
1287
|
+
] });
|
|
1288
|
+
}
|
|
1289
|
+
function AppLayout({
|
|
1290
|
+
user,
|
|
1291
|
+
organizationId,
|
|
1292
|
+
apiBaseUrl,
|
|
1293
|
+
children
|
|
1294
|
+
}) {
|
|
1295
|
+
return /* @__PURE__ */ jsxs(SidebarProvider, { children: [
|
|
1296
|
+
/* @__PURE__ */ jsx(
|
|
1297
|
+
AppSidebar,
|
|
1298
|
+
{
|
|
1299
|
+
user,
|
|
1300
|
+
organizationId,
|
|
1301
|
+
apiBaseUrl
|
|
1302
|
+
}
|
|
1303
|
+
),
|
|
1304
|
+
/* @__PURE__ */ jsxs(SidebarInset, { children: [
|
|
1305
|
+
/* @__PURE__ */ jsx(SidebarTrigger, {}),
|
|
1306
|
+
children
|
|
1307
|
+
] })
|
|
1308
|
+
] });
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
export { AppLayout, AppSidebar, NavMain, NavUser, TeamSwitcher, getIconComponent, useNavigation };
|
|
1312
|
+
//# sourceMappingURL=components.js.map
|
|
1313
|
+
//# sourceMappingURL=components.js.map
|