Todo work

packages/example/src/routes/__root.tsx

@@ -1,5 +1,8 @@
+import { Container, Flex, Theme } from "@radix-ui/themes"
+import "@radix-ui/themes/styles.css"
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/router-devtools"
+import "../index.css"
 
 
 export const Route = createRootRoute({
@@ -7,14 +10,18 @@ export const Route = createRootRoute({
 })
 
 function Root() {
-    return <>
-        <div className="container flex-row gap-2 justify-center items-center mx-auto mb-4">
-            <Link to="/">Index</Link>
-            <Link to="/time">Time</Link>
-            <Link to="/count">Count</Link>
-        </div>
+    return (
+        <Theme>
+            <Container>
+                <Flex direction="row" justify="center" align="center" gap="2">
+                    <Link to="/">Index</Link>
+                    <Link to="/time">Time</Link>
+                    <Link to="/count">Count</Link>
+                </Flex>
+            </Container>
 
-        <Outlet />
-        <TanStackRouterDevtools />
-    </>
+            <Outlet />
+            <TanStackRouterDevtools />
+        </Theme>
+    )
 }

packages/example/src/routes/index.tsx

@@ -1,6 +1,7 @@
 import { TodosContext } from "@/todos/reffuse"
 import { TodosState } from "@/todos/services"
 import { VTodos } from "@/todos/views/VTodos"
+import { Container } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Layer } from "effect"
 import { useMemo } from "react"
@@ -18,11 +19,11 @@ function Index() {
 
 
     return (
-        <div className="container mx-auto">
+        <Container>
             <TodosContext.Provider layer={todosLayer}>
                 <VTodos />
             </TodosContext.Provider>
-        </div>
+        </Container>
     )
 
 }