add router

This commit is contained in:
Victor Oliva
2024-10-22 16:20:30 +02:00
parent f2ee28e154
commit 5c4fccb11e
7 changed files with 46 additions and 9 deletions

View File

@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PAPI Console</title>
</head>
<body class="bg-polkadot-950 text-polkadot-100">
<div id="root"></div>
<body class="text-polkadot-100 bg-black">
<div id="root" class="flex justify-center"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

View File

@@ -1,3 +1,16 @@
import { Navigate, Route, Routes } from "react-router-dom"
import { Header } from "./pages/Header"
import { Extrinsics } from "./pages/Extrinsics"
export default function App() {
return <div>App</div>
return (
<div className="w-full max-w-screen-lg h-screen bg-polkadot-950 flex flex-col">
<Header />
<Routes>
<Route path="extrinsics/*" element={<Extrinsics />} />
<Route path="*" element={<Navigate to="/extrinsics" replace />} />
</Routes>
</div>
)
}

2
src/chain.state.ts Normal file
View File

@@ -0,0 +1,2 @@

View File

@@ -1,10 +1,13 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import App from "./App.tsx"
import "./index.css"
import { BrowserRouter } from "react-router-dom"
createRoot(document.getElementById('root')!).render(
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
)

View File

@@ -0,0 +1,3 @@
export const Extrinsics = () => {
return <div>Foo</div>
}

View File

@@ -0,0 +1 @@
export * from "./Extrinsics"

15
src/pages/Header.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { Link } from "react-router-dom"
export const Header = () => (
<div className="flex bg-polkadot-900 p-2 items-center flex-shrink-0">
<h1 className="text-xl flex-1">PAPI Console</h1>
<div className="flex flex-row items-center justify-end">
<Link
to="/extrinsics"
className="text-polkadot-200 border-polkadot-200 cursor-pointer border-b hover:text-polkadot-500 hover:border-polkadot-500"
>
Extrinsics
</Link>
</div>
</div>
)