|
1 | 1 | import { Route, Router } from "@solidjs/router"; |
2 | | -import { ErrorBoundary, For, type JSX, type ParentProps } from "solid-js"; |
| 2 | +import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"; |
| 3 | +import type { Component, ParentProps } from "solid-js"; |
| 4 | +import { ErrorBoundary } from "solid-js"; |
3 | 5 |
|
4 | 6 | import { Navbar } from "./Navbar"; |
| 7 | +import { Behaviors } from "./pages/Behaviors"; |
| 8 | +import { EdgeTypes } from "./pages/EdgeTypes"; |
5 | 9 | import { ErrorPage } from "./pages/Error"; |
| 10 | +import { GraphChildren } from "./pages/GraphChildren"; |
6 | 11 | import { Home } from "./pages/Home"; |
| 12 | +import { Layouts } from "./pages/Layouts"; |
| 13 | +import { NodeTypes } from "./pages/NodeTypes"; |
7 | 14 | import { NotFound } from "./pages/NotFound"; |
| 15 | +import { Overview } from "./pages/Overview"; |
| 16 | +import { States } from "./pages/States"; |
8 | 17 |
|
9 | | -type Page = { |
10 | | - readonly path: string; |
11 | | - readonly component: () => JSX.Element; |
12 | | -}; |
| 18 | +export interface Page { |
| 19 | + path: string; |
| 20 | + name: string; |
| 21 | + title: string; |
| 22 | + icon: string; |
| 23 | + component: Component; |
| 24 | +} |
13 | 25 |
|
14 | | -const PAGES: readonly Page[] = [ |
| 26 | +// Simple page definitions - keeping it minimal |
| 27 | +export const PAGES: Page[] = [ |
15 | 28 | { |
16 | 29 | path: "/", |
| 30 | + name: "Home", |
| 31 | + title: "Home", |
| 32 | + icon: "🏠", |
17 | 33 | component: Home, |
18 | 34 | }, |
| 35 | + { |
| 36 | + path: "/overview", |
| 37 | + name: "Overview", |
| 38 | + title: "Overview", |
| 39 | + icon: "📖", |
| 40 | + component: Overview, |
| 41 | + }, |
| 42 | + { |
| 43 | + path: "/node-types", |
| 44 | + name: "Node Types", |
| 45 | + title: "Node Types", |
| 46 | + icon: "🔷", |
| 47 | + component: NodeTypes, |
| 48 | + }, |
| 49 | + { |
| 50 | + path: "/edge-types", |
| 51 | + name: "Edge Types", |
| 52 | + title: "Edge Types", |
| 53 | + icon: "🔗", |
| 54 | + component: EdgeTypes, |
| 55 | + }, |
| 56 | + { |
| 57 | + path: "/states", |
| 58 | + name: "Element States", |
| 59 | + title: "States", |
| 60 | + icon: "⚡", |
| 61 | + component: States, |
| 62 | + }, |
| 63 | + { |
| 64 | + path: "/graph-children", |
| 65 | + name: "Graph Children", |
| 66 | + title: "Graph Children", |
| 67 | + icon: "👶", |
| 68 | + component: GraphChildren, |
| 69 | + }, |
| 70 | + { |
| 71 | + path: "/behaviors", |
| 72 | + name: "Behaviors", |
| 73 | + title: "Behaviors", |
| 74 | + icon: "🎯", |
| 75 | + component: Behaviors, |
| 76 | + }, |
| 77 | + { |
| 78 | + path: "/layouts", |
| 79 | + name: "Layouts", |
| 80 | + title: "Layouts", |
| 81 | + icon: "🌐", |
| 82 | + component: Layouts, |
| 83 | + }, |
19 | 84 | { |
20 | 85 | path: "*", |
| 86 | + name: "Not Found", |
| 87 | + title: "Not Found", |
| 88 | + icon: "❓", |
21 | 89 | component: NotFound, |
22 | 90 | }, |
23 | 91 | ]; |
24 | 92 |
|
25 | | -const MainContent = (props: ParentProps) => { |
| 93 | +// Simple navigation structure |
| 94 | +export const NAV_STRUCTURE = [ |
| 95 | + { |
| 96 | + name: "Home", |
| 97 | + icon: "🏠", |
| 98 | + pages: PAGES.filter((p) => p.path === "/"), |
| 99 | + }, |
| 100 | + { |
| 101 | + name: "Documentation", |
| 102 | + icon: "📖", |
| 103 | + pages: PAGES.filter((p) => p.path === "/overview"), |
| 104 | + }, |
| 105 | + { |
| 106 | + name: "Examples", |
| 107 | + icon: "📚", |
| 108 | + pages: PAGES.filter((p) => p.path !== "/" && p.path !== "/overview" && p.path !== "*"), |
| 109 | + }, |
| 110 | +]; |
| 111 | + |
| 112 | +// Create query client |
| 113 | +const queryClient = new QueryClient({ |
| 114 | + defaultOptions: { |
| 115 | + queries: { |
| 116 | + staleTime: 1000 * 60 * 5, // 5 minutes |
| 117 | + retry: 1, |
| 118 | + }, |
| 119 | + }, |
| 120 | +}); |
| 121 | + |
| 122 | +// Root layout component that includes the responsive navigation |
| 123 | +const RootLayout = (props: ParentProps) => { |
26 | 124 | return ( |
27 | | - <main class="flex flex-col h-full w-full grow overflow-auto bg-app-background"> |
28 | | - {props.children} |
29 | | - </main> |
| 125 | + <div class="min-h-screen bg-gray-100"> |
| 126 | + {/* Responsive Navigation */} |
| 127 | + <Navbar /> |
| 128 | + |
| 129 | + {/* Main content area - responsive margins */} |
| 130 | + <div class="pt-16 md:pt-0 md:ml-64"> |
| 131 | + <main class="min-h-screen">{props.children}</main> |
| 132 | + </div> |
| 133 | + </div> |
30 | 134 | ); |
31 | 135 | }; |
32 | 136 |
|
33 | | -const RootLayout = (props: ParentProps) => ( |
34 | | - <div id="root-screen" class="h-screen w-screen"> |
35 | | - <Navbar /> |
36 | | - <MainContent>{props.children}</MainContent> |
37 | | - </div> |
38 | | -); |
39 | | - |
40 | 137 | export const App = () => { |
41 | 138 | return ( |
42 | 139 | <ErrorBoundary fallback={(e, r) => <ErrorPage error={e} reset={r} />}> |
43 | | - <Router root={RootLayout}> |
44 | | - <For each={PAGES}>{(page) => <Route path={page.path} component={page.component} />}</For> |
45 | | - </Router> |
| 140 | + <QueryClientProvider client={queryClient}> |
| 141 | + <Router root={RootLayout}> |
| 142 | + <Route path="/" component={Home} /> |
| 143 | + <Route path="/overview" component={Overview} /> |
| 144 | + <Route path="/layouts" component={Layouts} /> |
| 145 | + <Route path="/node-types" component={NodeTypes} /> |
| 146 | + <Route path="/edge-types" component={EdgeTypes} /> |
| 147 | + <Route path="/behaviors" component={Behaviors} /> |
| 148 | + <Route path="/states" component={States} /> |
| 149 | + <Route path="/graph-children" component={GraphChildren} /> |
| 150 | + <Route path="*" component={NotFound} /> |
| 151 | + </Router> |
| 152 | + </QueryClientProvider> |
46 | 153 | </ErrorBoundary> |
47 | 154 | ); |
48 | 155 | }; |
0 commit comments