feat: improve example FUI-1814

genesiscommunitysuccess · Feb 14, 2024 · 9bf7a3e · 9bf7a3e
1 parent e3278ce
commit 9bf7a3e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/docs/04_web/10_dynamic-layout/10_foundation-layout.mdx b/docs/04_web/10_dynamic-layout/10_foundation-layout.mdx
@@ -12,9 +12,8 @@ tags:
   - golden layout
 ---
 
-import Highlight from './layout-example.js';
+import FoundationLayoutDemo from './layout-example.js';
 
-<Highlight color="#25c2a0">Docusaurus green</Highlight>
 
 # Genesis Foundation UI App Layout
 
@@ -23,6 +22,10 @@ import Highlight from './layout-example.js';
 
 ### [API Docs](./docs/api/index.md)
 
+## Example
+
+<FoundationLayoutDemo />
+
 ## Declarative HTML API
 
 The following example shows the usage of the declarative API with `zero-charts` and the output that it produces.

diff --git a/docs/04_web/10_dynamic-layout/layout-example.js b/docs/04_web/10_dynamic-layout/layout-example.js
@@ -34,13 +34,23 @@ loadRemotes({});
  */
 export { LoadRemotesOptions, loadRemotes };
 
-export default function Highlight({ children, color }) {
+export default function FoundationLayoutDemo({ children, color }) {
 	return (
-		<div style={{ width: "500px", height: "500px" }}>
+		<div style={{ width: "600px", height: "500px" }}>
 			<foundation-layout>
-				<foundation-layout-item title="test">
-					<p>Test Item</p>
-				</foundation-layout-item>
+				<foundation-layout-region>
+					<foundation-layout-region type="vertical">
+						<foundation-layout-item title="Button">
+							<button>Click me!</button>
+						</foundation-layout-item>
+						<foundation-layout-item title="Checkbox">
+							<input type="checkbox" />
+						</foundation-layout-item>
+					</foundation-layout-region>
+					<foundation-layout-item title="Test P">
+						<p>Test p tag</p>
+					</foundation-layout-item>
+				</foundation-layout-region>
 			</foundation-layout>
 		</div>
 	);