feat: add info page

Author: mjkeaton

src/components/AppSidebar.tsx

@@ -1,4 +1,4 @@
-import { Bitcoin, Home, Inbox, Settings } from "lucide-react"
+import { Bitcoin, Home, Inbox, Settings, InfoIcon } from "lucide-react"
 import { NavLink } from "react-router";
 
 import {
@@ -34,6 +34,11 @@ const items = [
     url: "/settings",
     icon: Settings,
   },
+  {
+    title: "Info",
+    url: "/info",
+    icon: InfoIcon,
+  },
 ]
 
 export function AppSidebar() {

src/main.tsx

@@ -9,6 +9,7 @@ import QuotesPage from './pages/quotes/QuotesPage';
 import SettingsPage from './pages/settings/SettingsPage';
 import meta from './constants/meta';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import InfoPage from './pages/info/InfoPage';
 
 const queryClient = new QueryClient();
 
@@ -30,6 +31,7 @@ void prepare().then(() => {
               <Route path="balances" element={<BalancesPage />} />
               <Route path="quotes" element={<QuotesPage />} />
               <Route path="settings" element={<SettingsPage />} />
+              <Route path="info" element={<InfoPage />} />
             </Route>
           </Routes>
         </BrowserRouter>

src/pages/home/HomePage.tsx

@@ -9,22 +9,23 @@ function Loader() {
   return (
     <div className="flex flex-col gap-1.5 py-2">
       <Skeleton className="h-12 rounded-lg" />
-      <Skeleton className="h-12 rounded-lg" />
     </div>
   )
 }
 
-function HomePageBody() {
+function PageBody() {
   const { data } = useSuspenseQuery({
     queryKey: ["info"],
     queryFn: fetchInfo,
   });
 
   return (
     <>
-      <pre>
-        {JSON.stringify(data, null, 2)}
-      </pre>
+      <div className="flex flex-col gap-0.5 bg-accent text-accent-foreground rounded-lg p-2 my-2">
+        <span className="font-bold">{data.name}</span>
+        <span className="text-sm font-mono text-accent-foreground/50">{data.version}</span>
+        <span className="text-sm font-mono">{data.pubkey}</span>
+      </div>
     </>
   )
 }
@@ -34,7 +35,7 @@ export default function HomePage() {
     <>
       <PageTitle>Home</PageTitle>
       <Suspense fallback={<Loader />}>
-        <HomePageBody />
+        <PageBody />
       </Suspense>
     </>
   )

src/pages/info/InfoPage.tsx

@@ -0,0 +1,43 @@
+import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { PageTitle } from "@/components/PageTitle";
+import { Skeleton } from "@/components/ui/skeleton";
+import { fetchInfo } from "@/lib/api";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Suspense } from "react";
+
+
+function Loader() {
+  return (
+    <div className="flex flex-col gap-1.5 py-2">
+      <Skeleton className="h-48 rounded-lg" />
+    </div>
+  )
+}
+
+function PageBody() {
+  const { data } = useSuspenseQuery({
+    queryKey: ["info"],
+    queryFn: fetchInfo,
+  });
+
+  return (
+    <>
+      <pre className="text-sm bg-accent text-accent-foreground rounded-lg p-2 my-2">
+        {JSON.stringify(data, null, 2)}
+      </pre>
+    </>
+  )
+}
+
+export default function InfoPage() {
+  return (
+    <>
+      <Breadcrumbs>Info</Breadcrumbs>
+      <PageTitle>Info</PageTitle>
+      <Suspense fallback={<Loader />}>
+        <PageBody />
+      </Suspense>
+    </>
+  )
+}
+