Add new node info panel

src/components/Channel.tsx

@@ -181,7 +181,7 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
                 </div>
               </>
             </Disclosure.Button>
-            <Disclosure.Panel className="p-2 border-t">
+            <Disclosure.Panel className="p-2 border-t border-gray-300 dark:border-gray-600">
               {loading && <Loading />}
               <div className="flex px-2 my-auto">
                 <form className="w-full gap-3">

src/components/Map/Marker.tsx

@@ -2,20 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import mapbox from 'mapbox-gl';
-import ReactDOMServer from 'react-dom/server';
 
 import { useMapbox } from '@hooks/useMapbox';
 
 export interface MarkerProps extends Omit<mapbox.MarkerOptions, 'element'> {
   children?: React.ReactNode;
   center: mapbox.LngLatLike;
-  popup: JSX.Element;
 }
 
 export const Marker = ({
   children,
   center,
-  popup,
   ...props
 }: MarkerProps): JSX.Element => {
   const { map } = useMapbox();
@@ -23,14 +20,10 @@ export const Marker = ({
 
   const addMarker = React.useCallback((): void => {
     if (map) {
-      const marker = new mapbox.Marker(ref.current, props)
-        .setLngLat(center)
-        .setPopup(
-          new mapbox.Popup().setHTML(ReactDOMServer.renderToString(popup)),
-        );
+      const marker = new mapbox.Marker(ref.current, props).setLngLat(center);
       marker.addTo(map);
     }
-  }, [map, center, props, popup]);
+  }, [map, center, props]);
 
   React.useEffect(() => {
     map?.on('load', () => {

src/components/TabButton.tsx

@@ -0,0 +1,27 @@
+import type React from 'react';
+
+import { Tab } from '@headlessui/react';
+
+export interface TabButtonProps {
+  children: React.ReactNode;
+}
+
+export const TabButton = ({ children }: TabButtonProps): JSX.Element => {
+  return (
+    <Tab
+      className={({ selected }): string =>
+        `border-gray-300 hover:border-b-2 dark:border-gray-600 w-full ${
+          selected ? 'border-b-2' : 'border-b-0'
+        } `
+      }
+    >
+      <div className="my-auto text-gray-500 group dark:text-gray-400">
+        <div className="flex p-2 rounded-t-md hover:bg-gray-200 dark:hover:bg-gray-600">
+          <div className="m-auto transition duration-200 ease-in-out group-active:scale-90">
+            {children}
+          </div>
+        </div>
+      </div>
+    </Tab>
+  );
+};