gitscope
/
← marzneshin / dashboard/src/routes/_dashboard.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/routes/_dashboard.tsx · master
Source
1 1eb203e Mrdn 2y ago import {
2 c5c71ec Mardin 2y ago Header,
3 c5c71ec Mardin 2y ago ResizableHandle,
4 c5c71ec Mardin 2y ago ResizablePanel,
5 c5c71ec Mardin 2y ago ResizablePanelGroup,
6 c5c71ec Mardin 2y ago Toaster,
7 c5c71ec Mardin 2y ago Loading,
8 c5c71ec Mardin 2y ago HeaderLogo,
9 c5c71ec Mardin 2y ago HeaderMenu,
10 7389ad0 Mardin 2y ago } from "@marzneshin/common/components";
11 7389ad0 Mardin 2y ago import { useAuth } from "@marzneshin/modules/auth";
12 88bdde2 Mrdn 2y ago import { DashboardSidebar, ToggleButton } from "@marzneshin/features/sidebar";
13 3d1a4b1 Mrdn 2y ago import { usePanelToggle } from "@marzneshin/features/sidebar/use-panel-toggle";
14 d636f3f Dawsh 2y ago import { useScreenBreakpoint } from "@marzneshin/common/hooks/use-screen-breakpoint";
15 d636f3f Dawsh 2y ago import { cn } from "@marzneshin/common/utils";
16 03b3dbc Mardin 2y ago import { Suspense } from "react";
17 03b3dbc Mardin 2y ago import {
18 c5c71ec Mardin 2y ago Outlet,
19 c5c71ec Mardin 2y ago Link,
20 c5c71ec Mardin 2y ago createFileRoute,
21 c5c71ec Mardin 2y ago redirect
22 03b3dbc Mardin 2y ago } from "@tanstack/react-router";
23 d42c6e6 Mardin 2y ago import { useGithubRepoStatsQuery, GithubRepo } from "@marzneshin/features/github-repo";
24 c5c71ec Mardin 2y ago import { CommandBox } from "@marzneshin/features/search-command";
25 7bd6cce Mardin 2y ago import { DashboardBottomMenu } from "@marzneshin/features/bottom-menu";
26 1eb203e Mrdn 2y ago
27 1eb203e Mrdn 2y ago export const DashboardLayout = () => {
28 c5c71ec Mardin 2y ago const isDesktop = useScreenBreakpoint("md");
29 c5c71ec Mardin 2y ago const {
30 c5c71ec Mardin 2y ago collapsed,
31 c5c71ec Mardin 2y ago panelRef,
32 c5c71ec Mardin 2y ago setCollapsed,
33 c5c71ec Mardin 2y ago toggleCollapse,
34 c5c71ec Mardin 2y ago } = usePanelToggle(isDesktop);
35 7bd6cce Mardin 2y ago const { isSudo } = useAuth();
36 d42c6e6 Mardin 2y ago const { data: stats } = useGithubRepoStatsQuery()
37 1eb203e Mrdn 2y ago
38 c5c71ec Mardin 2y ago return (
39 c5c71ec Mardin 2y ago <div className="flex flex-col w-screen h-screen">
40 c5c71ec Mardin 2y ago <Header
41 65afe33 Mardin 2y ago start={
42 c5c71ec Mardin 2y ago <>
43 c5c71ec Mardin 2y ago <Link to="/">
44 c5c71ec Mardin 2y ago <HeaderLogo />
45 c5c71ec Mardin 2y ago </Link>
46 65afe33 Mardin 2y ago {isDesktop && (
47 65afe33 Mardin 2y ago
48 65afe33 Mardin 2y ago <ToggleButton
49 65afe33 Mardin 2y ago collapsed={collapsed}
50 65afe33 Mardin 2y ago onToggle={toggleCollapse}
51 65afe33 Mardin 2y ago />
52 65afe33 Mardin 2y ago )}
53 c5c71ec Mardin 2y ago </>
54 c5c71ec Mardin 2y ago }
55 7bd6cce Mardin 2y ago center={<CommandBox />}
56 c5c71ec Mardin 2y ago end={
57 c5c71ec Mardin 2y ago <>
58 d42c6e6 Mardin 2y ago <GithubRepo {...stats} variant={isDesktop ? "full" : "mini"} />
59 c5c71ec Mardin 2y ago <HeaderMenu />
60 c5c71ec Mardin 2y ago </>
61 c5c71ec Mardin 2y ago }
62 88bdde2 Mrdn 2y ago />
63 7bd6cce Mardin 2y ago <div className="flex flex-1 overflow-hidden">
64 7bd6cce Mardin 2y ago {isDesktop ? (
65 7bd6cce Mardin 2y ago <ResizablePanelGroup direction="horizontal" className="flex h-full w-full">
66 7bd6cce Mardin 2y ago <ResizablePanel
67 7bd6cce Mardin 2y ago collapsible
68 7bd6cce Mardin 2y ago collapsedSize={2}
69 7bd6cce Mardin 2y ago onCollapse={() => setCollapsed(true)}
70 7bd6cce Mardin 2y ago onExpand={() => setCollapsed(false)}
71 7bd6cce Mardin 2y ago minSize={15}
72 7bd6cce Mardin 2y ago className={cn("w-[120px] min-w-[70px]")}
73 7bd6cce Mardin 2y ago defaultSize={20}
74 7bd6cce Mardin 2y ago ref={panelRef}
75 7bd6cce Mardin 2y ago maxSize={30}
76 7bd6cce Mardin 2y ago >
77 7bd6cce Mardin 2y ago <DashboardSidebar
78 7bd6cce Mardin 2y ago collapsed={collapsed}
79 7bd6cce Mardin 2y ago setCollapsed={setCollapsed}
80 7bd6cce Mardin 2y ago />
81 7bd6cce Mardin 2y ago </ResizablePanel>
82 7bd6cce Mardin 2y ago <ResizableHandle withHandle className="w-[2px]" />
83 bfbbd1c Mardin 1y ago <ResizablePanel className="flex flex-col h-full">
84 bfbbd1c Mardin 1y ago <main className="flex-grow flex flex-col overflow-y-auto">
85 7bd6cce Mardin 2y ago <Suspense fallback={<Loading />}>
86 7bd6cce Mardin 2y ago <Outlet />
87 7bd6cce Mardin 2y ago </Suspense>
88 7bd6cce Mardin 2y ago </main>
89 7bd6cce Mardin 2y ago </ResizablePanel>
90 7bd6cce Mardin 2y ago </ResizablePanelGroup>
91 7bd6cce Mardin 2y ago ) : (
92 7bd6cce Mardin 2y ago <div className="flex flex-col h-full w-full">
93 7bd6cce Mardin 2y ago <main className="flex flex-col h-full overflow-y-auto">
94 c5c71ec Mardin 2y ago <Suspense fallback={<Loading />}>
95 c5c71ec Mardin 2y ago <Outlet />
96 c5c71ec Mardin 2y ago </Suspense>
97 86fae4b Mardin 1y ago <footer className="h-30 border-t-3 shrink-0 py-2 px-5">
98 7bd6cce Mardin 2y ago <DashboardBottomMenu variant={isSudo() ? "sudo-admin" : "admin"} />
99 7bd6cce Mardin 2y ago </footer>
100 c5c71ec Mardin 2y ago </main>
101 7bd6cce Mardin 2y ago </div>
102 7bd6cce Mardin 2y ago )}
103 7bd6cce Mardin 2y ago </div>
104 7bd6cce Mardin 2y ago <Toaster position="top-center" />
105 3d1a4b1 Mrdn 2y ago </div>
106 c5c71ec Mardin 2y ago );
107 3d1a4b1 Mrdn 2y ago };
108 88bd1b0 Mrdn 2y ago
109 3d1a4b1 Mrdn 2y ago export const Route = createFileRoute("/_dashboard")({
110 c5c71ec Mardin 2y ago component: () => <DashboardLayout />,
111 c5c71ec Mardin 2y ago beforeLoad: async () => {
112 c5c71ec Mardin 2y ago const loggedIn = await useAuth.getState().isLoggedIn();
113 c5c71ec Mardin 2y ago if (!loggedIn) {
114 c5c71ec Mardin 2y ago throw redirect({
115 c5c71ec Mardin 2y ago to: "/login",
116 c5c71ec Mardin 2y ago });
117 c5c71ec Mardin 2y ago }
118 c5c71ec Mardin 2y ago },
119 3d1a4b1 Mrdn 2y ago });