Use Page component

src/components/AppBar/AppBar.css

@@ -1,32 +0,0 @@
-.appBar {
-  height: 40px;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--codex-border-color);
-  view-transition-name: main-header;
-  display: flex;
-  padding: 0.75rem 1.5rem;
-}
-
-.appBar-burger {
-  cursor: pointer;
-  color: var(--codex-color);
-  display: flex;
-}
-
-.appBar,
-.appBar-left,
-.appBar-right {
-  display: flex;
-  align-items: center;
-}
-
-.appBar-left,
-.appBar-right {
-  gap: 0.75rem;
-}
-
-@media (min-width: 1000px) {
-  .appBar-burger {
-    display: none;
-  }
-}

src/components/AppBar/AppBar.tsx

@@ -1,26 +0,0 @@
-import { Menu } from "lucide-react";
-import { NetworkIndicator } from "../NetworkIndicator/NetworkIndicator";
-import { NodeIndicator } from "../NodeIndicator/NodeIndicator";
-import "./AppBar.css";
-import { ICON_SIZE } from "../../utils/constants";
-
-type Props = {
-  onExpand: () => void;
-};
-
-export function AppBar({ onExpand }: Props) {
-  return (
-    <div className="appBar">
-      <div className="appBar-left">
-        <a className="appBar-burger" href="#">
-          <Menu onClick={onExpand} size={ICON_SIZE} />
-        </a>
-        <span>Home</span>
-      </div>
-      <div className="appBar-right">
-        <NodeIndicator />
-        <NetworkIndicator />
-      </div>
-    </div>
-  );
-}

src/components/HttpNetworkIndicator/HttpNetworkIndicator.tsx

@@ -0,0 +1,10 @@
+import { NetworkIndicator } from "@codex/marketplace-ui-components";
+import { useNetwork } from "../../network/useNetwork";
+
+export function HttpNetworkIndicator() {
+  const online = useNetwork();
+
+  const text = online ? "Online" : "Offline";
+
+  return <NetworkIndicator online={online} text={text} />;
+}

src/components/Menu/Menu.css

@@ -1,64 +0,0 @@
-.menu {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--codex-background-secondary);
-  border-radius: var(--codex-border-radius);
-  transform: translatex(-224px);
-  transition: transform 0.25s;
-  position: fixed;
-  min-width: 200px;
-  z-index: 1;
-  view-transition-name: main-menu;
-  height: 100%;
-}
-
-.menu-container {
-  padding: 0.75rem;
-}
-
-.menu-backdrop {
-  display: none;
-}
-
-.menu[aria-expanded] {
-  transform: translatex(0);
-  min-width: 200px;
-}
-
-.menu-header {
-  margin-bottom: 0.75rem;
-}
-
-.menu-item,
-.menu-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.menu-item {
-  padding: 0.75rem;
-  color: var(--codex-color);
-  margin-bottom: 0.75rem;
-}
-
-.menu-item:hover,
-.menu-item.active {
-  background-color: var(--codex-background-light);
-}
-
-.menu-title {
-  text-transform: uppercase;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 0.75rem;
-  display: inline-block;
-  font-weight: 500;
-}
-
-@media (min-width: 1000px) {
-  .menu {
-    transform: translatex(0px);
-    position: inherit;
-  }
-}

src/components/Menu/Menu.tsx

@@ -1,83 +0,0 @@
-import {
-  Home,
-  Star,
-  Server,
-  Settings,
-  HelpCircle,
-  ShoppingBag,
-} from "lucide-react";
-import { attributes } from "../../utils/attributes";
-import { Link } from "@tanstack/react-router";
-import "./Menu.css";
-import logo from "../../assets/logo-inverse.svg";
-import { ICON_SIZE } from "../../utils/constants";
-
-type Props = {
-  expanded: boolean;
-  onClose: () => void;
-};
-
-export function Menu({ expanded, onClose }: Props) {
-  const attr = attributes({ "aria-expanded": expanded });
-
-  return (
-    <>
-      <div className="backdrop" onClick={onClose} {...attr}></div>
-
-      <aside className="menu" {...attr}>
-        <div className="menu-container">
-          <div className="menu-header">
-            <img width="50" height="50" src={logo} alt="Logo" />
-            <span className="menu-separator">|</span>
-            <span className="menu-name">Codex</span>
-          </div>
-          <Link
-            onClick={onClose}
-            to="/dashboard"
-            activeOptions={{ exact: true }}
-            className="menu-item">
-            <Home size={ICON_SIZE} />
-            Dashboard
-          </Link>
-          <Link
-            onClick={onClose}
-            to="/dashboard/favorites"
-            className="menu-item">
-            <Star size={ICON_SIZE} />
-            Favorites
-          </Link>
-          <hr />
-          <small className="menu-title">Rent</small>
-          <Link
-            onClick={onClose}
-            to="/dashboard/purchases"
-            className="menu-item">
-            <ShoppingBag size={ICON_SIZE} />
-            Purchases
-          </Link>
-          <hr />
-          <small className="menu-title">Hosts</small>
-          <Link
-            onClick={onClose}
-            to="/dashboard/availabilities"
-            className="menu-item">
-            <Server size={ICON_SIZE} />
-            Availabilities
-          </Link>
-          <Link
-            onClick={onClose}
-            to="/dashboard/settings"
-            className="menu-item">
-            <Settings size={ICON_SIZE} />
-            Settings
-          </Link>
-          <hr />
-          <Link onClick={onClose} to="/dashboard/help" className="menu-item">
-            <HelpCircle size={ICON_SIZE} />
-            Help
-          </Link>
-        </div>
-      </aside>
-    </>
-  );
-}

