From e6ae7aacfce121f029ebae20b4cdaf9418beaff0 Mon Sep 17 00:00:00 2001
From: sehnryr <youn@melois.dev>
Date: Sun, 20 Oct 2024 21:54:48 +0200
Subject: [PATCH] add page switch on click

---
 src-www/App.tsx                | 16 +++++++++++++---
 src-www/components/NavItem.tsx |  6 +++++-
 src-www/pages/More.tsx         |  7 +++++++
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 src-www/pages/More.tsx

diff --git a/src-www/App.tsx b/src-www/App.tsx
index a54b102..d1633d3 100644
--- a/src-www/App.tsx
+++ b/src-www/App.tsx
@@ -1,8 +1,18 @@
+import { useState } from "react";
+
 import NavBar from "./components/NavBar.tsx";
 import NavItem from "./components/NavItem.tsx";
 import Extension from "./pages/Extensions.tsx";
+import More from "./pages/More.tsx";
 
 export default function App() {
+  const [page, setPage] = useState("extension");
+
+  const pages: { [key: string]: React.ReactNode } = {
+    extension: <Extension />,
+    more: <More />,
+  };
+
   return (
     <div
       style={{
@@ -13,13 +23,13 @@ export default function App() {
       }}
     >
       <main style={{ flex: 1 }}>
-        <Extension />
+        {pages[page]}
       </main>
       <NavBar>
-        <NavItem>
+        <NavItem onClick={() => setPage("extension")}>
           <span>Extensions</span>
         </NavItem>
-        <NavItem>
+        <NavItem onClick={() => setPage("more")}>
           <span>More</span>
         </NavItem>
       </NavBar>
diff --git a/src-www/components/NavItem.tsx b/src-www/components/NavItem.tsx
index b1f7f1c..715f65b 100644
--- a/src-www/components/NavItem.tsx
+++ b/src-www/components/NavItem.tsx
@@ -1,7 +1,11 @@
-export default function NavItem({ children }: { children: React.ReactNode }) {
+export default function NavItem(
+  { onClick, children }: { onClick: () => void; children: React.ReactNode },
+) {
   return (
     <a
+      onClick={onClick}
       style={{
+        cursor: "pointer",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
diff --git a/src-www/pages/More.tsx b/src-www/pages/More.tsx
new file mode 100644
index 0000000..d96c49c
--- /dev/null
+++ b/src-www/pages/More.tsx
@@ -0,0 +1,7 @@
+export default function More() {
+  return (
+    <div>
+      <h1>More</h1>
+    </div>
+  );
+}