ln/app/client/pages/__root.tsx

39 lines
1.1 KiB
TypeScript

import { Button, Stack } from "@chakra-ui/react";
import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
import React from "react";
const TanStackRouterDevtools =
process.env.NODE_ENV === "production"
? () => null // Render nothing in production
: React.lazy(() =>
// Lazy load in development
import("@tanstack/router-devtools").then((res) => ({
default: res.TanStackRouterDevtools,
// For Embedded Mode
// default: res.TanStackRouterDevtoolsPanel
})),
);
export const Route = createRootRoute({
component: () => (
<Stack padding={3}>
<Stack flexDirection={"row"} justifyContent={"space-between"}>
<Link to="/">
<Button>Home</Button>
</Link>
<Stack flexDirection={"row"}>
<Link to="/login">
<Button>Sign in</Button>
</Link>
<Link to="/register">
<Button>Sign up</Button>
</Link>
</Stack>
</Stack>
<hr style={{ padding: "4px" }} />
<Outlet />
<TanStackRouterDevtools />
</Stack>
),
});