SubmapsDrawer.tsx

import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { modelsDataSelector } from '@/redux/models/models.selectors';
import { DrawerHeading } from '@/shared/DrawerHeading';
import { SubmpamItem } from './SubmapItem/SubmapItem.component';

export const SubmapsDrawer = (): JSX.Element => {
  const models = useAppSelector(modelsDataSelector);

  return (
    <div data-testid="submap-drawer" className="h-full max-h-full">
      <DrawerHeading title="Submaps" />
      <ul className="h-[calc(100%-93px)] max-h-[calc(100%-93px)] overflow-y-auto px-6">
        {models.map(model => (
          <SubmpamItem key={model.idObject} modelName={model.name} />
        ))}
      </ul>
    </div>
  );
};