Drop @mui, addded ems api

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

@@ -0,0 +1,53 @@
+import { Divider, Flex, rem, Text } from '@mantine/core'
+import { Coordinate } from 'ol/coordinate';
+import React, { CSSProperties } from 'react'
+
+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) => {
+    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]}
+            </Text>
+
+            <Text fz='xs' w={rem(130)}>
+                y: {currentCoordinate?.[1]}
+            </Text>
+
+            <Divider orientation='vertical' />
+
+            <Text fz='xs'>
+                Z={currentZ}
+            </Text>
+
+            <Text fz='xs'>
+                X={currentX}
+            </Text>
+
+            <Text fz='xs'>
+                Y={currentY}
+            </Text>
+
+            <Text fz='xs' ml='auto'>
+                {statusText}
+            </Text>
+        </Flex>
+    )
+}
+
+export default MapStatusbar