FreakU
/
canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Expand header into multiple components (related #51)

This commit is contained in:
Grant 2024-06-18 19:22:48 -06:00
parent ccf43f13b3
commit bf60cde52c
3 changed files with 62 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/App.tsx
View File

@ -1,4 +1,4 @@
import { Header } from "./Header";
import { Header } from "./Header/Header";
import { AppContext, useAppContext } from "../contexts/AppContext";
import { CanvasWrapper } from "./CanvasWrapper";
import { TemplateContext } from "../contexts/TemplateContext";

46
packages/client/src/components/Header.tsx
View File

@ -1,46 +0,0 @@
import { Button, Card, CardBody, Link } from "@nextui-org/react";
import { useAppContext } from "../contexts/AppContext";
import { User } from "./Header/User";
import { Debug } from "@sc07-canvas/lib/src/debug";
import React, { lazy } from "react";
const OpenChatButton = lazy(() => import("./Chat/OpenChatButton"));
const DynamicChat = () => {
const { loadChat } = useAppContext();
return <React.Suspense>{loadChat && <OpenChatButton />}</React.Suspense>;
};
export const Header = () => {
const { setSettingsSidebar, connected, hasAdmin, setInfoSidebar } =
useAppContext();
return (
<header id="main-header">
<div className="box">
<Button onPress={() => setInfoSidebar(true)}>Info</Button>
</div>
<div className="spacer"></div>
{!connected && (
<div>
<Card>
<CardBody>Disconnected</CardBody>
</Card>
</div>
)}
<div className="spacer"></div>
<div className="box">
<User />
<Button onClick={() => setSettingsSidebar(true)}>Settings</Button>
<Button onClick={() => Debug.openDebugTools()}>debug</Button>
{hasAdmin && (
<Button href="/admin" target="_blank" as={Link}>
Admin
</Button>
)}
<DynamicChat />
</div>
</header>
);
};

61
packages/client/src/components/Header/Header.tsx Normal file
View File

@ -0,0 +1,61 @@
import { Button, Card, CardBody, Link } from "@nextui-org/react";
import { useAppContext } from "../../contexts/AppContext";
import { User } from "./User";
import { Debug } from "@sc07-canvas/lib/src/debug";
import React, { lazy } from "react";
const OpenChatButton = lazy(() => import("../Chat/OpenChatButton"));
const DynamicChat = () => {
const { loadChat } = useAppContext();
return <React.Suspense>{loadChat && <OpenChatButton />}</React.Suspense>;
};
export const Header = () => {
const { connected } = useAppContext();
return (
<header id="main-header">
<HeaderLeft />
<div className="spacer"></div>
{!connected && (
<div>
<Card>
<CardBody>Disconnected</CardBody>
</Card>
</div>
)}
<div className="spacer"></div>
<HeaderRight />
</header>
);
};
const HeaderLeft = () => {
const { setInfoSidebar } = useAppContext();
return (
<div className="box">
<Button onPress={() => setInfoSidebar(true)}>Info</Button>
<Button onPress={() => Debug.openDebugTools()}>Debug Tools</Button>
</div>
);
};
const HeaderRight = () => {
const { setSettingsSidebar, hasAdmin } = useAppContext();
return (
<div className="box">
<User />
<Button onClick={() => setSettingsSidebar(true)}>Settings</Button>
{hasAdmin && (
<Button href="/admin" target="_blank" as={Link}>
Admin
</Button>
)}
<DynamicChat />
</div>
);
};