chore: add basic pages

Author: mjkeaton

package-lock.json

@@ -20,6 +20,7 @@
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-router": "^7.2.0",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.7",
     "tailwindcss-animate": "^1.0.7"

package.json

@@ -1,4 +1,5 @@
-import { Bitcoin, Calendar, Home, Inbox, Search, Settings } from "lucide-react"
+import { Bitcoin, Home, Inbox, Settings } from "lucide-react"
+import { NavLink } from "react-router";
 
 import {
   Sidebar,
@@ -15,32 +16,22 @@ import {
 const items = [
   {
     title: "Home",
-    url: "#",
+    url: "/",
     icon: Home,
   },
   {
     title: "Balance",
-    url: "#",
+    url: "/balances",
     icon: Bitcoin,
   },
   {
     title: "Quotes",
-    url: "#",
+    url: "/quotes",
     icon: Inbox,
   },
-  /*{
-    title: "Calendar",
-    url: "#",
-    icon: Calendar,
-  },*/
-  {
-    title: "Search",
-    url: "#",
-    icon: Search,
-  },
   {
     title: "Settings",
-    url: "#",
+    url: "/settings",
     icon: Settings,
   },
 ]
@@ -56,10 +47,10 @@ export function AppSidebar() {
               {items.map((item) => (
                 <SidebarMenuItem key={item.title}>
                   <SidebarMenuButton asChild>
-                    <a href={item.url}>
+                    <NavLink to={item.url}>
                       <item.icon />
                       <span>{item.title}</span>
-                    </a>
+                    </NavLink>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
               ))}

src/App.css

@@ -1,13 +1,18 @@
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
 import { AppSidebar } from "@/components/AppSidebar"
+import { Outlet } from "react-router"
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function Layout() {
   return (
     <SidebarProvider>
       <AppSidebar />
-      <main>
-        <SidebarTrigger />
-        {children}
+      <main className="flex flex-col px-2 py-2">
+        <div>
+          <SidebarTrigger />
+        </div>
+        <div className="flex flex-col py-2">
+          <Outlet />
+        </div>
       </main>
     </SidebarProvider>
   )

src/App.tsx

@@ -1,10 +1,25 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter, Route, Routes } from "react-router";
 import './index.css'
-import App from './App.tsx'
+import Layout from './layout';
+import HomePage from './pages/home/HomePage'
+import BalancesPage from './pages/balances/BalancesPage'
+import QuotesPage from './pages/quotes/QuotesPage';
+import SettingsPage from './pages/settings/SettingsPage';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <Routes>
+        <Route  element={<Layout />}>
+          <Route index element={<HomePage />} />
+          <Route path="balances" element={<BalancesPage />} />
+          <Route path="quotes" element={<QuotesPage />} />
+          <Route path="settings" element={<SettingsPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   </StrictMode>,
+
 )

src/components/AppSidebar.tsx

@@ -0,0 +1,8 @@
+export default function BalancesPage() {
+  return (
+    <>
+      <h2>Balances</h2>
+    </>
+  )
+}
+

src/layout.tsx

@@ -0,0 +1,8 @@
+export default function HomePage() {
+  return (
+    <>
+      <h2>Home</h2>
+    </>
+  )
+}
+

src/main.tsx

@@ -0,0 +1,8 @@
+export default function QuotesPage() {
+  return (
+    <>
+      <h2>Quotes</h2>
+    </>
+  )
+}
+