chat + maps + ai + tools

packages/client/src/components/landing-component/LandingComponent.tsx

@@ -2,8 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React, { useState } from 'react';
 
 import { BevyScene } from './BevyScene.tsx';
-import { MatrixRain } from './MatrixRain.tsx';
-import Particles from './Particles.tsx';
+import Map from './Map.tsx';
 import Tweakbox from './Tweakbox.tsx';
 
 export const LandingComponent: React.FC = () => {
@@ -13,6 +12,9 @@ export const LandingComponent: React.FC = () => {
   const [glow, setGlow] = useState(false);
   const [matrixRain, setMatrixRain] = useState(false);
   const [bevyScene, setBevyScene] = useState(true);
+  const [mapActive, setMapActive] = useState(false);
+
+  const map = <Map visible={mapActive} />;
 
   return (
     <Box
@@ -25,27 +27,18 @@ export const LandingComponent: React.FC = () => {
     >
       <Box
         position="fixed"
-        bottom="24px"
-        right="24px"
+        bottom="100x"
+        right="12px"
         maxWidth="300px"
         minWidth="200px"
         zIndex={1000}
       >
         <Tweakbox
           sliders={{
-            speed: {
-              value: !particles ? speed : 0.99,
-              onChange: setSpeed,
-              label: 'Animation Speed',
-              min: 0.01,
-              max: 0.99,
-              step: 0.01,
-              ariaLabel: 'animation-speed',
-            },
             intensity: {
               value: !particles ? intensity : 0.99,
               onChange: setIntensity,
-              label: 'Effect Intensity',
+              label: 'Brightness',
               min: 0.01,
               max: 0.99,
               step: 0.01,
@@ -53,50 +46,35 @@ export const LandingComponent: React.FC = () => {
             },
           }}
           switches={{
-            particles: {
-              value: particles,
-              onChange(enabled) {
-                if (enabled) {
-                  setMatrixRain(!enabled);
-                  setBevyScene(!enabled);
-                }
-                setParticles(enabled);
-              },
-              label: 'Particles',
-            },
-            matrixRain: {
-              value: matrixRain,
-              onChange(enabled) {
-                if (enabled) {
-                  setParticles(!enabled);
-                  setBevyScene(!enabled);
-                }
-                setMatrixRain(enabled);
-              },
-              label: 'Matrix Rain',
-            },
             bevyScene: {
               value: bevyScene,
               onChange(enabled) {
                 if (enabled) {
                   setParticles(!enabled);
                   setMatrixRain(!enabled);
+                  setMapActive(!enabled);
                 }
                 setBevyScene(enabled);
               },
-              label: 'Bevy Scene',
+              label: 'Instruments',
             },
-            glow: {
-              value: glow,
-              onChange: setGlow,
-              label: 'Glow Effect',
+            GpsMap: {
+              value: mapActive,
+              onChange(enabled) {
+                if (enabled) {
+                  setParticles(!enabled);
+                  setMatrixRain(!enabled);
+                  setBevyScene(!enabled);
+                }
+                setMapActive(enabled);
+              },
+              label: 'Map',
             },
           }}
         />
       </Box>
       <BevyScene speed={speed} intensity={intensity} glow={glow} visible={bevyScene} />
-      <MatrixRain speed={speed} intensity={intensity} glow={glow} visible={matrixRain} />
-      <Particles glow speed={speed} intensity={intensity} visible={particles} />
+      {mapActive && map}
     </Box>
   );
 };