initial commit

src/routes/__root.tsx

@@ -0,0 +1,34 @@
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import Header from '../components/Header'
+
+import TanStackQueryDevtools from '../integrations/tanstack-query/devtools'
+
+import type { QueryClient } from '@tanstack/react-query'
+
+interface MyRouterContext {
+  queryClient: QueryClient
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  component: () => (
+    <>
+      <Header />
+      <Outlet />
+      <TanStackDevtools
+        config={{
+          position: 'bottom-right',
+        }}
+        plugins={[
+          {
+            name: 'Tanstack Router',
+            render: <TanStackRouterDevtoolsPanel />,
+          },
+          TanStackQueryDevtools,
+        ]}
+      />
+    </>
+  ),
+})

src/routes/demo/tanstack-query.tsx

@@ -0,0 +1,45 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+
+export const Route = createFileRoute('/demo/tanstack-query')({
+  component: TanStackQueryDemo,
+})
+
+function TanStackQueryDemo() {
+  const { data } = useQuery({
+    queryKey: ['todos'],
+    queryFn: () =>
+      Promise.resolve([
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Bob' },
+        { id: 3, name: 'Charlie' },
+      ]),
+    initialData: [],
+  })
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 95% 5%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-2xl mb-4">
+          TanStack Query Simple Promise Handling
+        </h1>
+        <ul className="mb-4 space-y-2">
+          {data.map((todo) => (
+            <li
+              key={todo.id}
+              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white">{todo.name}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}

src/routes/index.tsx

@@ -0,0 +1,39 @@
+import { createFileRoute } from '@tanstack/react-router'
+import logo from '../logo.svg'
+
+export const Route = createFileRoute('/')({
+  component: App,
+})
+
+function App() {
+  return (
+    <div className="text-center">
+      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
+        <img
+          src={logo}
+          className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
+          alt="logo"
+        />
+        <p>
+          Edit <code>src/routes/index.tsx</code> and save to reload.
+        </p>
+        <a
+          className="text-[#61dafb] hover:underline"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+        <a
+          className="text-[#61dafb] hover:underline"
+          href="https://tanstack.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn TanStack
+        </a>
+      </header>
+    </div>
+  )
+}