appkit/apps/dev-playground/client/src/routes/__root.tsx at 033192e2d68c223fcea3cbff489d47a78016afcc · databricks/appkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import { Button, TooltipProvider } from "@databricks/appkit-ui/react";
import {
  CatchBoundary,
  createRootRoute,
  Link,
  Outlet,
  useLocation,
} from "@tanstack/react-router";
import { ErrorComponent } from "@/components/error-component";
import { ThemeSelector } from "@/components/theme-selector";

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  const location = useLocation();
  const isHomePage = location.pathname === "/";

  return (
    <TooltipProvider>
      {!isHomePage && (
        <div className="border-b border-gray-200 bg-background px-6 py-4 sticky top-0 z-10 shadow-sm">
          <div className="max-w-7xl mx-auto">
            <nav className="flex items-center justify-between gap-4">
              <Link
                to="/"
                className="no-underline text-inherit hover:opacity-80 transition-opacity"
              >
                <h4 className="text-xl font-semibold tracking-tight text-foreground">
                  AppKit Playground
                </h4>
              </Link>
              <div className="flex items-center gap-3">
                <Link to="/analytics" className="no-underline">
                  <Button
                    variant="ghost"
                    className="text-foreground hover:text-secondary-foreground"
                  >
                    Analytics
                  </Button>
                </Link>
                <Link to="/arrow-analytics" className="no-underline">
                  <Button
                    variant="ghost"
                    className="text-foreground hover:text-secondary-foreground"
                  >
                    Arrow Analytics
                  </Button>
                </Link>
                <Link to="/lakebase" className="no-underline">
                  <Button
                    variant="ghost"
                    className="text-foreground hover:text-secondary-foreground"
                  >
                    Lakebase
                  </Button>
                </Link>
                <Link to="/reconnect" className="no-underline">
                  <Button
                    variant="ghost"
                    className="text-foreground hover:text-secondary-foreground"
                  >
                    Reconnect
                  </Button>
                </Link>
                <Link to="/telemetry" className="no-underline">
                  <Button
                    variant="ghost"
                    className="text-foreground hover:text-secondary-foreground"
                  >
                    Telemetry
                  </Button>
                </Link>
                <Link to="/sql-helpers" className="no-underline">
                  <Button
                    variant="ghost"
                    className="text-foreground hover:text-secondary-foreground"
                  >
                    SQL Helpers
                  </Button>
                </Link>
                <Link to="/genie" className="no-underline">
                  <Button
                    variant="ghost"
                    className="text-foreground hover:text-secondary-foreground"
                  >
                    Genie
                  </Button>
                </Link>
                <Link to="/chart-inference" className="no-underline">
                  <Button
                    variant="ghost"
                    className="text-foreground hover:text-secondary-foreground"
                  >
                    Chart Inference
                  </Button>
                </Link>
                <Link to="/files" className="no-underline">
                  <Button
                    variant="ghost"
                    className="text-foreground hover:text-secondary-foreground"
                  >
                    Files
                  </Button>
                </Link>
                <Link to="/agent" className="no-underline">
                  <Button
                    variant="ghost"
                    className="text-foreground hover:text-secondary-foreground"
                  >
                    Agent
                  </Button>
                </Link>
                <ThemeSelector />
              </div>
            </nav>
          </div>
        </div>
      )}
      <CatchBoundary
        getResetKey={() => location.pathname}
        onCatch={(error) => {
          console.error(error);
        }}
        errorComponent={(error) => <ErrorComponent error={error} />}
      >
        <Outlet />
      </CatchBoundary>
    </TooltipProvider>
  );
}