freshyo/apps/web-ui/src/routes/__root.tsx
2026-05-20 09:29:36 +05:30

60 lines
1.8 KiB
TypeScript

import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { TanStackDevtools } from '@tanstack/react-devtools'
import { QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { trpc, getTrpcClient } from '../lib/trpc-client'
import { getQueryClient } from '../lib/query-client'
import { AuthProvider } from '../lib/auth-context'
import appCss from '../styles.css?url'
const queryClient = getQueryClient()
const trpcClient = getTrpcClient()
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: 'utf-8' },
{
name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
{ title: 'Freshyo - Fresh Meat Delivery' },
],
links: [
{ rel: 'stylesheet', href: appCss },
{ rel: 'icon', type: 'image/png', href: '/favicon.png' },
],
}),
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<HeadContent />
</head>
<body>
<QueryClientProvider client={queryClient}>
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<AuthProvider>
<div id="app">{children}</div>
<ReactQueryDevtools />
</AuthProvider>
</trpc.Provider>
</QueryClientProvider>
<TanStackDevtools
config={{ position: 'bottom-right' }}
plugins={[
{
name: 'Tanstack Router',
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>
<Scripts />
</body>
</html>
)
}