Merge branch 'feat/legend' into 'main'

feat(legend): implementation of legend for visualizations

See merge request !54

libs/shared/lib/components/Legend.tsx

+import React from 'react';
+import { Close, ExpandLess, ExpandMore } from '@mui/icons-material';
+
+type Props = {
+  title?: string;
+  screenPosition?: string;
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  children: React.ReactNode;
+};
+
+const DEFAULT_TITLE = 'Legend';
+const DEFAULT_SCREEN_POSITION = 'top-2 right-2';
+
+export const Legend =({ title = DEFAULT_TITLE, screenPosition = DEFAULT_SCREEN_POSITION, open, setOpen, children }: Props) => {
+  const [expand, setExpand] = React.useState<boolean>(true);
+
+  return (
+    open && (
+      <div className={`absolute ${screenPosition} z-20 bg-white w-60`}>
+        <div className="px-4 py-3 flex justify-between align-middle">
+          <h4 className="font-bold">{title}</h4>
+          <div>
+            <button className="btn btn-outline btn-xs" onClick={() => setExpand(!expand)}>
+              {expand ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}
+            </button>
+            <button className="btn btn-primary btn-xs ml-1" onClick={() => setOpen(false)}>
+              <Close fontSize="small" />
+            </button>
+          </div>
+        </div>
+        {expand && <div className="px-4 pb-3">{children}</div>}
+      </div>
+    )
+  );
+}