Make Page component reusable and exportable

src/components/Page/Page.tsx

@@ -1,22 +1,17 @@
 import { ReactNode, useState } from "react";
-import { Menu, MenuItem, MenuItemComponentProps } from "../Menu/Menu";
+import { Menu, MenuItem } from "../Menu/Menu";
 import { AppBar } from "../AppBar/AppBar";
-import { NetworkIndicator } from "../NetworkIndicator/NetworkIndicator";
 import "./page.css";
-import {
-  Home,
-  Star,
-  ShoppingBag,
-  Server,
-  Settings,
-  HelpCircle,
-} from "lucide-react";
 
 type Props = {
   children: ReactNode;
+
+  Right: ReactNode;
+
+  items: MenuItem[];
 };
 
-export function Page({ children }: Props) {
+export function Page({ children, Right, items }: Props) {
   const [open, setOpen] = useState(false);
 
   const onClose = () => {
@@ -27,76 +22,6 @@ export function Page({ children }: Props) {
     setOpen(true);
   };
 
-  const Right = <NetworkIndicator online={true} text="Online" />;
-
-  const items = [
-    {
-      type: "menu-item",
-      Component: (p: MenuItemComponentProps) => (
-        <a {...p}>
-          <Home size={"1.25rem"} /> Dashboard
-        </a>
-      ),
-    },
-    {
-      type: "menu-item",
-      Component: (p: MenuItemComponentProps) => (
-        <a {...p}>
-          <Star size={"1.25rem"} /> Favorties
-        </a>
-      ),
-    },
-    {
-      type: "separator",
-    },
-    {
-      type: "menu-title",
-      title: "rent",
-    },
-    {
-      type: "menu-item",
-      Component: (p: MenuItemComponentProps) => (
-        <a {...p}>
-          <ShoppingBag size={"1.25rem"} /> Purchases
-        </a>
-      ),
-    },
-    {
-      type: "separator",
-    },
-    {
-      type: "menu-title",
-      title: "host",
-    },
-    {
-      type: "menu-item",
-      Component: (p: MenuItemComponentProps) => (
-        <a {...p}>
-          <Server size={"1.25rem"} /> Availabilities
-        </a>
-      ),
-    },
-    {
-      type: "menu-item",
-      Component: (p: MenuItemComponentProps) => (
-        <a {...p}>
-          <Settings size={"1.25rem"} /> Settings
-        </a>
-      ),
-    },
-    {
-      type: "separator",
-    },
-    {
-      type: "menu-item",
-      Component: (p: MenuItemComponentProps) => (
-        <a {...p}>
-          <HelpCircle size={"1.25rem"} /> Help
-        </a>
-      ),
-    },
-  ] satisfies MenuItem[];
-
   return (
     <div className="page">
       <Menu expanded={open} onClose={onClose} items={items}></Menu>

src/index.ts

@@ -22,3 +22,10 @@ export { DefaultCellRender } from "./components/Table/CellRender";
 export { DurationCellRender } from "./components/Table/DurationCellRender";
 export { StateCellRender } from "./components/Table/StateCellRender";
 export { Table } from "./components/Table/Table";
+export {
+  Menu,
+  type MenuItem,
+  type MenuItemComponentProps,
+} from "./components/Menu/Menu";
+export { AppBar } from "./components/AppBar/AppBar";
+export { Page } from "./components/Page/Page";

stories/Page.stories.tsx

@@ -1,6 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Page } from "../src/components/Page/Page";
 import "./Page.stories.css";
+import {
+  Home,
+  Star,
+  ShoppingBag,
+  Server,
+  Settings,
+  HelpCircle,
+} from "lucide-react";
+import { MenuItem, MenuItemComponentProps } from "../src/components/Menu/Menu";
+import { NetworkIndicator } from "../src/components/NetworkIndicator/NetworkIndicator";
 
 const meta = {
   title: "Layouts/Page",
@@ -20,5 +30,73 @@ export const Default: Story = {
     children: (
       <span style={{ padding: "1rem", display: "block" }}>Hello World</span>
     ),
+    items: [
+      {
+        type: "menu-item",
+        Component: (p: MenuItemComponentProps) => (
+          <a {...p}>
+            <Home size={"1.25rem"} /> Dashboard
+          </a>
+        ),
+      },
+      {
+        type: "menu-item",
+        Component: (p: MenuItemComponentProps) => (
+          <a {...p}>
+            <Star size={"1.25rem"} /> Favorties
+          </a>
+        ),
+      },
+      {
+        type: "separator",
+      },
+      {
+        type: "menu-title",
+        title: "rent",
+      },
+      {
+        type: "menu-item",
+        Component: (p: MenuItemComponentProps) => (
+          <a {...p}>
+            <ShoppingBag size={"1.25rem"} /> Purchases
+          </a>
+        ),
+      },
+      {
+        type: "separator",
+      },
+      {
+        type: "menu-title",
+        title: "host",
+      },
+      {
+        type: "menu-item",
+        Component: (p: MenuItemComponentProps) => (
+          <a {...p}>
+            <Server size={"1.25rem"} /> Availabilities
+          </a>
+        ),
+      },
+      {
+        type: "menu-item",
+        Component: (p: MenuItemComponentProps) => (
+          <a {...p}>
+            <Settings size={"1.25rem"} /> Settings
+          </a>
+        ),
+      },
+      {
+        type: "separator",
+      },
+      {
+        type: "menu-item",
+        Component: (p: MenuItemComponentProps) => (
+          <a {...p}>
+            <HelpCircle size={"1.25rem"} /> Help
+          </a>
+        ),
+      },
+    ] satisfies MenuItem[],
+    Right: <NetworkIndicator online={true} text="Online" />,
   },
 };