Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 6x 6x 5x | import React from "react";
import type { ImperativePanelHandle } from "react-resizable-panels";
import {
ResizablePanelGroup,
ResizablePanel,
ResizableHandle,
} from "@/components/ui/resizable";
interface SimulatorOutputContainerProps {
readonly serialSlot: React.ReactNode;
readonly boardSlot: React.ReactNode;
readonly className?: string;
readonly style?: React.CSSProperties;
readonly panelRef?: React.Ref<ImperativePanelHandle>;
readonly defaultSize?: number;
readonly minSize?: number;
readonly serialPanelClassName?: string;
readonly boardPanelClassName?: string;
/** Render only the serial/board group when it is already inside a panel. */
readonly embedded?: boolean;
}
export default function SimulatorOutputContainer({
serialSlot,
boardSlot,
className,
style,
panelRef,
defaultSize = 50,
minSize = 20,
serialPanelClassName,
boardPanelClassName,
embedded = false,
}: SimulatorOutputContainerProps) {
const outputLayout = (
<ResizablePanelGroup direction="vertical" id="output-layout" className="workspace-output-layout">
<ResizablePanel defaultSize={50} minSize={20} id="serial-panel" className={serialPanelClassName}>
{serialSlot}
</ResizablePanel>
<ResizableHandle withHandle data-testid="vertical-resizer-board" className="workspace-serial-board-handle" />
<ResizablePanel defaultSize={50} minSize={20} id="board-panel" className={boardPanelClassName}>
{boardSlot}
</ResizablePanel>
</ResizablePanelGroup>
);
if (embedded) return outputLayout;
return (
<ResizablePanel ref={panelRef} defaultSize={defaultSize} minSize={minSize} id="output-panel" className={className} style={style}>
{outputLayout}
</ResizablePanel>
);
}
|