From 6b4e60702cbcc5d1ffac8112c2bf4371d132327e Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Fri, 16 Feb 2024 13:51:00 +0000
Subject: [PATCH] Legend item to support items with custom SVGs

---
 .../map/layers-toolbox/legend/item.tsx        | 27 +++++++++++++++++++
 frontend/src/types/layers.ts                  |  3 ++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/frontend/src/containers/map/content/map/layers-toolbox/legend/item.tsx b/frontend/src/containers/map/content/map/layers-toolbox/legend/item.tsx
index 7c66ecf0..d50084ba 100644
--- a/frontend/src/containers/map/content/map/layers-toolbox/legend/item.tsx
+++ b/frontend/src/containers/map/content/map/layers-toolbox/legend/item.tsx
@@ -1,13 +1,23 @@
 import { FC, ReactElement, isValidElement, useMemo } from 'react';
 
 import TooltipButton from '@/components/tooltip-button';
+import Icon from '@/components/ui/icon';
 import { parseConfig } from '@/lib/json-converter';
+import EEZIcon from '@/styles/icons/eez.svg?sprite';
+import EEZSelectedIcon from '@/styles/icons/selected-eez.svg?sprite';
+import EEZMultipleIcon from '@/styles/icons/several-eez.svg?sprite';
 import { LayerTyped, LegendConfig } from '@/types/layers';
 
 export interface LegendItemsProps {
   config: LayerTyped['legend_config'];
 }
 
+const ICONS_MAPPING = {
+  eez: EEZIcon,
+  'eez-selected': EEZSelectedIcon,
+  'eez-multiple': EEZMultipleIcon,
+};
+
 const LegendItem: FC<LegendItemsProps> = ({ config }) => {
   const { type, items } = config;
 
@@ -48,6 +58,23 @@ const LegendItem: FC<LegendItemsProps> = ({ config }) => {
         </ul>
       );
 
+    case 'icon':
+      return (
+        <ul className="flex w-full flex-col space-y-1">
+          {items.map(({ value, icon, description }) => (
+            <li key={`${value}`} className="flex space-x-2 p-1">
+              <span className="h-7 w-7">
+                <Icon icon={ICONS_MAPPING[icon]} className="h-7 w-7" />
+              </span>
+              <span className="flex items-center text-xs">
+                <span className="font-mono">{value}</span>
+                {description && <TooltipButton className="-my-1" text={description} />}
+              </span>
+            </li>
+          ))}
+        </ul>
+      );
+
     case 'choropleth':
       return (
         <>
diff --git a/frontend/src/types/layers.ts b/frontend/src/types/layers.ts
index 6f4a23a6..1d9117bd 100644
--- a/frontend/src/types/layers.ts
+++ b/frontend/src/types/layers.ts
@@ -16,9 +16,10 @@ export type ParamsConfigValue = {
 export type ParamsConfig = Record<string, ParamsConfigValue>[];
 
 export type LegendConfig = {
-  type: 'basic' | 'gradient' | 'choropleth';
+  type: 'basic' | 'icon' | 'gradient' | 'choropleth';
   items: {
     value: string;
+    icon: string;
     color: string;
     description?: string;
   }[];