src/components/NetworkIndicator/NetworkIndicator.tsx

@@ -1,21 +0,0 @@
-import { useNetwork } from "../../network/useNetwork";
-
-export function NetworkIndicator() {
-  const online = useNetwork();
-
-  if (online) {
-    return (
-      <div className="indicator">
-        <div className="indicator-point indicator-point-online"></div>
-        <span>Online</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="indicator">
-      <div className="indicator-point indicator-point-offline"></div>
-      <span>Offline</span>
-    </div>
-  );
-}

src/components/NodeIndicator/NodeIndicator.tsx

@@ -2,6 +2,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect } from "react";
 import { CodexSdk } from "../../sdk/codex";
 import { Promises } from "../../utils/promises";
+import { NetworkIndicator } from "@codex/marketplace-ui-components";
 
 function useNodeNetwork() {
   const { data, isError } = useQuery({
@@ -14,6 +15,8 @@ function useNodeNetwork() {
     refetchInterval: 5000,
   });
 
+  // TODO handle error
+
   return !isError && !!data;
 }
 
@@ -28,19 +31,5 @@ export function NodeIndicator() {
     });
   }, [queryClient, isCodexOnline]);
 
-  if (!isCodexOnline) {
+  return <NetworkIndicator online={isCodexOnline} text="Codex node" />;
-    return (
-      <div className="indicator">
-        <div className="indicator-point indicator-point-offline"></div>
-        <span>Codex node</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="indicator">
-      <div className="indicator-point indicator-point-online"></div>
-      <span>Codex node</span>
-    </div>
-  );
 }

src/routes/dashboard.tsx

@@ -1,26 +1,105 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
-import { useState } from "react";
 import "./dashboard.css";
-import { Menu } from "../components/Menu/Menu";
+import {
-import { AppBar } from "../components/AppBar/AppBar";
+  MenuItem,
+  MenuItemComponentProps,
+  NetworkIndicator,
+  Page,
+} from "@codex/marketplace-ui-components";
+import {
+  Home,
+  Star,
+  ShoppingBag,
+  Server,
+  Settings,
+  HelpCircle,
+} from "lucide-react";
+import { ICON_SIZE } from "../utils/constants";
+import { NodeIndicator } from "../components/NodeIndicator/NodeIndicator";
+import { HttpNetworkIndicator } from "../components/HttpNetworkIndicator/HttpNetworkIndicator";
 
 const Layout = () => {
-  const [expanded, setExpanded] = useState(false);
+  const Right = (
-
-  const onExpand = () => setExpanded(true);
-
-  const onClose = () => setExpanded(false);
-
-  return (
     <>
-      <Menu expanded={expanded} onClose={onClose} />
+      <NodeIndicator />
-
+      <HttpNetworkIndicator />
-      <main>
-        <AppBar onExpand={onExpand} />
-        <Outlet />
-      </main>
     </>
   );
+
+  const items = [
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <Link to="/dashboard" activeOptions={{ exact: true }} {...p}>
+          <Home size={ICON_SIZE} />
+          Dashboard
+        </Link>
+      ),
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <Link to="/dashboard/favorites" {...p}>
+          <Star size={ICON_SIZE} />
+          Favorites
+        </Link>
+      ),
+    },
+    {
+      type: "separator",
+    },
+    {
+      type: "menu-title",
+      title: "rent",
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <Link to="/dashboard/purchases" {...p}>
+          <ShoppingBag size={ICON_SIZE} />
+          Purchases
+        </Link>
+      ),
+    },
+    {
+      type: "separator",
+    },
+    {
+      type: "menu-title",
+      title: "host",
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <Link to="/dashboard/availabilities" {...p}>
+          <Server size={ICON_SIZE} />
+          Availabilities
+        </Link>
+      ),
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <Link to="/dashboard/settings" {...p}>
+          <Settings size={ICON_SIZE} />
+          Settings
+        </Link>
+      ),
+    },
+    {
+      type: "separator",
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <HelpCircle size={"1.25rem"} /> Help
+        </a>
+      ),
+    },
+  ] satisfies MenuItem[];
+
+  return <Page children={<Outlet />} items={items} Right={Right} />;
 };
 
 export const Route = createFileRoute("/dashboard")({