@map-colonies/react-components 3.14.0 → 3.15.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.15.1](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.15.0...@map-colonies/react-components@3.15.1) (2023-05-28)
+
+
+### Bug Fixes
+
+* zoom level in 2d mode ([#139](https://github.com/MapColonies/shared-components/issues/139)) ([48f7a85](https://github.com/MapColonies/shared-components/commit/48f7a8543f695a82b9042f9d2704b653443cc2ff))
+
+
+
+
+
+# [3.15.0](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.14.0...@map-colonies/react-components@3.15.0) (2023-05-28)
+
+
+### Features
+
+* zoom level tracker ([#138](https://github.com/MapColonies/shared-components/issues/138)) ([b3d04ef](https://github.com/MapColonies/shared-components/commit/b3d04efe107b7c79595bd5bdb3229bafe31891df))
+
+
+
+
+
 # [3.14.0](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.13.1...@map-colonies/react-components@3.14.0) (2023-04-13)
 
 

package/dist/cesium-map/map.d.ts

@@ -43,6 +43,7 @@ interface ILegends {
 }
 export interface CesiumMapProps extends ViewerProps {
     showMousePosition?: boolean;
+    showZoomLevel?: boolean;
     showScale?: boolean;
     projection?: Proj;
     center?: [number, number];

package/dist/cesium-map/map.js

@@ -59,6 +59,7 @@ var box_1 = require("../box");
 var projections_1 = require("../utils/projections");
 var coordinates_tracker_tool_1 = require("./tools/coordinates-tracker.tool");
 var scale_tracker_tool_1 = require("./tools/scale-tracker.tool");
+var zoom_level_tracker_tool_1 = require("./tools/zoom_level-tracker.tool");
 var settings_1 = require("./settings/settings");
 var map_legend_1 = require("./map-legend");
 var layers_manager_1 = __importDefault(require("./layers-manager"));
@@ -104,16 +105,17 @@ var CesiumMap = function (props) {
     var _p = react_1.useState(), mapViewRef = _p[0], setMapViewRef = _p[1];
     var _q = react_1.useState(), projection = _q[0], setProjection = _q[1];
     var _r = react_1.useState(), showMousePosition = _r[0], setShowMousePosition = _r[1];
-    var _s = react_1.useState(), showScale = _s[0], setShowScale = _s[1];
-    var _t = react_1.useState(), locale = _t[0], setLocale = _t[1];
-    var _u = react_1.useState(), cameraState = _u[0], setCameraState = _u[1];
-    var _v = react_1.useState(), sceneModes = _v[0], setSceneModes = _v[1];
-    var _w = react_1.useState([]), legendsList = _w[0], setLegendsList = _w[1];
-    var _x = react_1.useState(), baseMaps = _x[0], setBaseMaps = _x[1];
-    var _y = react_1.useState(false), showImageryMenu = _y[0], setShowImageryMenu = _y[1];
-    var _z = react_1.useState(undefined), imageryMenuPosition = _z[0], setImageryMenuPosition = _z[1];
-    var _0 = react_1.useState(false), isLegendsSidebarOpen = _0[0], setIsLegendsSidebarOpen = _0[1];
-    var _1 = react_1.useState(), rightClickCoordinates = _1[0], setRightClickCoordinates = _1[1];
+    var _s = react_1.useState(), showZoomLevel = _s[0], setShowZoomLevel = _s[1];
+    var _t = react_1.useState(), showScale = _t[0], setShowScale = _t[1];
+    var _u = react_1.useState(), locale = _u[0], setLocale = _u[1];
+    var _v = react_1.useState(), cameraState = _v[0], setCameraState = _v[1];
+    var _w = react_1.useState(), sceneModes = _w[0], setSceneModes = _w[1];
+    var _x = react_1.useState([]), legendsList = _x[0], setLegendsList = _x[1];
+    var _y = react_1.useState(), baseMaps = _y[0], setBaseMaps = _y[1];
+    var _z = react_1.useState(false), showImageryMenu = _z[0], setShowImageryMenu = _z[1];
+    var _0 = react_1.useState(undefined), imageryMenuPosition = _0[0], setImageryMenuPosition = _0[1];
+    var _1 = react_1.useState(false), isLegendsSidebarOpen = _1[0], setIsLegendsSidebarOpen = _1[1];
+    var _2 = react_1.useState(), rightClickCoordinates = _2[0], setRightClickCoordinates = _2[1];
     var viewerProps = __assign({ fullscreenButton: true, timeline: false, animation: false, baseLayerPicker: false, geocoder: false, navigationHelpButton: false, homeButton: false, sceneModePicker: false }, props);
     var getImageryMenuStyle = function (x, y, menuWidth, menuHeight, menuDynamicHeightIncrement) {
         var container = mapViewRef.container;
@@ -190,6 +192,10 @@ var CesiumMap = function (props) {
         var _a;
         setShowMousePosition((_a = props.showMousePosition) !== null && _a !== void 0 ? _a : true);
     }, [props.showMousePosition]);
+    react_1.useEffect(function () {
+        var _a;
+        setShowZoomLevel((_a = props.showZoomLevel) !== null && _a !== void 0 ? _a : true);
+    }, [props.showZoomLevel]);
     react_1.useEffect(function () {
         var _a;
         setShowScale((_a = props.showScale) !== null && _a !== void 0 ? _a : true);
@@ -290,6 +296,7 @@ var CesiumMap = function (props) {
                         } })),
                 react_1.default.createElement(box_1.Box, { className: "toolsContainer" },
                     showMousePosition === true ? (react_1.default.createElement(coordinates_tracker_tool_1.CoordinatesTrackerTool, { projection: projection })) : (react_1.default.createElement(react_1.default.Fragment, null)),
+                    showZoomLevel === true ? (react_1.default.createElement(zoom_level_tracker_tool_1.ZoomLevelTrackerTool, { locale: locale })) : (react_1.default.createElement(react_1.default.Fragment, null)),
                     showScale === true ? react_1.default.createElement(scale_tracker_tool_1.ScaleTrackerTool, { locale: locale }) : react_1.default.createElement(react_1.default.Fragment, null))), document.querySelector('.cesium-viewer')));
     }, [
         baseMaps,

package/dist/cesium-map/tools/scale-tracker.tool.js

@@ -136,7 +136,10 @@ var ScaleTrackerTool = function (props) {
         mapViewer.camera.moveEnd.addEventListener(setFromEvent);
         return function () {
             try {
-                mapViewer.camera.moveEnd.removeEventListener(setFromEvent);
+                /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
+                if (lodash_1.get(mapViewer, '_cesiumWidget') != undefined) {
+                    mapViewer.camera.moveEnd.removeEventListener(setFromEvent);
+                }
             }
             catch (e) {
                 console.log('CESIUM camera "moveEnd" remove listener failed', e);

package/dist/cesium-map/tools/zoom_level-tracker.tool.css

@@ -0,0 +1,19 @@
+.zoomLevel {
+  z-index: 2000;
+  background-color: var(--mdc-theme-surface);
+  border-radius: 2px;
+  padding: 2px;
+  height: 24px;
+}
+
+.zoomLevelValue {
+  margin: 2px;
+  font-size: 14px;
+  line-height: 10px;
+  text-align: center;
+}
+
+.zoomLevelLabel {
+  font-size: 8px;
+  line-height: 8px;
+}

package/dist/cesium-map/tools/zoom_level-tracker.tool.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './zoom_level-tracker.tool.css';
+export interface RZoomLevelTrackerToolProps {
+    locale?: {
+        [key: string]: string;
+    };
+}
+export declare const ZoomLevelTrackerTool: React.FC<RZoomLevelTrackerToolProps>;

package/dist/cesium-map/tools/zoom_level-tracker.tool.js

@@ -0,0 +1,134 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomLevelTrackerTool = void 0;
+var react_1 = __importStar(require("react"));
+var lodash_1 = require("lodash");
+var map_1 = require("../map");
+var map_types_1 = require("../map.types");
+require("./zoom_level-tracker.tool.css");
+/* eslint-disable @typescript-eslint/no-magic-numbers, @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-assignment,  @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+var detectZoomLevel = function (distance, viewer) {
+    var _a;
+    var MAX_ZOOM_LEVEL = 19;
+    var tileProvider = lodash_1.get(viewer.scene.globe, '_surface.tileProvider');
+    var quadtree = tileProvider._quadtree;
+    var drawingBufferHeight = viewer.canvas.height;
+    var sseDenominator = (_a = lodash_1.get(viewer.camera.frustum, 'sseDenominator')) !== null && _a !== void 0 ? _a : 1;
+    for (var level = 0; level <= MAX_ZOOM_LEVEL; level++) {
+        var maxGeometricError = tileProvider.getLevelMaximumGeometricError(level);
+        var error = (maxGeometricError * drawingBufferHeight) / (distance * sseDenominator);
+        if (error < quadtree.maximumScreenSpaceError) {
+            return level;
+        }
+    }
+    return null;
+};
+var getZoomLevelHeights = function (precision, viewer) {
+    precision = precision || 10;
+    var result = [];
+    var step = 100000.0;
+    var currentZoomLevel = 0;
+    for (var height = 100000000.0; height > step; height = height - step) {
+        var level = detectZoomLevel(height, viewer);
+        if (level === null) {
+            break;
+        }
+        if (level !== currentZoomLevel) {
+            var minHeight = height;
+            var maxHeight = height + step;
+            while (maxHeight - minHeight > precision) {
+                height = minHeight + (maxHeight - minHeight) / 2;
+                if (detectZoomLevel(height, viewer) === level) {
+                    minHeight = height;
+                }
+                else {
+                    maxHeight = height;
+                }
+            }
+            result.push({
+                level: level,
+                height: Math.round(height),
+            });
+            currentZoomLevel = level;
+            if (result.length >= 2) {
+                step = (result[result.length - 2].height - height) / 1000.0;
+            }
+        }
+    }
+    return result;
+};
+/* eslint-enable @typescript-eslint/no-magic-numbers */
+var ZoomLevelTrackerTool = function (props) {
+    var _a;
+    var mapViewer = map_1.useCesiumMap();
+    var _b = react_1.useState(1), zoomLevel = _b[0], setZoomLevel = _b[1];
+    var zoomLevelHeights = getZoomLevelHeights(1, mapViewer);
+    react_1.useEffect(function () {
+        var calculateZoomLevel = function () {
+            var camera = mapViewer.camera;
+            var ORTHOPHOTO_HEIGHT_FRUSTRUM_FACTOR = 0.5;
+            var cameraHeight = 0;
+            switch (mapViewer.scene.mode) {
+                case map_types_1.CesiumSceneMode.SCENE3D:
+                    cameraHeight = mapViewer.scene.mapProjection.ellipsoid.cartesianToCartographic(camera.positionWC).height;
+                    break;
+                case map_types_1.CesiumSceneMode.SCENE2D:
+                    cameraHeight =
+                        (camera.frustum.right -
+                            camera.frustum.left) *
+                            ORTHOPHOTO_HEIGHT_FRUSTRUM_FACTOR;
+                    break;
+                case map_types_1.CesiumSceneMode.COLUMBUS_VIEW:
+                    cameraHeight = camera.position.z;
+                    break;
+                default:
+                    cameraHeight = 0;
+                    break;
+            }
+            if (zoomLevelHeights.length > 0) {
+                var closestZoom = zoomLevelHeights.reduce(function (a, b) {
+                    return Math.abs(b.height - cameraHeight) <
+                        Math.abs(a.height - cameraHeight)
+                        ? b
+                        : a;
+                });
+                setZoomLevel(closestZoom.level);
+            }
+        };
+        mapViewer.camera.moveEnd.addEventListener(calculateZoomLevel);
+        return function () {
+            try {
+                /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
+                if (lodash_1.get(mapViewer, '_cesiumWidget') != undefined) {
+                    mapViewer.camera.moveEnd.removeEventListener(calculateZoomLevel);
+                }
+            }
+            catch (e) {
+                console.log('CESIUM camera "moveEnd"(from zoom tracker) remove listener failed', e);
+            }
+        };
+    }, [mapViewer, zoomLevelHeights.length]);
+    return (react_1.default.createElement("div", { className: "zoomLevel" },
+        react_1.default.createElement("div", { className: "zoomLevelValue" }, zoomLevel),
+        react_1.default.createElement("div", { className: "zoomLevelLabel" }, (_a = lodash_1.get(props.locale, 'ZOOM_LABEL')) !== null && _a !== void 0 ? _a : 'zoom')));
+};
+exports.ZoomLevelTrackerTool = ZoomLevelTrackerTool;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-colonies/react-components",
-  "version": "3.14.0",
+  "version": "3.15.1",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -93,7 +93,7 @@
     "jest-enzyme": "^7.1.2",
     "react-test-renderer": "^16.13.1"
   },
-  "gitHead": "71cc65e8ccd3f45ab1b0eb9de2bd3aab10735654",
+  "gitHead": "cb8b1ee909c0d1650e255d163b52ef6fcb436cba",
   "jest": {
     "coverageReporters": [
       "text",

package/src/lib/cesium-map/map.stories.tsx

@@ -121,6 +121,7 @@ LocalizedMap.argTypes = {
       MAP_SETTINGS_SCENE_MODE_TITLE: 'תצורה',
       MAP_SETTINGS_BASE_MAP_TITLE: 'מפות בסיס',
       MAP_SETTINGS_OK_BUTTON_TEXT: 'אישור',
+      ZOOM_LABEL: 'זום',
     },
     /* eslint-enable @typescript-eslint/naming-convention */
   },

package/src/lib/cesium-map/map.tsx

@@ -27,6 +27,7 @@ import { Box } from '../box';
 import { Proj } from '../utils/projections';
 import { CoordinatesTrackerTool } from './tools/coordinates-tracker.tool';
 import { ScaleTrackerTool } from './tools/scale-tracker.tool';
+import { ZoomLevelTrackerTool } from './tools/zoom_level-tracker.tool';
 import { CesiumSettings, IBaseMap, IBaseMaps } from './settings/settings';
 import { IMapLegend, MapLegendSidebar, MapLegendToggle } from './map-legend';
 import LayerManager, { LegendExtractor } from './layers-manager';
@@ -105,6 +106,7 @@ interface ILegends {
 
 export interface CesiumMapProps extends ViewerProps {
   showMousePosition?: boolean;
+  showZoomLevel?: boolean;
   showScale?: boolean;
   projection?: Proj;
   center?: [number, number];
@@ -138,6 +140,7 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
   const [mapViewRef, setMapViewRef] = useState<CesiumViewer>();
   const [projection, setProjection] = useState<Proj>();
   const [showMousePosition, setShowMousePosition] = useState<boolean>();
+  const [showZoomLevel, setShowZoomLevel] = useState<boolean>();
   const [showScale, setShowScale] = useState<boolean>();
   const [locale, setLocale] = useState<{ [key: string]: string }>();
   const [cameraState, setCameraState] = useState<ICameraState | undefined>();
@@ -275,6 +278,10 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
     setShowMousePosition(props.showMousePosition ?? true);
   }, [props.showMousePosition]);
 
+  useEffect(() => {
+    setShowZoomLevel(props.showZoomLevel ?? true);
+  }, [props.showZoomLevel]);
+
   useEffect(() => {
     setShowScale(props.showScale ?? true);
   }, [props.showScale]);
@@ -412,6 +419,11 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
             ) : (
               <></>
             )}
+            {showZoomLevel === true ? (
+              <ZoomLevelTrackerTool locale={locale} />
+            ) : (
+              <></>
+            )}
             {showScale === true ? <ScaleTrackerTool locale={locale} /> : <></>}
           </Box>
         </>,

package/src/lib/cesium-map/settings/settings.stories.tsx

@@ -171,7 +171,11 @@ export const MapWithSettings: Story = () => {
         center={center}
         zoom={14}
         imageryProvider={false}
-        sceneModes={[CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW]}
+        sceneModes={[
+          CesiumSceneMode.SCENE3D,
+          CesiumSceneMode.SCENE2D,
+          CesiumSceneMode.COLUMBUS_VIEW,
+        ]}
         baseMaps={BASE_MAPS}
       >
         <CesiumXYZLayer options={optionsXYZSanDiego} />

package/src/lib/cesium-map/tools/scale-tracker.tool.tsx

@@ -160,7 +160,10 @@ export const ScaleTrackerTool: React.FC<RScaleTrackerToolProps> = (props) => {
 
     return (): void => {
       try {
-        mapViewer.camera.moveEnd.removeEventListener(setFromEvent);
+        /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
+        if (get(mapViewer, '_cesiumWidget') != undefined) {
+          mapViewer.camera.moveEnd.removeEventListener(setFromEvent);
+        }
       } catch (e) {
         console.log('CESIUM camera "moveEnd" remove listener failed', e);
       }

package/src/lib/cesium-map/tools/zoom_level-tracker.tool.css

@@ -0,0 +1,19 @@
+.zoomLevel {
+  z-index: 2000;
+  background-color: var(--mdc-theme-surface);
+  border-radius: 2px;
+  padding: 2px;
+  height: 24px;
+}
+
+.zoomLevelValue {
+  margin: 2px;
+  font-size: 14px;
+  line-height: 10px;
+  text-align: center;
+}
+
+.zoomLevelLabel {
+  font-size: 8px;
+  line-height: 8px;
+}

package/src/lib/cesium-map/tools/zoom_level-tracker.tool.tsx

@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from 'react';
+import { get } from 'lodash';
+import { PerspectiveOffCenterFrustum } from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+
+import './zoom_level-tracker.tool.css';
+
+export interface RZoomLevelTrackerToolProps {
+  locale?: { [key: string]: string };
+}
+
+/* eslint-disable @typescript-eslint/no-magic-numbers, @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-assignment,  @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+const detectZoomLevel = (distance: number, viewer: CesiumViewer) => {
+  const MAX_ZOOM_LEVEL = 19;
+  const tileProvider = get(viewer.scene.globe, '_surface.tileProvider') as any;
+  const quadtree = tileProvider._quadtree;
+  const drawingBufferHeight = viewer.canvas.height;
+  const sseDenominator = get(viewer.camera.frustum, 'sseDenominator') ?? 1;
+
+  for (let level = 0; level <= MAX_ZOOM_LEVEL; level++) {
+    const maxGeometricError = tileProvider.getLevelMaximumGeometricError(level);
+    const error =
+      (maxGeometricError * drawingBufferHeight) / (distance * sseDenominator);
+    if (error < quadtree.maximumScreenSpaceError) {
+      return level;
+    }
+  }
+
+  return null;
+};
+
+const getZoomLevelHeights = (precision: number, viewer: CesiumViewer) => {
+  precision = precision || 10;
+
+  const result = [];
+  let step = 100000.0;
+  let currentZoomLevel = 0;
+  for (let height = 100000000.0; height > step; height = height - step) {
+    const level = detectZoomLevel(height, viewer);
+    if (level === null) {
+      break;
+    }
+
+    if (level !== currentZoomLevel) {
+      let minHeight = height;
+      let maxHeight = height + step;
+      while (maxHeight - minHeight > precision) {
+        height = minHeight + (maxHeight - minHeight) / 2;
+        if (detectZoomLevel(height, viewer) === level) {
+          minHeight = height;
+        } else {
+          maxHeight = height;
+        }
+      }
+
+      result.push({
+        level: level,
+        height: Math.round(height),
+      });
+
+      currentZoomLevel = level;
+
+      if (result.length >= 2) {
+        step = (result[result.length - 2].height - height) / 1000.0;
+      }
+    }
+  }
+
+  return result;
+};
+/* eslint-enable @typescript-eslint/no-magic-numbers */
+
+export const ZoomLevelTrackerTool: React.FC<RZoomLevelTrackerToolProps> = (
+  props
+) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const zoomLevelHeights = getZoomLevelHeights(1, mapViewer);
+
+  useEffect(() => {
+    const calculateZoomLevel = () => {
+      const camera = mapViewer.camera;
+      const ORTHOPHOTO_HEIGHT_FRUSTRUM_FACTOR = 0.5;
+      let cameraHeight = 0;
+
+      switch (mapViewer.scene.mode) {
+        case CesiumSceneMode.SCENE3D:
+          cameraHeight = mapViewer.scene.mapProjection.ellipsoid.cartesianToCartographic(
+            camera.positionWC
+          ).height;
+          break;
+        case CesiumSceneMode.SCENE2D:
+          cameraHeight =
+            ((camera.frustum as PerspectiveOffCenterFrustum).right -
+              (camera.frustum as PerspectiveOffCenterFrustum).left) *
+            ORTHOPHOTO_HEIGHT_FRUSTRUM_FACTOR;
+          break;
+        case CesiumSceneMode.COLUMBUS_VIEW:
+          cameraHeight = camera.position.z;
+          break;
+        default:
+          cameraHeight = 0;
+          break;
+      }
+
+      if (zoomLevelHeights.length > 0) {
+        const closestZoom = zoomLevelHeights.reduce((a, b) => {
+          return Math.abs(b.height - cameraHeight) <
+            Math.abs(a.height - cameraHeight)
+            ? b
+            : a;
+        });
+
+        setZoomLevel(closestZoom.level);
+      }
+    };
+
+    mapViewer.camera.moveEnd.addEventListener(calculateZoomLevel);
+
+    return (): void => {
+      try {
+        /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
+        if (get(mapViewer, '_cesiumWidget') != undefined) {
+          mapViewer.camera.moveEnd.removeEventListener(calculateZoomLevel);
+        }
+      } catch (e) {
+        console.log(
+          'CESIUM camera "moveEnd"(from zoom tracker) remove listener failed',
+          e
+        );
+      }
+    };
+  }, [mapViewer, zoomLevelHeights.length]);
+
+  return (
+    <div className="zoomLevel">
+      <div className="zoomLevelValue">{zoomLevel}</div>
+      <div className="zoomLevelLabel">
+        {get(props.locale, 'ZOOM_LABEL') ?? 'zoom'}
+      </div>
+    </div>
+  );
+};