feat(pin): added Mirna pins and details

Added Mirna pins and details on Search.

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/MirnaPinsListItem.component.tsx

+import { twMerge } from 'tailwind-merge';
+import { Icon } from '@/shared/Icon';
+import { MirnaItems } from '@/types/models';
+import { getPinColor } from './PinsListItem.component.utils';
+
+interface MirnaPinsListItemProps {
+  name: string;
+  pin: MirnaItems;
+}
+
+export const MirnaPinsListItem = ({ name, pin }: MirnaPinsListItemProps): JSX.Element => {
+  return (
+    <div className="mb-4 flex w-full flex-col gap-2 rounded-lg border-[1px] border-solid border-greyscale-500 p-4">
+      <div className="flex w-full flex-row gap-2">
+        <Icon name="pin" className={twMerge('mr-2 shrink-0', getPinColor('mirna'))} />
+        <p className="min-w-fit">Full name: </p>
+        <p className="w-full font-bold">{name}</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>
+      <ul className="leading-6">
+        <div className="font-bold">References:</div>
+        {pin.references.map(reference => {
+          return (
+            <li key={reference.id} className="my-2 px-2">
+              <a
+                href={reference.article?.link}
+                target="_blank"
+                className="cursor-pointer text-primary-500 underline"
+              >
+                {reference.type} ({reference.resource})
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};