Spatial layouts for demanding dashboards.

import { useZeugma, Zeugma, Pane } from 'react-zeugma'

export function Workspace() {
  const controller = useZeugma({
    initialLayout: {
      type: 'split', direction: 'row', splitPercentage: 50,
      first: { type: 'pane', id: 'editor', tabIds: ['App.tsx'] },
      second: { type: 'pane', id: 'terminal', tabIds: ['Terminal'] },
    },
  })

  return (
    <Zeugma controller={controller} renderPane={(paneId) => (
      <Pane id={paneId}>
        <Pane.DragHandle />
        <Pane.Tabs />
        <Pane.Content>{/* your view */}</Pane.Content>
      </Pane>
    } />
  )
}