setup.tsx

import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'

import {
  Link,
  Outlet,
  RouterProvider,
  createRootRoute,
  createRoute,
  createRouter,
} from '@tanstack/react-router'
import { TanStackDevtools } from '@tanstack/react-devtools'
import { PackageJsonPanel } from './package-json-panel'

const rootRoute = createRootRoute({
  component: () => (
    <>
      <div className="p-2 flex gap-2">
        <Link to="/" className="[&.active]:font-bold">
          Home
        </Link>{' '}
        <Link to="/about" className="[&.active]:font-bold">
          About
        </Link>
      </div>
      <hr />
      <Outlet />
    </>
  ),
})
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: function Index() {
    return (
      <div className="p-2">
        <h3>Welcome Home!</h3>
      </div>
    )
  },
})
function About() {
  return (
    <div className="p-2">
      <h3>Hello from About!</h3>
    </div>
  )
}
const aboutRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/about',
  component: About,
})
const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
const router = createRouter({
  routeTree,
})
export default function DevtoolsExample() {
  return (
    <>
      <TanStackDevtools
        config={{ sourceAction: 'copy-path' }}
        plugins={[
          {
            name: 'TanStack Query',
            render: <ReactQueryDevtoolsPanel />,
          },
          {
            name: 'TanStack Router',
            render: <TanStackRouterDevtoolsPanel router={router} />,
          },
          {
            name: 'TanStack Router',
            render: <TanStackRouterDevtoolsPanel router={router} />,
          },
          {
            name: 'Package.json',
            render: () => <PackageJsonPanel />,
          },

          /* {
      name: "The actual app",
      render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
    } */
        ]}
      />
      <RouterProvider router={router} />
    </>
  )
}