router setup

keyko-io · May 16, 2023 · 2197983 · 2197983
1 parent 8d0a75f
commit 2197983
Show file tree

Hide file tree

Showing 14 changed files with 207 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fil+ metrics</title>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "axios": "^1.4.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/src/assets/blockchain.svg b/src/assets/blockchain.svg
diff --git a/src/assets/bug.svg b/src/assets/bug.svg
diff --git a/src/assets/fil-plus.svg b/src/assets/fil-plus.svg
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/assets/user.svg b/src/assets/user.svg
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,35 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { createBrowserRouter, RouterProvider } from "react-router-dom"
+import "./index.css"
+import Bugs from "./routes/Bugs"
+import Root from "./routes/root"
+import Blockchain from "./routes/Blockchain"
+import User from "./routes/User"
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Root />,
+    children: [
+      {
+        element: <Blockchain />,
+        index: true,
+      },
+      {
+        path: "user",
+        element: <User />,
+      },
+      {
+        path: "bugs",
+        element: <Bugs />,
+      },
+    ],
+  },
+])
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+    <RouterProvider router={router} />
+  </React.StrictMode>
 )
diff --git a/src/routes/Blockchain.tsx b/src/routes/Blockchain.tsx
@@ -0,0 +1,7 @@
+import React from "react"
+
+const Blockchain = () => {
+  return <div>Blockchain</div>
+}
+
+export default Blockchain
diff --git a/src/routes/Bugs.tsx b/src/routes/Bugs.tsx
@@ -0,0 +1,5 @@
+const Bugs = () => {
+  return <div>hello i am bugs page</div>
+}
+
+export default Bugs
diff --git a/src/routes/Root.tsx b/src/routes/Root.tsx
@@ -0,0 +1,56 @@
+import { Outlet, Link } from "react-router-dom"
+import logo from "../assets/fil-plus.svg"
+import blockchain from "../assets/blockchain.svg"
+import bug from "../assets/bug.svg"
+import user from "../assets/user.svg"
+
+const navigationItems = [
+  {
+    name: "Blockchain",
+    to: "",
+    svg: blockchain,
+  },
+  {
+    name: "User",
+    to: "user",
+    svg: user,
+  },
+  {
+    name: "Bugs",
+    to: "bugs",
+    svg: bug,
+  },
+]
+
+function Root() {
+  return (
+    <section className="flex">
+      <nav className="w-64 min-h-screen shadow-md">
+        <img
+          src={logo}
+          alt="logo"
+          className="h-16 w-full cursor-pointer my-4"
+        />
+        <div className="flex flex-col px-6">
+          {navigationItems.map((item) => {
+            return (
+              <Link
+                to={item.to}
+                className="flex h-6 items-center w-full space-x-4 py-6 cursor-pointer"
+              >
+                <img src={item.svg} alt="blockchain" className="h-6" />
+                <span>{item.name}</span>
+              </Link>
+            )
+          })}
+        </div>
+      </nav>
+
+      <main className="bg-[#E7E7E7] flex-1">
+        <Outlet />
+      </main>
+    </section>
+  )
+}
+
+export default Root
diff --git a/src/routes/User.tsx b/src/routes/User.tsx
@@ -0,0 +1,7 @@
+import React from "react"
+
+const User = () => {
+  return <div>User</div>
+}
+
+export default User