66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import {
|
|
HeadContent,
|
|
Outlet,
|
|
Scripts,
|
|
createRootRouteWithContext,
|
|
} from "@tanstack/solid-router";
|
|
import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
|
|
import { QueryClientProvider, QueryClient } from "@tanstack/solid-query";
|
|
import type { Transport } from "@connectrpc/connect";
|
|
import { TransportProvider } from "~/integrations/connect-query/solid";
|
|
|
|
import "@fontsource/inter/400.css";
|
|
|
|
import { HydrationScript } from "solid-js/web";
|
|
import { Suspense } from "solid-js";
|
|
|
|
import styleCss from "~/styles.css?url";
|
|
import Header from "~/components/Header";
|
|
import { ThemeProvider } from "~/components/theme-provider";
|
|
|
|
export interface MyRouterContext {
|
|
queryClient: QueryClient;
|
|
transport: Transport;
|
|
}
|
|
|
|
export function ErrorComponent({ error }: { error: Error }) {
|
|
console.log(error);
|
|
return <div>Error: {error.message}</div>;
|
|
}
|
|
|
|
export const Route = createRootRouteWithContext<MyRouterContext>()({
|
|
head: () => ({
|
|
links: [{ rel: "stylesheet", href: styleCss }],
|
|
}),
|
|
shellComponent: RootComponent,
|
|
errorComponent: ErrorComponent,
|
|
});
|
|
|
|
function RootComponent() {
|
|
const context = Route.useRouteContext();
|
|
console.log("Root context:", context());
|
|
return (
|
|
<html>
|
|
<head>
|
|
<HydrationScript />
|
|
<HeadContent />
|
|
</head>
|
|
<body>
|
|
<TransportProvider transport={context().transport}>
|
|
<QueryClientProvider client={context().queryClient}>
|
|
<Suspense>
|
|
<ThemeProvider>
|
|
<Header />
|
|
<Outlet />
|
|
</ThemeProvider>
|
|
|
|
<TanStackRouterDevtools />
|
|
</Suspense>
|
|
</QueryClientProvider>
|
|
</TransportProvider>
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|