import Layout from '../components/Layout'
import Split from '../components/Split'

export default function LayoutShowcase() {
  return (
    <Layout>
      <div className="container-fluid py-4">
        <h3>Horizontal Split</h3>
        <div style={{ height: 240 }} className="mb-4">
          <Split direction="horizontal" gutter={12} variant="solid">
            <Split.Panel size={1} accent="yellow">
              <div className="p-3">Left</div>
            </Split.Panel>
            <Split.Panel size={2}>
              <div className="p-3">Right</div>
            </Split.Panel>
          </Split>
        </div>

        <h3>Vertical Split</h3>
        <div style={{ height: 360 }} className="mb-4">
          <Split direction="vertical" gutter={12} accent="pink">
            <Split.Panel size={1}>
              <div className="p-3">Top</div>
            </Split.Panel>
            <Split.Panel size={3}>
              <div className="p-3">Bottom</div>
            </Split.Panel>
          </Split>
        </div>
      </div>
    </Layout>
  )
}