Files
vite-react-template/src/routes/__root.tsx

52 lines
1.4 KiB
TypeScript

// import { LayoutMain } from '@/modules/layout'
const LayoutMain = null;
import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { Toaster } from '@/components/ui/sonner'
import { AuthProvider } from '@/pages/auth'
import { TooltipProvider } from '@/components/ui/tooltip'
import { Home } from 'lucide-react';
export const Route = createRootRoute({
component: RootComponent,
})
const BaseHeader = (props: { main?: React.ComponentType | null }) => {
if (props.main) {
const MainComponent = props.main
return <MainComponent />
}
return (
<>
<div className="flex gap-2 text-lg w-full h-12 items-center">
<div className='px-2'>
<Link
to="/"
activeProps={{
className: 'font-bold',
}}
activeOptions={{ exact: true }}
>
<Home className='w-5 h-5' />
</Link>
</div>
</div>
<hr />
</>
)
}
function RootComponent() {
return (
<div className='h-full overflow-hidden'>
<BaseHeader main={LayoutMain} />
<AuthProvider mustLogin={true}>
<TooltipProvider>
<main className='h-[calc(100%-3rem)] overflow-auto scrollbar'>
<Outlet />
</main>
</TooltipProvider>
</AuthProvider>
<TanStackRouterDevtools position="bottom-right" />
<Toaster />
</div>
)
}