@reearth/core 0.0.7-alpha.4 → 0.0.7-alpha.41

package/src/engines/Cesium/Feature/Tileset/hooks.ts

@@ -15,13 +15,11 @@ import {
   Cesium3DTileFeature,
   Model,
   Cesium3DTilePointFeature,
-  GoogleMaps as CesiumGoogleMaps,
-  Resource,
-  defaultValue,
   ImageBasedLighting,
   Cesium3DTileContent,
   Color,
   Viewer,
+  createGooglePhotorealistic3DTileset,
 } from "cesium";
 import { pick } from "lodash-es";
 import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -57,7 +55,6 @@ import {
 } from "../utils";
 
 import { TilesetFeatureIndex } from "./TilesetFeatureIndex";
-import { GoogleMaps } from "./types";
 import { useClippingBox } from "./useClippingBox";
 import { useDrawClipping } from "./useDrawClipping";
 
@@ -77,6 +74,7 @@ const useData = (layer: ComputedLayer | undefined) => {
           ? data.layers.join(",")
           : data?.layers
         : undefined,
+      googleMapApiKey: data?.serviceTokens?.googleMapApiKey,
     };
   }, [layer]);
 };
@@ -225,20 +223,25 @@ const useFeature = ({
         const style = computedFeature?.["3dtiles"];
 
         COMMON_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+          const val = convertStyle(style?.[name], convert);
+
           if (name === "color") {
-            if (isFeatureSelected) {
-              raw.color =
-                typeof layer["3dtiles"]?.selectedFeatureColor === "string"
-                  ? toColor(layer["3dtiles"]?.selectedFeatureColor) ?? raw.color
-                  : raw.color;
-              return;
+            // Reset color to default so that new style could update all.
+            raw.color = DEFAULT_FEATURE_COLOR;
+
+            // Apply color from style.
+            if (val !== undefined) {
+              raw.color = val;
             }
 
-            raw.color = DEFAULT_FEATURE_COLOR;
-          }
-          const val = convertStyle(style?.[name], convert);
-          if (val !== undefined) {
-            raw[name] = val;
+            // Apply color for selected feature.
+            if (isFeatureSelected && typeof layer["3dtiles"]?.selectedFeatureColor === "string") {
+              raw.color = toColor(layer["3dtiles"]?.selectedFeatureColor) ?? val;
+            }
+          } else {
+            if (val !== undefined) {
+              raw[name] = val;
+            }
           }
         });
 
@@ -450,7 +453,7 @@ export const useHooks = ({
 }) => {
   const { viewer } = useCesium();
   const tilesetRef = useRef<Cesium3DTilesetType>();
-  const { onLayerLoad } = useContext();
+  const { onLayerLoad, updateCredits } = useContext();
   const layerIdRef = useRef(layer?.id);
   layerIdRef.current = layer?.id;
 
@@ -460,7 +463,6 @@ export const useHooks = ({
     edgeColor,
     edgeWidth,
     experimental_clipping,
-    apiKey,
     selectedFeatureColor,
     disableIndexingFeature,
   } = property ?? {};
@@ -481,7 +483,7 @@ export const useHooks = ({
   } = useClippingBox({ clipping: experimental_clipping, boxId });
 
   const [style, setStyle] = useState<Cesium3DTileStyle>();
-  const { url, type, idProperty } = useData(layer);
+  const { url, type, idProperty, googleMapApiKey } = useData(layer);
   const shouldUseFeatureIndex = !disableIndexingFeature && !!idProperty;
 
   const [isTilesetReady, setIsTilesetReady] = useState(false);
@@ -503,8 +505,9 @@ export const useHooks = ({
     return prevPlanes.current;
   }, [_planes]);
   const clipDirection = direction === "inside" ? -1 : 1;
+
   // Create immutable object
-  const [clippingPlanes] = useState(
+  const [clippingPlanes, setClippingPlanes] = useState<CesiumClippingPlaneCollection>(
     () =>
       new CesiumClippingPlaneCollection({
         planes: planes?.map(
@@ -519,6 +522,27 @@ export const useHooks = ({
         edgeColor: toColor(edgeColor),
       }),
   );
+  // Initialize clipping planes
+  // This is workaround to reinitialize ClippingPlanes in strict mode.
+  useEffect(
+    () => () => {
+      setClippingPlanes(
+        new CesiumClippingPlaneCollection({
+          planes: planes?.map(
+            plane =>
+              new ClippingPlane(
+                new Cartesian3(plane.normal?.x, plane.normal?.y, plane.normal?.z),
+                (plane.distance || 0) * clipDirection,
+              ),
+          ),
+          unionClippingRegions: direction === "outside",
+          edgeWidth: edgeWidth,
+          edgeColor: toColor(edgeColor),
+        }),
+      );
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
 
   const { drawClippingEnabled, drawClippingEdgeProps } = useDrawClipping({
     ...experimental_clipping?.draw,
@@ -708,31 +732,40 @@ export const useHooks = ({
     })();
   }, [styleUrl]);
 
-  const googleMapResource = useMemo(() => {
-    if (type !== "google-photorealistic" || !isVisible) return;
-    // Ref: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Scene/createGooglePhotorealistic3DTileset.js#L30
-    const googleMaps = CesiumGoogleMaps as GoogleMaps;
-    // Default key: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Core/GoogleMaps.js#L6C36-L6C36
-    const key = defaultValue(apiKey, googleMaps.defaultApiKey);
-    const credit = googleMaps.getDefaultApiKeyCredit(key);
-    return new Resource({
-      url: `${googleMaps.mapTilesApiEndpoint}3dtiles/root.json`,
-      queryParameters: { key },
-      credits: credit ? [credit] : undefined,
-    } as Resource.ConstructorOptions);
-  }, [apiKey, type, isVisible]);
+  const googleMapPhotorealisticResource = useMemo(() => {
+    if (type !== "google-photorealistic" || !isVisible) return null;
+
+    const loadTileset = async () => {
+      try {
+        if (googleMapApiKey) {
+          const tileset = await createGooglePhotorealistic3DTileset(googleMapApiKey);
+          return tileset.resource;
+        } else {
+          const resource = IonResource.fromAssetId(2275207, {
+            accessToken: meta?.cesiumIonAccessToken as string | undefined,
+          });
+          return resource;
+        }
+      } catch (error) {
+        console.error(`Error loading Photorealistic 3D Tiles tileset: ${error}`);
+        throw error;
+      }
+    };
+
+    return loadTileset();
+  }, [type, isVisible, googleMapApiKey, meta?.cesiumIonAccessToken]);
 
   const tilesetUrl = useMemo(() => {
     return type === "osm-buildings" && isVisible
       ? IonResource.fromAssetId(96188, {
           accessToken: meta?.cesiumIonAccessToken as string | undefined,
         }) // https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Scene/createOsmBuildings.js#L53
-      : googleMapResource
-        ? googleMapResource
+      : googleMapPhotorealisticResource && isVisible
+        ? googleMapPhotorealisticResource
         : type === "3dtiles" && isVisible
           ? url ?? tileset
           : null;
-  }, [isVisible, tileset, url, type, meta, googleMapResource]);
+  }, [type, isVisible, meta?.cesiumIonAccessToken, googleMapPhotorealisticResource, url, tileset]);
 
   const imageBasedLighting = useMemo(() => {
     if (
@@ -780,6 +813,13 @@ export const useHooks = ({
     [onLayerFetch, onLayerLoad],
   );
 
+  useEffect(() => {
+    updateCredits?.();
+    return () => {
+      updateCredits?.();
+    };
+  }, [type, updateCredits]);
+
   return {
     tilesetUrl,
     ref,

package/src/engines/Cesium/Feature/context.ts

@@ -26,6 +26,7 @@ export type Context = {
     position: [x: number, y: number, z: number],
   ) => [x: number, y: number] | undefined;
   isPositionVisible?: (position: [x: number, y: number, z: number]) => boolean;
+  updateCredits?: () => void;
 };
 
 export const context = createContext<Context>({});

package/src/engines/Cesium/Feature/index.tsx

@@ -96,6 +96,7 @@ const FEATURE_DELEGATE_THRESHOLD = 6000;
 export default function Feature({
   layer,
   isHidden,
+  sketchEditingFeature,
   ...props
 }: FeatureComponentProps): JSX.Element | null {
   const data = extractSimpleLayerData(layer);
@@ -131,7 +132,10 @@ export default function Feature({
     const useSceneSpecularEnvironmentMaps =
       !!props.viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
 
-    const isVisible = layer.layer.visible !== false && !isHidden;
+    const isVisible =
+      layer.layer.visible !== false &&
+      !isHidden &&
+      !(sketchEditingFeature?.layerId === layer.id && sketchEditingFeature?.feature?.id === f?.id);
 
     const componentId =
       urlMD5 +
@@ -140,7 +144,7 @@ export default function Feature({
           f?.id ?? ""
         }_${k}_${isVisible}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${
           JSON.stringify(f?.[k]) ?? ""
-        }_${JSON.stringify(layer.transition) ?? ""}`,
+        }_${JSON.stringify(layer.transition) ?? ""}_${JSON.stringify(f?.geometry) ?? ""}`,
       );
 
     if (cacheable) {

package/src/engines/Cesium/Feature/utils.tsx

@@ -23,9 +23,10 @@ import {
   ComponentType,
   ForwardedRef,
   forwardRef,
+  useCallback,
   useLayoutEffect,
   useMemo,
-  useRef,
+  useState,
 } from "react";
 import { type CesiumComponentRef, Entity } from "resium";
 
@@ -86,10 +87,11 @@ function EntityExtComponent(
   }: ComponentProps<typeof Entity> & Tag,
   ref: ForwardedRef<CesiumComponentRef<CesiumEntity>>,
 ) {
-  const r = useRef<CesiumComponentRef<CesiumEntity>>(null);
+  const [entity, setEntity] = useState<CesiumComponentRef<CesiumEntity> | null>(null);
 
   useLayoutEffect(() => {
-    attachTag(r.current?.cesiumElement, {
+    if (!entity?.cesiumElement) return;
+    attachTag(entity.cesiumElement, {
       layerId: layerId || props.id,
       featureId,
       draggable,
@@ -105,10 +107,12 @@ function EntityExtComponent(
     props.id,
     unselectable,
     hideIndicator,
-    r.current?.cesiumElement,
+    entity,
   ]);
 
-  return <Entity ref={composeRefs(ref, r)} {...props} />;
+  const handleRef = useCallback((r: CesiumComponentRef<CesiumEntity>) => setEntity(r), []);
+
+  return <Entity ref={composeRefs(ref, handleRef)} {...props} />;
 }
 
 export function attachTag(

package/src/engines/Cesium/Shaders/OverriddenShaders/GlobeFS/IBL.glsl

@@ -6,8 +6,7 @@
 // https://github.com/CesiumGS/cesium/blob/1.106/packages/engine/Source/Shaders/Model/ImageBasedLightingStageFS.glsl
 // Specular term was removed, as I never apply it on terrain.
 vec3 reearth_imageBasedLightingStage(vec3 positionEC, vec3 normalEC,
-                                     vec3 lightDirectionEC, vec3 lightColorHdr,
-                                     czm_pbrParameters pbrParameters) {
+                                     vec3 lightDirectionEC, czm_modelMaterial material) {
   vec3 v = -positionEC;
   vec3 n = normalEC;
   vec3 l = normalize(lightDirectionEC);
@@ -24,21 +23,18 @@ vec3 reearth_imageBasedLightingStage(vec3 positionEC, vec3 normalEC,
   vec3 diffuseIrradiance =
       czm_sphericalHarmonics(cubeDir, u_reearth_sphericalHarmonicCoefficients);
 
-  return pbrParameters.diffuseColor * diffuseIrradiance;
+  return material.diffuse * diffuseIrradiance;
 }
 
 vec4 reearth_computeImageBasedLightingColor(vec4 color) {
   if (u_reearth_globeImageBasedLighting) {
-    czm_pbrParameters pbrParameters;
-    pbrParameters.diffuseColor = color.rgb;
+    czm_modelMaterial material;
+    material.diffuse = color.rgb;
 
     vec3 normalEC = normalize(v_normalEC);
     vec3 lighting =
-        czm_pbrLighting(v_positionEC, normalEC, czm_lightDirectionEC,
-                        czm_lightColorHdr, pbrParameters);
-    lighting += reearth_imageBasedLightingStage(
-                    v_positionEC, normalEC, czm_lightDirectionEC,
-                    czm_lightColorHdr, pbrParameters) *
+        czm_pbrLighting(v_positionEC, normalEC, czm_lightDirectionEC, material) * czm_lightColorHdr;
+    lighting += reearth_imageBasedLightingStage(v_positionEC, normalEC, czm_lightDirectionEC, material) *
                 u_vertexShadowDarkness;
 
 #ifndef HDR

package/src/engines/Cesium/Sketch/ControlPoint.tsx

@@ -5,37 +5,42 @@ import {
   type PositionProperty,
   type Property,
 } from "@cesium/engine";
-import { useMemo, useRef, type FC } from "react";
+import { useCallback, useMemo, useRef, type FC } from "react";
 import { Entity } from "resium";
 import invariant from "tiny-invariant";
 
 import { useConstant } from "../../../utils";
 
-let image: HTMLCanvasElement | undefined;
+import { ADDING_POINT_COLOR, DEFAULT_EDIT_COLOR, SELECTED_EDIT_COLOR } from "./constants";
 
-function getImage(): HTMLCanvasElement {
-  if (image != null) {
-    return image;
-  }
-  image = document.createElement("canvas");
-  image.width = 16;
-  image.height = 16;
-  const context = image.getContext("2d");
-  invariant(context != null);
-  context.fillStyle = "white";
-  context.fillRect(3, 3, 10, 10);
-  context.strokeStyle = "black";
-  context.lineWidth = 2;
-  context.strokeRect(3, 3, 10, 10);
-  return image;
-}
+import { ControlPointMouseEventHandler } from ".";
+
+let drawPointImage: HTMLCanvasElement | undefined;
+let editPointImage: HTMLCanvasElement | undefined;
+let selectedPointImage: HTMLCanvasElement | undefined;
+let addingPointImage: HTMLCanvasElement | undefined;
 
 export interface ControlPointProps {
   position: Property | Cartesian3;
   clampToGround?: boolean;
+  index: number;
+  isEditing?: boolean;
+  isSelected?: boolean;
+  isAddingPoint?: boolean;
+  isExtrudedControlPoint?: boolean;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
 }
 
-export const ControlPoint: FC<ControlPointProps> = ({ position, clampToGround = false }) => {
+export const ControlPoint: FC<ControlPointProps> = ({
+  position,
+  clampToGround = false,
+  index,
+  isEditing,
+  isSelected,
+  isAddingPoint,
+  isExtrudedControlPoint,
+  handleControlPointMouseEvent,
+}) => {
   const positionRef = useRef(position);
   positionRef.current = position;
   const positionProperty = useConstant(
@@ -53,15 +58,114 @@ export const ControlPoint: FC<ControlPointProps> = ({ position, clampToGround =
     () => ({
       position: positionProperty,
       billboard: {
-        image: getImage(),
-        width: 8,
-        height: 8,
+        image: isEditing
+          ? isAddingPoint
+            ? getAddingPointImage()
+            : isSelected
+              ? getSelectedPointImage()
+              : getEditPointImage()
+          : getDrawPointImage(),
+        width: isEditing ? 16 : 8,
+        height: isEditing ? 16 : 8,
         heightReference: clampToGround ? HeightReference.CLAMP_TO_GROUND : HeightReference.NONE,
         disableDepthTestDistance: Infinity,
       },
     }),
-    [clampToGround, positionProperty],
+    [clampToGround, positionProperty, isAddingPoint, isEditing, isSelected],
   );
 
-  return <Entity {...options} />;
+  const handleMouseDown = useCallback(() => {
+    handleControlPointMouseEvent?.(index, !!isExtrudedControlPoint, "mousedown");
+  }, [index, isExtrudedControlPoint, handleControlPointMouseEvent]);
+
+  const handleMouseClick = useCallback(() => {
+    handleControlPointMouseEvent?.(index, !!isExtrudedControlPoint, "click");
+  }, [index, isExtrudedControlPoint, handleControlPointMouseEvent]);
+
+  return <Entity {...options} onMouseDown={handleMouseDown} onClick={handleMouseClick} />;
 };
+
+function getDrawPointImage(): HTMLCanvasElement {
+  if (drawPointImage != null) {
+    return drawPointImage;
+  }
+  drawPointImage = document.createElement("canvas");
+  drawPointImage.width = 16;
+  drawPointImage.height = 16;
+  const ctx = drawPointImage.getContext("2d");
+  invariant(ctx != null);
+  ctx.fillStyle = "white";
+  ctx.fillRect(3, 3, 10, 10);
+  ctx.strokeStyle = "black";
+  ctx.lineWidth = 2;
+  ctx.strokeRect(3, 3, 10, 10);
+  return drawPointImage;
+}
+
+function getEditPointImage(): HTMLCanvasElement {
+  return getImage(editPointImage, {
+    size: 32,
+    color: "white",
+    strokeColor: DEFAULT_EDIT_COLOR,
+  });
+}
+
+function getSelectedPointImage(): HTMLCanvasElement {
+  return getImage(selectedPointImage, {
+    size: 32,
+    color: "white",
+    strokeColor: SELECTED_EDIT_COLOR,
+  });
+}
+
+function getAddingPointImage(): HTMLCanvasElement {
+  if (addingPointImage != null) {
+    return addingPointImage;
+  }
+  addingPointImage = document.createElement("canvas");
+  addingPointImage.width = 32;
+  addingPointImage.height = 32;
+  const ctx = addingPointImage.getContext("2d");
+  invariant(ctx != null);
+  ctx.beginPath();
+  ctx.arc(16, 16, 12, 0, 2 * Math.PI);
+  ctx.fillStyle = "white";
+  ctx.fill();
+  ctx.strokeStyle = ADDING_POINT_COLOR;
+  ctx.lineWidth = 4;
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(16, 8);
+  ctx.lineTo(16, 24);
+  ctx.stroke();
+  ctx.moveTo(8, 16);
+  ctx.lineTo(24, 16);
+  ctx.stroke();
+  return addingPointImage;
+}
+
+function getImage(
+  canvas: HTMLCanvasElement | undefined,
+  options: {
+    size: number;
+    color: string;
+    strokeColor: string;
+  },
+): HTMLCanvasElement {
+  if (canvas != null) {
+    return canvas;
+  }
+  canvas = document.createElement("canvas");
+  canvas.width = options.size;
+  canvas.height = options.size;
+  const ctx = canvas.getContext("2d");
+  invariant(ctx != null);
+  ctx.beginPath();
+  ctx.arc(options.size / 2, options.size / 2, options.size / 2 - 4, 0, 2 * Math.PI);
+  ctx.fillStyle = options.color;
+  ctx.fill();
+  ctx.strokeStyle = options.strokeColor;
+  ctx.lineWidth = 4;
+  ctx.stroke();
+  return canvas;
+}

package/src/engines/Cesium/Sketch/ExtrudedControlPoints.tsx

@@ -1,46 +1,91 @@
-import { Cartesian3, type Color } from "@cesium/engine";
+import { Cartesian3, Color } from "@cesium/engine";
 import { memo, type FC } from "react";
-import { useCesium } from "resium";
-import invariant from "tiny-invariant";
 
+import { Position3d } from "../../../types";
+
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { ControlPoint } from "./ControlPoint";
 import { type GeometryOptions } from "./createGeometry";
 import { ExtrudedMeasurement } from "./ExtrudedMeasurement";
 
+import { ControlPointMouseEventHandler } from ".";
+
 export interface ExtrudedControlPointsProps {
   geometryOptions: GeometryOptions;
   extrudedHeight: number;
+  extrudedPoint?: Position3d;
+  centroidBasePoint?: Position3d;
+  centroidExtrudedPoint?: Position3d;
+  catchedExtrudedPoint?: boolean;
   color?: Color;
+  isEditing?: boolean;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
 }
 
-const cartesianScratch = new Cartesian3();
-
 const ExtrudedControlPoints: FC<ExtrudedControlPointsProps> = memo(
-  ({ geometryOptions: { controlPoints }, extrudedHeight, color }) => {
-    const { viewer } = useCesium();
+  ({
+    geometryOptions: { controlPoints, type },
+    extrudedHeight,
+    color,
+    isEditing,
+    extrudedPoint: extrudedPointPosition,
+    centroidBasePoint: extrudeBasePointPosition,
+    centroidExtrudedPoint: extrudeControlPointPosition,
+    catchedExtrudedPoint,
+    handleControlPointMouseEvent,
+  }) => {
     const controlPoint = controlPoints[controlPoints.length - 1];
-    const normal = viewer?.scene?.globe.ellipsoid.geodeticSurfaceNormal(
-      controlPoint,
-      cartesianScratch,
-    );
 
-    invariant(normal !== undefined);
-    const extrudedPoint = Cartesian3.add(
-      controlPoint,
-      Cartesian3.multiplyByScalar(normal, extrudedHeight, cartesianScratch),
-      cartesianScratch,
-    );
+    const extrudedPoint = extrudedPointPosition
+      ? new Cartesian3(...extrudedPointPosition)
+      : undefined;
+
+    const heightBasePoint = extrudeBasePointPosition
+      ? new Cartesian3(...extrudeBasePointPosition)
+      : undefined;
+
+    const centroidExtrudedPoint = extrudeControlPointPosition
+      ? new Cartesian3(...extrudeControlPointPosition)
+      : undefined;
 
     return (
       <>
-        <ControlPoint position={controlPoint} clampToGround />
-        <ControlPoint position={extrudedPoint} />
-        <ExtrudedMeasurement
-          a={controlPoint}
-          b={extrudedPoint}
-          extrudedHeight={extrudedHeight}
-          color={color}
-        />
+        {extrudedPoint && (
+          <>
+            <ControlPoint
+              index={-1}
+              position={extrudedPoint}
+              isEditing={isEditing}
+              isExtrudedControlPoint
+              handleControlPointMouseEvent={handleControlPointMouseEvent}
+            />
+            {(!isEditing || catchedExtrudedPoint) && (
+              <ExtrudedMeasurement
+                a={controlPoint}
+                b={extrudedPoint}
+                extrudedHeight={extrudedHeight}
+                color={isEditing ? Color.fromCssColorString(DEFAULT_EDIT_COLOR) : color}
+                showLine={type !== "extrudedPolygon"}
+              />
+            )}
+          </>
+        )}
+        {heightBasePoint && (
+          <ControlPoint
+            index={-1}
+            position={heightBasePoint}
+            isEditing={isEditing}
+            isExtrudedControlPoint
+          />
+        )}
+        {centroidExtrudedPoint && (
+          <ControlPoint
+            index={-1}
+            position={centroidExtrudedPoint}
+            isEditing={isEditing}
+            isExtrudedControlPoint
+          />
+        )}
       </>
     );
   },

package/src/engines/Cesium/Sketch/ExtrudedMeasurement.tsx

@@ -46,6 +46,7 @@ export interface ExtrudedMeasurementProps {
   b: Cartesian3;
   extrudedHeight: number;
   color?: Color;
+  showLine?: boolean;
 }
 
 export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
@@ -53,6 +54,7 @@ export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
   b,
   extrudedHeight,
   color,
+  showLine,
 }) => {
   const position = useConstant(() => new Cartesian3());
   return (
@@ -64,7 +66,7 @@ export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
             : `${(extrudedHeight / 1000).toFixed(1)} km`}
         </MeasurementText>
       </ScreenSpaceElement>
-      <MeasurementLine a={a} b={b} color={color} />
+      {showLine && <MeasurementLine a={a} b={b} color={color} />}
     </>
   );
 };