48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { Link, createRootRoute, useMatch, useMatches } from "@tanstack/react-router"
|
|
import { AnimatePresence } from "framer-motion"
|
|
import { Suspense, lazy } from "react"
|
|
import { AnimatedOutlet } from "../AnimatedOutlet"
|
|
|
|
|
|
const TanStackRouterDevtools = process.env.NODE_ENV === "production"
|
|
? () => null
|
|
: lazy(() => import("@tanstack/router-devtools").then(res => ({
|
|
default: res.TanStackRouterDevtools
|
|
})))
|
|
|
|
|
|
export function Root() {
|
|
|
|
const matches = useMatches()
|
|
const match = useMatch({ strict: false })
|
|
const nextMatch = matches[ matches.findIndex(d => d.id === match.id) + 1 ]
|
|
|
|
|
|
return <>
|
|
<div className="container mx-auto mt-8">
|
|
<div className="flex flex-row gap-2 justify-center content-center">
|
|
<Link to="/">
|
|
Home
|
|
</Link>
|
|
|
|
<Link to="/about">
|
|
About
|
|
</Link>
|
|
</div>
|
|
|
|
<AnimatePresence mode="popLayout">
|
|
<AnimatedOutlet
|
|
key={nextMatch.id}
|
|
initial={{ x: "100%" }}
|
|
animate={{ x: "0" }}
|
|
/>
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<Suspense><TanStackRouterDevtools /></Suspense>
|
|
</>
|
|
|
|
}
|
|
|
|
export const Route = createRootRoute({ component: Root })
|