From b4ff1f44c6dbee1ccdbf080269806a4155cbc0f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Flatval?= <hakon.flatval@cognite.com>
Date: Thu, 27 Jul 2023 14:53:02 +0200
Subject: [PATCH] feat: initial info card overlay

---
 .../src/components/InfoCard/InfoCard.tsx      | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 react-components/src/components/InfoCard/InfoCard.tsx

diff --git a/react-components/src/components/InfoCard/InfoCard.tsx b/react-components/src/components/InfoCard/InfoCard.tsx
new file mode 100644
index 00000000000..f5dcaaa2256
--- /dev/null
+++ b/react-components/src/components/InfoCard/InfoCard.tsx
@@ -0,0 +1,44 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React, { JSX, useState, useEffect, useRef } from 'react';
+
+import { Vector3 } from 'three';
+
+import { useReveal } from '../RevealContainer/RevealContext';
+
+import { HtmlOverlayTool } from '@cognite/reveal/tools';
+
+import styled from 'styled-components';
+
+export type InfoCardProps = {
+  card: JSX.Element;
+  position: Vector3;
+};
+
+export const InfoCard = ({
+  card,
+  position
+}: InfoCardProps): JSX.Element => {
+  const viewer = useReveal();
+
+  const divReference = useRef<HTMLDivElement>(null);
+  const [htmlTool, _setHtmlTool] = useState<HtmlOverlayTool>(new HtmlOverlayTool(viewer));
+  const htmlElement = (<div ref={divReference}> {card} </div>);
+
+  useEffect(() => {
+    if (divReference.current === null) return;
+    const innerElement = divReference.current;
+
+    htmlTool.add(innerElement, position);
+
+    return () => htmlTool.remove(innerElement);
+  }, [card, htmlTool, divReference.current]);
+
+  return htmlElement;
+}
+
+export const FloatingDiv = styled.div`
+  position: absolute;
+`