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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | /**
* @packageDocumentation
*
* Fixed full-viewport layout shell for the editor. Composes a toolbar,
* left/right sidebar panels, a central timeline area, and a status bar
* via ReactNode props.
*
* When a prop is not provided, its corresponding section is excluded from
* the layout entirely (no placeholder DOM nodes).
*/
import { Box, Flex } from "@radix-ui/themes";
import type { ReactNode } from "react";
interface ProjectLayoutProps {
toolbar?: ReactNode;
leftPanels?: ReactNode;
timeline?: ReactNode;
rightPanels?: ReactNode;
statusBar?: ReactNode;
}
export function ProjectLayout({
toolbar,
leftPanels,
timeline,
rightPanels,
statusBar,
}: ProjectLayoutProps) {
return (
<Flex
direction="column"
style={{
width: "100%",
height: "100%",
overflow: "hidden",
}}
>
{/* Toolbar */}
{toolbar && <Box style={{ flexShrink: 0 }}>{toolbar}</Box>}
{/* Main area */}
<Flex style={{ flex: 1, overflow: "hidden" }}>
{/* Left panels */}
{leftPanels && (
<Box
style={{
width: 256,
borderRight: "1px solid var(--gray-5)",
overflow: "auto",
flexShrink: 0,
}}
>
{leftPanels}
</Box>
)}
{/* Note chart timeline */}
{timeline && (
<Box
style={{
flex: 1,
overflow: "hidden",
}}
>
{timeline}
</Box>
)}
{/* Right panels */}
{rightPanels && (
<Box
style={{
width: 256,
borderLeft: "1px solid var(--gray-5)",
overflow: "auto",
flexShrink: 0,
}}
>
{rightPanels}
</Box>
)}
</Flex>
{/* Status bar */}
{statusBar && <Box style={{ flexShrink: 0 }}>{statusBar}</Box>}
</Flex>
);
}
|