feat(navbar): add text input

kwaa · kwaa · commit 7ecbc63d792b · 2025-03-01T13:12:41.000+08:00
diff --git a/app/src/components/ui/navbar.tsx b/app/src/components/ui/navbar.tsx
@@ -1,8 +1,9 @@
 import {
+  Container,
   Fullscreen,
   Text,
 } from '@react-three/uikit'
-import { Button } from '@react-three/uikit-default'
+import { Button, Defaults, Input } from '@react-three/uikit-default'
 import { GithubIcon } from '@react-three/uikit-lucide'
 import { IfInSessionMode, useXRStore } from '@react-three/xr'
 
@@ -11,34 +12,43 @@ export const Navbar = () => {
 
   return (
     <IfInSessionMode deny={['immersive-ar', 'immersive-vr']}>
-      <Fullscreen
-        alignItems="flex-end"
-        flexDirection="row"
-        gap={8}
-        justifyContent="center"
-        paddingBottom={8}
-        pointerEvents="listener"
-      >
-        <Button
-          data-test-id="github"
-          onClick={() => window.open('https://github.com/moeru-ai/n3p6', '_blank', 'noopener')}
-          size="icon"
+      <Defaults>
+        <Fullscreen
+          alignItems="flex-end"
+          gap={8}
+          justifyContent="center"
+          padding={8}
+          pointerEvents="listener"
         >
-          <GithubIcon height={16} width={16} />
-        </Button>
-        <Button
-          data-test-id="enter-vr"
-          onClick={() => void store.enterVR()}
-        >
-          <Text>Enter VR</Text>
-        </Button>
-        <Button
-          data-test-id="enter-ar"
-          onClick={() => void store.enterAR()}
-        >
-          <Text>Enter AR</Text>
-        </Button>
-      </Fullscreen>
+          <Container flexDirection="column" gap={8} lg={{ flexDirection: 'row' }}>
+            <Input maxWidth={256} placeholder="Send message..." />
+            <Container gap={8} justifyContent="center">
+              <Button
+                data-test-id="github"
+                onClick={() => window.open('https://github.com/moeru-ai/n3p6', '_blank', 'noopener')}
+                size="icon"
+                variant="secondary"
+              >
+                <GithubIcon height={16} width={16} />
+              </Button>
+              <Button
+                data-test-id="enter-vr"
+                onClick={() => void store.enterVR()}
+                variant="secondary"
+              >
+                <Text>Enter VR</Text>
+              </Button>
+              <Button
+                data-test-id="enter-ar"
+                onClick={() => void store.enterAR()}
+                variant="secondary"
+              >
+                <Text>Enter AR</Text>
+              </Button>
+            </Container>
+          </Container>
+        </Fullscreen>
+      </Defaults>
     </IfInSessionMode>
   )
 }
