Feature/search bioentities details

List and details of bio entities.

We cannot treat bio entities in the same way as mirna, chemicals or drugs. Thats why I decided to save list of all bio entities in store after clicking on individual submap.

I separated the components for bioEntities from the others (MiRNA, chemicals, drugs). Now, at the SearchDrawerWrapper component level, we have separate components:

• ResultsList for drugs, chemicals and MiRNA
• BioEntitiesResultsList for bio entites

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx

 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@/shared/Icon';
-import { MirnaItems } from '@/types/models';
-import { getPinColor } from './PinsListItem.component.utils';
-import { PinType } from '../PinsList.types';
+import { BioEntity } from '@/types/models';
+import { getPinColor } from '../../../ResultsList/PinsList/PinsListItem/PinsListItem.component.utils';
 
-interface MirnaPinsListItemProps {
+interface BioEntitiesPinsListItemProps {
   name: string;
-  type: PinType;
-  pin: MirnaItems;
+  pin: BioEntity;
 }
 
-export const MirnaPinsListItem = ({ name, type, pin }: MirnaPinsListItemProps): JSX.Element => {
+export const BioEntitiesPinsListItem = ({
+  name,
+  pin,
+}: BioEntitiesPinsListItemProps): JSX.Element => {
   return (
     <div className="mb-4 flex w-full flex-col gap-3 rounded-lg border-[1px] border-solid border-greyscale-500 p-4">
       <div className="flex w-full flex-row items-center gap-2">
-        <Icon name="pin" className={twMerge('mr-2 shrink-0', getPinColor(type))} />
+        <Icon name="pin" className={twMerge('mr-2 shrink-0', getPinColor('bioEntity'))} />
         <p>
-          Full name: <span className="w-full font-bold">{name}</span>
+          {pin.stringType}: <span className="w-full font-bold">{name}</span>
         </p>
       </div>
-      <ul className="leading-6">
-        <div className="font-bold">Elements:</div>
-        {pin.targetParticipants.map(element => {
-          return (
-            <li key={element.id} className="my-2 px-2">
-              <a
-                href={element.link}
-                target="_blank"
-                className="cursor-pointer text-primary-500 underline"
-              >
-                {element.type} ({element.resource})
-              </a>
-            </li>
-          );
-        })}
-      </ul>
+      <p className="font-bold leading-6">
+        Full name: <span className="w-full font-normal">{pin.fullName}</span>
+      </p>
+      <p className="font-bold leading-6">
+        Symbol: <span className="w-full font-normal">{pin.symbol}</span>
+      </p>
+      <p className="font-bold leading-6">
+        Synonyms: <span className="w-full font-normal">{pin.synonyms.join(', ')}</span>
+      </p>
       <ul className="leading-6">
         <div className="font-bold">References:</div>
         {pin.references.map(reference => {