codex-storage
/
codex-marketplace-ui-components
mirror of https://github.com/codex-storage/codex-marketplace-ui-components.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make Page component reusable and exportable

This commit is contained in:
Arnaud 2024-08-23 17:05:29 +02:00
parent aa61eb1083
commit f2439ccd42
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
3 changed files with 91 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/Page/Page.tsx
View File

@ -1,22 +1,17 @@
import { ReactNode, useState } from "react"; import { ReactNode, useState } from "react";
import { Menu, MenuItem, MenuItemComponentProps } from "../Menu/Menu"; import { Menu, MenuItem } from "../Menu/Menu";
import { AppBar } from "../AppBar/AppBar"; import { AppBar } from "../AppBar/AppBar";
import { NetworkIndicator } from "../NetworkIndicator/NetworkIndicator";
import "./page.css"; import "./page.css";
import {
Home,
Star,
ShoppingBag,
Server,
Settings,
HelpCircle,
} from "lucide-react";
type Props = { type Props = {
children: ReactNode; children: ReactNode;
Right: ReactNode;
items: MenuItem[];
}; };
export function Page({ children }: Props) { export function Page({ children, Right, items }: Props) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const onClose = () => { const onClose = () => {
@ -27,76 +22,6 @@ export function Page({ children }: Props) {
setOpen(true); 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 ( return (
<div className="page"> <div className="page">
<Menu expanded={open} onClose={onClose} items={items}></Menu> <Menu expanded={open} onClose={onClose} items={items}></Menu>

7
src/index.ts
View File

@ -22,3 +22,10 @@ export { DefaultCellRender } from "./components/Table/CellRender";
export { DurationCellRender } from "./components/Table/DurationCellRender"; export { DurationCellRender } from "./components/Table/DurationCellRender";
export { StateCellRender } from "./components/Table/StateCellRender"; export { StateCellRender } from "./components/Table/StateCellRender";
export { Table } from "./components/Table/Table"; 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";

78
stories/Page.stories.tsx
View File

@ -1,6 +1,16 @@
import type { Meta, StoryObj } from "@storybook/react"; import type { Meta, StoryObj } from "@storybook/react";
import { Page } from "../src/components/Page/Page"; import { Page } from "../src/components/Page/Page";
import "./Page.stories.css"; 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 = { const meta = {
title: "Layouts/Page", title: "Layouts/Page",
@ -20,5 +30,73 @@ export const Default: Story = {
children: ( children: (
<span style={{ padding: "1rem", display: "block" }}>Hello World</span> <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" />,
}, },
}; };