Merge pull request #82 from Vizzuality/SKY30-158-add-legend-to-establ…

…ishment

[SKY30-158]: establishment legend

frontend/src/containers/data-tool/content/map/layers-toolbox/legend/establishment/index.tsx

@@ -0,0 +1,32 @@
+import Icon from '@/components/ui/icon';
+import DesignatedIcon from '@/styles/icons/designated.svg?sprite';
+import ImplementedIcon from '@/styles/icons/implemented.svg?sprite';
+import ManagedIcon from '@/styles/icons/managed.svg?sprite';
+import ProposedIcon from '@/styles/icons/proposed.svg?sprite';
+
+const ITEM_LIST_CLASSES = 'flex items-center space-x-2';
+const ICON_CLASSES = 'h-7 w-7 border border-black rounded-full';
+
+const PATTERNS = {
+  proposed: ProposedIcon,
+  managed: ManagedIcon,
+  designated: DesignatedIcon,
+  implemented: ImplementedIcon,
+};
+
+const EEZLayerLegend = (config: { items: { label: string; pattern: string }[] }) => {
+  const { items } = config;
+
+  return (
+    <ul className="space-y-3 font-mono text-xs">
+      {items.map(({ label, pattern }) => (
+        <li key={pattern} className={ITEM_LIST_CLASSES}>
+          <Icon icon={PATTERNS[pattern]} className={ICON_CLASSES} />
+          <span>{label}</span>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default EEZLayerLegend;

frontend/src/lib/json-converter/index.ts

@@ -9,6 +9,7 @@ import { JSONConfiguration, JSONConverter } from '@deck.gl/json/typed';
 //   LegendTypeGradient,
 // } from '@/components/map/legend/item-types';
 import EEZLayerLegend from '@/containers/data-tool/content/map/layers-toolbox/legend/eez';
+import EstablishmentLayerLegend from '@/containers/data-tool/content/map/layers-toolbox/legend/establishment';
 import EEZLayerPopup from '@/containers/data-tool/content/map/popup/eez';
 import GenericPopup from '@/containers/data-tool/content/map/popup/generic';
 import ProtectedAreaPopup from '@/containers/data-tool/content/map/popup/protected-area';
@@ -30,6 +31,7 @@ export const JSON_CONFIGURATION = new JSONConfiguration({
     EEZLayerLegend,
     GenericPopup,
     ProtectedAreaPopup,
+    EstablishmentLayerLegend,
     // LegendTypeBasic,
     // LegendTypeChoropleth,
     // LegendTypeGradient,