tsx

import {
  LayoutSliceState,
  LayoutTypes,
  MAIN_VIEW,
  createLayoutSlice,
} from '@sqlrooms/layout';
import {
  BaseRoomStoreState,
  createBaseRoomSlice,
  createRoomStore,
} from '@sqlrooms/room-store';

function DataPanel() {
  return <div>Data</div>;
}

function MainPanel() {
  return <div>Main</div>;
}

type State = BaseRoomStoreState & LayoutSliceState;

export const {roomStore, useRoomStore} = createRoomStore<State>(
  (set, get, store) => ({
    ...createBaseRoomSlice()(set, get, store),
    ...createLayoutSlice({
      config: {
        type: LayoutTypes.enum.mosaic,
        nodes: {
          direction: 'row',
          first: 'data',
          second: MAIN_VIEW,
          splitPercentage: 30,
        },
      },
      panels: {
        data: {
          title: 'Data',
          component: DataPanel,
          placement: 'sidebar',
        },
        main: {
          title: 'Main',
          component: MainPanel,
          placement: 'main',
        },
      },
    })(set, get, store),
  }),
);

tsx

import {Button} from '@sqlrooms/ui';

function PanelButtons() {
  const togglePanel = useRoomStore((state) => state.layout.togglePanel);
  const togglePanelPin = useRoomStore((state) => state.layout.togglePanelPin);

  return (
    <div className="flex gap-2">
      <Button onClick={() => togglePanel('data')}>Toggle Data Panel</Button>
      <Button onClick={() => togglePanelPin('data')}>
        Pin/Unpin Data Panel
      </Button>
    </div>
  );
}