feat: add more nested rabbits

bamlab · Jul 3, 2023 · 1cdc267 · 1cdc267
1 parent 5d5181a
commit 1cdc267
Showing 1 changed file with 21 additions and 9 deletions.
diff --git a/packages/example/src/index.tsx b/packages/example/src/index.tsx
@@ -13,25 +13,37 @@ const Program = () => {
   );
 }
 
+const ViewNode = ({direction = 'horizontal', children}: {children:React.ReactNode,direction: 'horizontal' | 'vertical'}) => {
+
+  return (<Node orientation={direction}>
+      <div style={{borderStyle: 'solid', borderColor: 'grey', borderWidth: 1, display: 'flex', flexDirection: direction === 'horizontal' ? 'row' : 'column', gap: 20, margin: 20}}>
+{children}
+      </div>
+      </Node>
+)}
+
 const App = () => (
   <div>
     <h1 style={{ color: 'white' }}>React Spatial Navigation Example</h1>
     <div />
     <Root>
-      <Node orientation="horizontal">
-        <div style={{display: 'flex', flexDirection: 'row', gap: 20, margin: 20}}>
+      <ViewNode direction="horizontal">
+        <ViewNode direction="vertical">
           <Program />
           <Program />
-          <Program />
-        </div>
-      </Node>
-      <Node orientation="horizontal">
-        <div style={{display: 'flex', flexDirection: 'row', gap: 20, margin: 20}}>
+          <ViewNode direction="horizontal">
+            <Program />
+            <Program />
+          </ViewNode>
+        </ViewNode>
+        <Program />
+        <Program />
+      </ViewNode>
+      <ViewNode direction="horizontal">
           <Program />
           <Program />
           <Program />
-        </div>
-      </Node>
+      </ViewNode>
     </Root>
   </div>
 );