adds inventory/scenario legends

app/components/collapsible/index.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

app/components/features/selected-item/component.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState, ReactNode } from 'react';
 
-import cx from 'classnames';
+import { HiEye, HiEyeOff } from 'react-icons/hi';
 
 import { useFeatureFlags } from 'hooks/feature-flags';
 
@@ -10,16 +10,15 @@ import Select from 'components/forms/select';
 import Icon from 'components/icon';
 import InfoButton from 'components/info-button';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import STRAT_1_IMG from 'images/info-buttons/img_strat_1.png';
 import STRAT_2_IMG from 'images/info-buttons/img_strat_2.png';
 import STRAT_3_IMG from 'images/info-buttons/img_strat_3.png';
 
-import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
 import INTERSECT_SVG from 'svgs/ui/intersect.svg?sprite';
 import PLUS_SVG from 'svgs/ui/plus.svg?sprite';
 import REMOVE_SVG from 'svgs/ui/remove.svg?sprite';
-import SHOW_SVG from 'svgs/ui/show.svg?sprite';
 import SPLIT_SVG from 'svgs/ui/split.svg?sprite';
 
 export interface ItemProps {
@@ -128,17 +127,12 @@ export const Item: React.FC<ItemProps> = ({
   // RENDER
   return (
     <div
-      className={cx({
+      className={cn({
         'bg-gray-800 text-white': true,
         [className]: !!className,
       })}
     >
-      <header
-        className={cx({
-          'border-l-4 px-4 py-2': true,
-          'border-yellow-500': true,
-        })}
-      >
+      <header className="border-l-4 border-yellow-400 px-4 py-2">
         <div className="flex items-start justify-between">
           <h2 className="font-heading text-sm">{name}</h2>
 
@@ -153,7 +147,7 @@ export const Item: React.FC<ItemProps> = ({
                   aria-label="manage-see-on-map"
                   type="button"
                   onClick={() => setSplitOpen(!splitOpen)}
-                  className={cx({
+                  className={cn({
                     'flex h-5 w-5 items-center justify-center ': true,
                     'text-white': !splitSelected,
                     'text-yellow-500': !!splitSelected,
@@ -177,12 +171,17 @@ export const Item: React.FC<ItemProps> = ({
                 aria-label="manage-see-on-map"
                 type="button"
                 onClick={onSeeOnMap}
-                className={cx({
+                className={cn({
                   'flex h-5 w-5 items-center justify-center text-white': true,
                   'text-gray-400': !isShown,
                 })}
               >
-                <Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} />
+                {isShown ? (
+                  <HiEye className="h-4 w-4 text-blue-400" />
+                ) : (
+                  <HiEyeOff className="h-4 w-4" />
+                )}
+                {/* <Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} /> */}
               </button>
             </Tooltip>
 

app/components/map/legend/group/index.tsx

@@ -0,0 +1,63 @@
+import { ComponentProps, PropsWithChildren, useEffect, useState } from 'react';
+
+import { HiChevronDown, HiChevronUp } from 'react-icons/hi';
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'components/collapsible';
+import { cn } from 'utils/cn';
+
+const ICON_COMMON_CLASSES =
+  'text-white group-data-[state=open]:text-blue-400 group-data-[disabled]:hidden';
+
+const LegendGroup = ({
+  title,
+  children,
+  defaultOpen = true,
+  className,
+  disabled = false,
+  ...props
+}: PropsWithChildren<
+  ComponentProps<typeof Collapsible> & {
+    title: string;
+  }
+>): JSX.Element => {
+  const [isOpen, setOpen] = useState(defaultOpen && !disabled);
+
+  useEffect(() => {
+    if (!disabled && defaultOpen) setOpen(true);
+  }, [disabled, defaultOpen]);
+
+  return (
+    <Collapsible
+      defaultOpen={defaultOpen && !disabled}
+      onOpenChange={setOpen}
+      className={cn({
+        group: true,
+        [className]: Boolean(className),
+      })}
+      disabled={disabled}
+      open={isOpen}
+      {...props}
+    >
+      <CollapsibleTrigger className="py-2">
+        <header
+          className={cn({
+            'flex items-center space-x-1': true,
+            'group-data-[disabled]:pl-4': true,
+          })}
+        >
+          {isOpen ? (
+            <HiChevronUp className={ICON_COMMON_CLASSES} />
+          ) : (
+            <HiChevronDown className={ICON_COMMON_CLASSES} />
+          )}
+          <h4 className="text-sm font-semibold group-data-[disabled]:text-gray-300 group-data-[state=open]:text-blue-400">
+            {title}
+          </h4>
+        </header>
+      </CollapsibleTrigger>
+      <CollapsibleContent>{children}</CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export default LegendGroup;

app/components/map/legend/index.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo, Children, isValidElement, PropsWithChildren } from 'react';
+
+import { ScrollArea } from 'components/scroll-area';
+import { cn } from 'utils/cn';
+
+import SortableList from './sortable/list';
+
+export const Legend = ({
+  open,
+  children,
+  className = '',
+  sortable,
+  onChangeOrder,
+}: PropsWithChildren<{
+  open: boolean;
+  className?: string;
+  sortable?: {
+    enabled: boolean;
+    handle: boolean;
+    handleIcon: React.ReactNode;
+  };
+  onChangeOrder?: (id: string[]) => void;
+  onChangeOpen?: (open: boolean) => void;
+}>): JSX.Element => {
+  const isChildren = useMemo(() => {
+    return !!Children.count(Children.toArray(children).filter((c) => isValidElement(c)));
+  }, [children]);
+
+  return (
+    <div
+      className={cn({
+        'flex flex-col': true,
+        hidden: !isChildren,
+        [className]: !!className,
+      })}
+    >
+      {open && (
+        <ScrollArea className="relative flex w-full flex-col rounded-3xl bg-black px-2 py-2 before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-black before:via-black after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-black after:via-black">
+          <div className="divide-y divide-gray-600 divide-opacity-50 py-2">
+            {!!sortable && (
+              <SortableList sortable={sortable} onChangeOrder={onChangeOrder}>
+                {children}
+              </SortableList>
+            )}
+
+            {!sortable && children}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+};
+
+export default Legend;