db/examples/react/offline-transactions/src/routes/__root.tsx at 1f7f9365d6063498fb862ba114eac04da4c9cf82 · TanStack/db · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/// <reference types="vite/client" />
import {
  HeadContent,
  Link,
  Scripts,
  createRootRoute,
} from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { QueryClientProvider } from '@tanstack/react-query'
import * as React from 'react'
import appCss from '~/styles/app.css?url'
import { queryClient } from '~/utils/queryClient'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: `utf-8`,
      },
      {
        name: `viewport`,
        content: `width=device-width, initial-scale=1`,
      },
    ],
    links: [{ rel: `stylesheet`, href: appCss }],
  }),
  shellComponent: RootDocument,
})

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        <QueryClientProvider client={queryClient}>
          <div className="bg-white shadow-sm border-b">
            <div className="max-w-4xl mx-auto px-6 py-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span className="text-2xl">⚡</span>
                  <span className="text-xl font-bold text-gray-900">
                    TanStack Offline Transactions
                  </span>
                </div>
                <div className="flex gap-6 text-sm">
                  <Link
                    to="/"
                    activeProps={{
                      className: `font-bold text-blue-600`,
                    }}
                    activeOptions={{ exact: true }}
                    className="text-gray-600 hover:text-gray-900"
                  >
                    Home
                  </Link>
                  <Link
                    to="/indexeddb"
                    activeProps={{
                      className: `font-bold text-blue-600`,
                    }}
                    className="text-gray-600 hover:text-gray-900"
                  >
                    🗄️ IndexedDB
                  </Link>
                  <Link
                    to="/localstorage"
                    activeProps={{
                      className: `font-bold text-blue-600`,
                    }}
                    className="text-gray-600 hover:text-gray-900"
                  >
                    💾 localStorage
                  </Link>
                  <Link
                    to="/wa-sqlite"
                    activeProps={{
                      className: `font-bold text-blue-600`,
                    }}
                    className="text-gray-600 hover:text-gray-900"
                  >
                    🗃️ wa-sqlite
                  </Link>
                </div>
              </div>
            </div>
          </div>
          <hr />
          {children}
          <TanStackRouterDevtools position="bottom-right" />
        </QueryClientProvider>
        <Scripts />
      </body>
    </html>
  )
}