50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import type { WebsocketRequest } from "@yaakapp-internal/models";
|
|
import classNames from "classnames";
|
|
import { useAtomValue } from "jotai";
|
|
import type { CSSProperties } from "react";
|
|
|
|
import { SplitLayout } from "@yaakapp-internal/ui";
|
|
import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
|
|
import { workspaceLayoutAtom } from "../lib/atoms";
|
|
import { WebsocketRequestPane } from "./WebsocketRequestPane";
|
|
import { WebsocketResponsePane } from "./WebsocketResponsePane";
|
|
|
|
interface Props {
|
|
activeRequest: WebsocketRequest;
|
|
style: CSSProperties;
|
|
}
|
|
|
|
export function WebsocketRequestLayout({ activeRequest, style }: Props) {
|
|
const workspaceLayout = useAtomValue(workspaceLayoutAtom);
|
|
const activeWorkspace = useAtomValue(activeWorkspaceAtom);
|
|
const wsId = activeWorkspace?.id ?? "n/a";
|
|
return (
|
|
<SplitLayout
|
|
storageKey={`websocket_layout::${wsId}`}
|
|
className="p-3 gap-1.5"
|
|
layout={workspaceLayout}
|
|
style={style}
|
|
firstSlot={({ orientation, style }) => (
|
|
<WebsocketRequestPane
|
|
style={style}
|
|
activeRequest={activeRequest}
|
|
fullHeight={orientation === "horizontal"}
|
|
/>
|
|
)}
|
|
secondSlot={({ style }) => (
|
|
<div
|
|
style={style}
|
|
className={classNames(
|
|
"x-theme-responsePane",
|
|
"max-h-full h-full grid grid-rows-[minmax(0,1fr)] grid-cols-1",
|
|
"bg-surface rounded-md border border-border-subtle",
|
|
"shadow relative",
|
|
)}
|
|
>
|
|
<WebsocketResponsePane activeRequest={activeRequest} />
|
|
</div>
|
|
)}
|
|
/>
|
|
);
|
|
}
|