Checkpoint

src/pages/LayoutShowcase.tsx

@@ -0,0 +1,34 @@
+import Layout from '../components/Layout/Layout'
+import Split from '../components/Layout/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>
+  )
+}