basic pages

src/routes/$namespace/$chainId.tsx

@@ -0,0 +1,22 @@
+import { redirect } from "@tanstack/react-router";
+import { requireChains } from "@/entities/chain/lib";
+import { useChainState } from "@/entities/chain/model";
+import { createFileRoute } from "@tanstack/react-router";
+
+function ChainPage() {
+  return <div className="mt-8">Content</div>;
+}
+
+export const Route = createFileRoute("/$namespace/$chainId")({
+  component: ChainPage,
+  loader: async ({ params }) => {
+    await requireChains();
+    const chains = useChainState.getState().chains;
+
+    if (typeof chains === "undefined")
+      throw redirect({ to: "/$namespace", params });
+
+    const selectedChain = chains.find((value) => value._id === params.chainId);
+    if (!selectedChain) throw redirect({ to: "/$namespace", params });
+  },
+});

src/routes/$namespace/index.tsx

@@ -0,0 +1,24 @@
+import { redirect } from "@tanstack/react-router";
+import { requireChains } from "@/entities/chain/lib";
+import { useChainState } from "@/entities/chain/model";
+import { createFileRoute } from "@tanstack/react-router";
+
+function IndexPage() {
+  return <div className="mt-8">content</div>;
+}
+
+export const Route = createFileRoute("/$namespace/")({
+  component: IndexPage,
+  loader: async ({ params }) => {
+    await requireChains();
+    const chains = useChainState.getState().chains;
+
+    if (typeof chains === "undefined") throw redirect({ to: "/" });
+
+    if (chains.length > 0)
+      throw redirect({
+        to: `/$namespace/$chainId`,
+        params: { namespace: params.namespace, chainId: chains[0]._id },
+      });
+  },
+});

src/routes/__root.tsx

@@ -1,9 +1,15 @@
+import { Header } from "@/widgets/header";
+import { Sidebar } from "@/widgets/sidebar";
 import { createRootRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
   component: () => (
-    <>
+    <div>
-      <Outlet />
+      <Header />
-    </>
+      <div className="flex gap-x-4 overflow-hidden">
+        <Sidebar />
+        <Outlet />
+      </div>
+    </div>
   ),
 });

src/routes/index.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 function IndexPage() {
-  return <div>hi</div>;
+  return <div className="mt-8">Сервис недоступен</div>;
 }
 
 export const Route = createFileRoute("/")({