ConceptPortal-public/rsconcept/frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx

import clsx from 'clsx';

import { IConstituenta } from '@/models/rsform';
import { labelConstituenta } from '@/utils/labels';

interface ConstituentsListProps {
  list: number[];
  items: IConstituenta[];
  prefix: string;
  title?: string;
}

function ConstituentsList({ list, items, title, prefix }: ConstituentsListProps) {
  return (
    <div>
      {title ? (
        <p className='pb-1'>
          {title}: <b>{list.length}</b>
        </p>
      ) : null}
      <div className={clsx('h-[9rem]', 'px-3', 'overflow-y-auto', 'border', 'whitespace-nowrap')}>
        {list.map(id => {
          const cst = items.find(cst => cst.id === id);
          return cst ? <p key={`${prefix}${cst.id}`}>{labelConstituenta(cst)}</p> : null;
        })}
      </div>
    </div>
  );
}

export default ConstituentsList;