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 · v0.4.0
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 3d1a4b1 Mrdn 2y ago } from "@marzneshin/components";
11 3d1a4b1 Mrdn 2y ago import { useAuth } from "@marzneshin/features/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 3d1a4b1 Mrdn 2y ago import { useScreenBreakpoint } from "@marzneshin/hooks/use-screen-breakpoint";
15 3d1a4b1 Mrdn 2y ago import { cn } from "@marzneshin/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 7bd6cce Mardin 2y ago import { VersionIndicator } from "@marzneshin/features/version-indicator";
27 1eb203e Mrdn 2y ago
28 1eb203e Mrdn 2y ago export const DashboardLayout = () => {
29 c5c71ec Mardin 2y ago const isDesktop = useScreenBreakpoint("md");
30 c5c71ec Mardin 2y ago const {
31 c5c71ec Mardin 2y ago collapsed,
32 c5c71ec Mardin 2y ago panelRef,
33 c5c71ec Mardin 2y ago setCollapsed,
34 c5c71ec Mardin 2y ago toggleCollapse,
35 c5c71ec Mardin 2y ago } = usePanelToggle(isDesktop);
36 7bd6cce Mardin 2y ago const { isSudo } = useAuth();
37 d42c6e6 Mardin 2y ago const { data: stats } = useGithubRepoStatsQuery()
38 1eb203e Mrdn 2y ago
39 c5c71ec Mardin 2y ago return (
40 c5c71ec Mardin 2y ago <div className="flex flex-col w-screen h-screen">
41 c5c71ec Mardin 2y ago <Header
42 65afe33 Mardin 2y ago start={
43 c5c71ec Mardin 2y ago <>
44 c5c71ec Mardin 2y ago <Link to="/">
45 c5c71ec Mardin 2y ago <HeaderLogo />
46 c5c71ec Mardin 2y ago </Link>
47 65afe33 Mardin 2y ago {isDesktop && (
48 65afe33 Mardin 2y ago
49 65afe33 Mardin 2y ago <ToggleButton
50 65afe33 Mardin 2y ago collapsed={collapsed}
51 65afe33 Mardin 2y ago onToggle={toggleCollapse}
52 65afe33 Mardin 2y ago />
53 65afe33 Mardin 2y ago )}
54 c5c71ec Mardin 2y ago </>
55 c5c71ec Mardin 2y ago }
56 7bd6cce Mardin 2y ago center={<CommandBox />}
57 c5c71ec Mardin 2y ago end={
58 c5c71ec Mardin 2y ago <>
59 d42c6e6 Mardin 2y ago <GithubRepo {...stats} variant={isDesktop ? "full" : "mini"} />
60 c5c71ec Mardin 2y ago <HeaderMenu />
61 c5c71ec Mardin 2y ago </>
62 c5c71ec Mardin 2y ago }
63 88bdde2 Mrdn 2y ago />
64 7bd6cce Mardin 2y ago <div className="flex flex-1 overflow-hidden">
65 7bd6cce Mardin 2y ago {isDesktop ? (
66 7bd6cce Mardin 2y ago <ResizablePanelGroup direction="horizontal" className="flex h-full w-full">
67 7bd6cce Mardin 2y ago <ResizablePanel
68 7bd6cce Mardin 2y ago collapsible
69 7bd6cce Mardin 2y ago collapsedSize={2}
70 7bd6cce Mardin 2y ago onCollapse={() => setCollapsed(true)}
71 7bd6cce Mardin 2y ago onExpand={() => setCollapsed(false)}
72 7bd6cce Mardin 2y ago minSize={15}
73 7bd6cce Mardin 2y ago className={cn("w-[120px] min-w-[70px]")}
74 7bd6cce Mardin 2y ago defaultSize={20}
75 7bd6cce Mardin 2y ago ref={panelRef}
76 7bd6cce Mardin 2y ago maxSize={30}
77 7bd6cce Mardin 2y ago >
78 7bd6cce Mardin 2y ago <DashboardSidebar
79 7bd6cce Mardin 2y ago collapsed={collapsed}
80 7bd6cce Mardin 2y ago setCollapsed={setCollapsed}
81 7bd6cce Mardin 2y ago />
82 7bd6cce Mardin 2y ago </ResizablePanel>
83 7bd6cce Mardin 2y ago <ResizableHandle withHandle className="w-[2px]" />
84 7bd6cce Mardin 2y ago <ResizablePanel className="flex-col flex justify-between">
85 7bd6cce Mardin 2y ago <main className="flex flex-col h-full">
86 7bd6cce Mardin 2y ago <Suspense fallback={<Loading />}>
87 7bd6cce Mardin 2y ago <Outlet />
88 7bd6cce Mardin 2y ago </Suspense>
89 7bd6cce Mardin 2y ago </main>
90 7bd6cce Mardin 2y ago <footer className="h-10 py-2">
91 7bd6cce Mardin 2y ago <VersionIndicator />
92 7bd6cce Mardin 2y ago </footer>
93 7bd6cce Mardin 2y ago </ResizablePanel>
94 7bd6cce Mardin 2y ago </ResizablePanelGroup>
95 7bd6cce Mardin 2y ago ) : (
96 7bd6cce Mardin 2y ago <div className="flex flex-col h-full w-full">
97 7bd6cce Mardin 2y ago <main className="flex flex-col h-full overflow-y-auto">
98 c5c71ec Mardin 2y ago <Suspense fallback={<Loading />}>
99 c5c71ec Mardin 2y ago <Outlet />
100 c5c71ec Mardin 2y ago </Suspense>
101 7bd6cce Mardin 2y ago <footer className="h-30 border-t-3 py-2 px-5">
102 7bd6cce Mardin 2y ago <DashboardBottomMenu variant={isSudo() ? "sudo-admin" : "admin"} />
103 7bd6cce Mardin 2y ago </footer>
104 c5c71ec Mardin 2y ago </main>
105 7bd6cce Mardin 2y ago </div>
106 7bd6cce Mardin 2y ago )}
107 7bd6cce Mardin 2y ago </div>
108 7bd6cce Mardin 2y ago <Toaster position="top-center" />
109 3d1a4b1 Mrdn 2y ago </div>
110 c5c71ec Mardin 2y ago );
111 3d1a4b1 Mrdn 2y ago };
112 88bd1b0 Mrdn 2y ago
113 3d1a4b1 Mrdn 2y ago export const Route = createFileRoute("/_dashboard")({
114 c5c71ec Mardin 2y ago component: () => <DashboardLayout />,
115 c5c71ec Mardin 2y ago beforeLoad: async () => {
116 c5c71ec Mardin 2y ago const loggedIn = await useAuth.getState().isLoggedIn();
117 c5c71ec Mardin 2y ago if (!loggedIn) {
118 c5c71ec Mardin 2y ago throw redirect({
119 c5c71ec Mardin 2y ago to: "/login",
120 c5c71ec Mardin 2y ago });
121 c5c71ec Mardin 2y ago }
122 c5c71ec Mardin 2y ago },
123 3d1a4b1 Mrdn 2y ago });