docs: add split docs and demo (#3163)

* docs: add split docs and demo

* fix

docs/app/components/[...slug]/_components/PropsTable.tsx

@@ -13,9 +13,7 @@ export const PropsTable = ({ props }: PropsTableProps) => {
       {!props ? (
         <Inline space={2}>
           <BlankCanvas />
-          <Text>
-            Sorry! There are currently no variants and sizes available.
-          </Text>
+          <Text>Sorry! There are currently no props available.</Text>
         </Inline>
       ) : (
         <Table aria-label="Table with component props" variant="propsTable">

docs/content/components/split/split-inline.demo.tsx

@@ -0,0 +1,10 @@
+import { Inline, Split, Text } from '@marigold/components';
+
+export default () => (
+  <Inline space={2}>
+    <Text>Blog</Text>
+    <Text>About</Text>
+    <Split />
+    <Text>Login</Text>
+  </Inline>
+);

docs/content/components/split/split-stack.demo.tsx

@@ -0,0 +1,12 @@
+import { Stack, Split, Text } from '@marigold/components';
+
+export default () => (
+  <div className="h-48">
+    <Stack space={1} stretch>
+      <Text>It's gonna be ...</Text>
+      <Text>wait for it!</Text>
+      <Split />
+      <Text>... legendary!</Text>
+    </Stack>
+  </div>
+);

docs/content/components/split/split.mdx

@@ -0,0 +1,38 @@
+---
+title: Split
+group: Layout
+caption: Component that creates spacing between two elements.
+---
+
+`<Split>` is a layout component that allows to split the contents of [`<Inline>`](/components/inline/) and [`<Stack>`](/component/stack/) layouts.
+It should be used if you need to create spacing between elements.
+
+The component behaves like the common used `flex-grow` attribute.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Split } from '@marigold/components';
+```
+
+### Props
+
+<PropsTable />
+
+## Examples
+
+### With Inline
+
+You can see below how to use the `<Split>` within the `<Inline>`.
+
+<ComponentDemo file="./split-inline.demo.tsx" />
+
+### With Stack
+
+That example shows how to use the `<Split>` within the `<Stack>`.
+
+<ComponentDemo file="./split-stack.demo.tsx" />