Thilawyn/todo-tests
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI work

Browse Source
This commit is contained in:
Julien Valverdé
2024-07-20 01:39:39 +02:00
parent 0e4950a3cd
commit 35dc1b2b44
2 changed files with 42 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webui/src/main.tsx
View File

@@ -20,7 +20,7 @@ declare module "@tanstack/react-router" {
ReactDOM.createRoot(document.getElementById("root")!).render( ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode> <React.StrictMode>
<Theme> <Theme appearance="dark">
<TRPCClientProvider> <TRPCClientProvider>
<RouterProvider router={router} /> <RouterProvider router={router} />
</TRPCClientProvider> </TRPCClientProvider>

60
packages/webui/src/routes/__root.tsx
View File

@@ -1,4 +1,5 @@
import { Link, createRootRoute, useMatch, useMatches } from "@tanstack/react-router" import { Button, Container, Flex } from "@radix-ui/themes"
import { createRootRoute, useMatch, useMatches, useNavigate } from "@tanstack/react-router"
import { AnimatePresence } from "framer-motion" import { AnimatePresence } from "framer-motion"
import { Suspense, lazy } from "react" import { Suspense, lazy } from "react"
import { AnimatedOutlet } from "../AnimatedOutlet" import { AnimatedOutlet } from "../AnimatedOutlet"
@@ -10,6 +11,12 @@ const TanStackRouterDevtools = process.env.NODE_ENV === "production"
default: res.TanStackRouterDevtools default: res.TanStackRouterDevtools
}))) })))
const ThemePanel = process.env.NODE_ENV === "production"
? () => null
: lazy(() => import("@radix-ui/themes").then(res => ({
default: res.ThemePanel
})))
export function Root() { export function Root() {
@@ -17,33 +24,48 @@ export function Root() {
const match = useMatch({ strict: false }) const match = useMatch({ strict: false })
const nextMatch = matches[ matches.findIndex(d => d.id === match.id) + 1 ] const nextMatch = matches[ matches.findIndex(d => d.id === match.id) + 1 ]
const navigate = useNavigate()
return <> return <>
<div className="container mx-auto mt-8"> <Container pt="8" pb="4">
<div className="flex flex-row gap-2 justify-center content-center"> <Flex
<Link to="/"> gap="4"
justify="center"
align="center"
>
<Button
variant="soft"
onClick={() => navigate({ to: "/" })}
>
Home Home
</Link> </Button>
<Link to="/about"> <Button
variant="soft"
onClick={() => navigate({ to: "/about" })}
>
About About
</Link> </Button>
</div> </Flex>
</Container>
<AnimatePresence mode="popLayout"> <AnimatePresence mode="popLayout">
<AnimatedOutlet <AnimatedOutlet
key={nextMatch.id} key={nextMatch.id}
transition={{ x: { type: "spring", stiffness: 300, damping: 30 } }} transition={{ x: { type: "spring", stiffness: 300, damping: 30 } }}
initial={{ x: "100vw", opacity: 0 }} initial={{ x: "100vw", opacity: 0 }}
animate={{ x: "0", opacity: 1 }} animate={{ x: "0", opacity: 1 }}
exit={{ x: "-100vw", opacity: 0 }} exit={{ x: "-100vw", opacity: 0 }}
/> />
</AnimatePresence> </AnimatePresence>
</div>
<Suspense><TanStackRouterDevtools /></Suspense> <Suspense>
<TanStackRouterDevtools />
<ThemePanel />
</Suspense>
</> </>
} }