packages/devtools-ui/src/components/header.tsx
import React from "react";
import clsx from "clsx";
import { LogoIcon } from "./icons/logo";
import { ContactIcon } from "./icons/contact";
import { NotificationIcon } from "./icons/notification";
import {
DevToolsContext,
DevtoolsEvent,
receive,
} from "@refinedev/devtools-shared";
import { HeaderAuthStatus } from "./header-auth-status";
export const Header = () => {
const [connectedApp, setConnectedApp] = React.useState<string | null>(null);
const { ws } = React.useContext(DevToolsContext);
const fetchConnectedApp = React.useCallback(async () => {
try {
const response = await fetch("api/connected-app");
const data = (await response.json()) as { url: string | null };
setConnectedApp(data.url);
} catch (error) {
//
}
}, []);
React.useEffect(() => {
fetchConnectedApp();
}, [fetchConnectedApp]);
React.useEffect(() => {
if (!ws) return () => 0;
const unsubscribeConnected = receive(
ws,
DevtoolsEvent.DEVTOOLS_CONNECTED_APP,
(data) => {
setConnectedApp(data.url);
},
);
const unsubscribeDisconnected = receive(
ws,
DevtoolsEvent.DEVTOOLS_DISCONNECTED_APP,
() => {
setConnectedApp(null);
},
);
return () => {
unsubscribeConnected();
unsubscribeDisconnected();
};
}, [ws]);
return (
<div
className={clsx(
"re-flex-shrink-0",
"re-bg-gray-800",
"re-py-2",
"re-pr-1",
"re-pl-px",
"re-border-b",
"re-border-b-gray-700",
"re-flex",
"re-w-full",
"re-items-center",
"re-justify-between",
)}
>
<div className="re-flex-shrink-0 re-min-w-[200px]">
<LogoIcon className="re-h-9" />
</div>
<div
className={clsx(
"re-bg-gray-900",
"re-flex-1",
"re-border-gray-700",
"re-py-1.5",
"re-px-2",
"re-rounded-lg",
"re-text-sm",
"re-leading-6",
"re-flex",
"re-items-center",
"re-justify-center",
"re-text-gray-300",
)}
>
<span
className={clsx(
"re-block",
"re-h-2",
"re-w-2",
"re-rounded-full",
connectedApp && "re-bg-alt-green",
!connectedApp && "re-bg-alt-red",
"re-flex-shrink-0",
"re-mr-2",
)}
/>
<span className="re-font-mono re-whitespace-nowrap re-text-ellipsis re-overflow-hidden">
{connectedApp ?? "No App Connected"}
</span>
</div>
<div
className={clsx(
"re-flex",
"re-items-center",
"re-justify-end",
"re-gap-2",
"re-flex-shrink-0",
"re-min-w-[200px]",
)}
>
{false && (
<>
<div
className={clsx(
"re-w-9",
"re-h-9",
"re-text-gray-500",
"re-flex",
"re-justify-center",
"re-items-center",
)}
>
<ContactIcon />
</div>
<div
className={clsx(
"re-w-9",
"re-h-9",
"re-text-gray-500",
"re-flex",
"re-justify-center",
"re-items-center",
)}
>
<NotificationIcon />
</div>
</>
)}
<HeaderAuthStatus />
</div>
</div>
);
};