import { RtSplitter, RtSplitterPanel } from '@dpa/react-splitter';

export function SplitterPage() {
  return (
    <>
      <div style={{ margin: 20, border: '1px solid' }}>
        <RtSplitter>
          <RtSplitterPanel
            endSlot={<div>Slot1</div>}
            collapsible
            defaultSize="40%"
            min="20%"
            max="70%"
          >
            <div
              style={{
                height: 500,
              }}
            >
              panel 1
            </div>
          </RtSplitterPanel>

          <RtSplitterPanel collapsible>
            <div
              style={{
                height: 500,
              }}
            >
              Panel 2
            </div>
          </RtSplitterPanel>
        </RtSplitter>
      </div>

      <div style={{ margin: 20, height: 150, border: '1px solid' }}>
        <RtSplitter layout="vertical">
          <RtSplitterPanel collapsible>
            <div style={{ height: 50 }}>panel 1</div>
          </RtSplitterPanel>
          <RtSplitterPanel collapsible>
            <div style={{ height: 100 }}>Panel 2</div>
          </RtSplitterPanel>
        </RtSplitter>
      </div>
    </>
  );
}