mirror of
https://github.com/codex-storage/codex-marketplace-ui.git
synced 2025-02-23 21:28:26 +00:00
Use Page component
This commit is contained in:
Arnaud
parent
5214915e6b
commit
a67630bd68
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
10
src/components/HttpNetworkIndicator/HttpNetworkIndicator.tsx
Normal file
10
src/components/HttpNetworkIndicator/HttpNetworkIndicator.tsx
Normal file
@ -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} />;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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 (
|
||||
<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>
|
||||
);
|
||||
return <NetworkIndicator online={isCodexOnline} text="Codex node" />;
|
||||
}
|
||||
|
||||
@ -1,26 +1,105 @@
|
||||
import { createFileRoute, Outlet } from "@tanstack/react-router";
|
||||
import { useState } from "react";
|
||||
import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
|
||||
import "./dashboard.css";
|
||||
import { Menu } from "../components/Menu/Menu";
|
||||
import { AppBar } from "../components/AppBar/AppBar";
|
||||
import {
|
||||
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 onExpand = () => setExpanded(true);
|
||||
|
||||
const onClose = () => setExpanded(false);
|
||||
|
||||
return (
|
||||
const Right = (
|
||||
<>
|
||||
<Menu expanded={expanded} onClose={onClose} />
|
||||
|
||||
<main>
|
||||
<AppBar onExpand={onExpand} />
|
||||
<Outlet />
|
||||
</main>
|
||||
<NodeIndicator />
|
||||
<HttpNetworkIndicator />
|
||||
</>
|
||||
);
|
||||
|
||||
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")({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user