Remove @mui, move states into zustand store

client/src/components/map/MapStatusbar/MapStatusbar.tsx

@@ -1,50 +1,42 @@
 import { Divider, Flex, rem, Text } from '@mantine/core'
-import { Coordinate } from 'ol/coordinate';
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import { useMapStore } from '../../../store/map';
 
 interface IMapStatusbarProps {
     mapControlsStyle: CSSProperties;
-    currentCoordinate: Coordinate | null;
-    currentX: number | undefined;
-    currentY: number | undefined;
-    currentZ: number | undefined;
-    statusText: string;
 }
 
 const MapStatusbar = ({
     mapControlsStyle,
-    currentCoordinate,
-    currentX,
-    currentY,
-    currentZ,
-    statusText
 }: IMapStatusbarProps) => {
+    const mapState = useMapStore()
+
     return (
         <Flex gap='sm' p={'4px'} miw={'100%'} fz={'xs'} pos='absolute' bottom='0px' left='0px' style={{ ...mapControlsStyle, borderRadius: 0 }}>
             <Text fz='xs' w={rem(130)}>
-                x: {currentCoordinate?.[0]}
+                x: {mapState.currentCoordinate?.[0]}
             </Text>
 
             <Text fz='xs' w={rem(130)}>
-                y: {currentCoordinate?.[1]}
+                y: {mapState.currentCoordinate?.[1]}
             </Text>
 
             <Divider orientation='vertical' />
 
             <Text fz='xs'>
-                Z={currentZ}
+                Z={mapState.currentZ}
             </Text>
 
             <Text fz='xs'>
-                X={currentX}
+                X={mapState.currentX}
             </Text>
 
             <Text fz='xs'>
-                Y={currentY}
+                Y={mapState.currentY}
             </Text>
 
             <Text fz='xs' ml='auto'>
-                {statusText}
+                {mapState.statusText}
             </Text>
         </Flex>
     )