Resolve "[MIN-114] Browse comments on the map"

Closes #68 (closed)

src/components/Map/Drawer/CommentDrawer/CommentDrawer.component.tsx

+import { DrawerHeading } from '@/shared/DrawerHeading';
+import { useSelector } from 'react-redux';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component';
+import { ZERO } from '@/constants/common';
+import { currentDrawerCommentId } from '@/redux/drawer/drawer.selectors';
+import { allCommentsSelectorOfCurrentMap } from '@/redux/comment/comment.selectors';
+
+export const CommentDrawer = (): React.ReactNode => {
+  const commentId = useSelector(currentDrawerCommentId);
+
+  const commentsData = useAppSelector(allCommentsSelectorOfCurrentMap);
+
+  const comments = commentsData.filter(commentEntry => commentEntry.id === commentId);
+
+  if (comments.length === ZERO) {
+    return null;
+  }
+
+  return (
+    <div className="h-full max-h-full" data-testid="reaction-drawer">
+      <DrawerHeading title={<span className="font-normal">Area: </span>} />
+      <div className="flex h-[calc(100%-93px)] max-h-[calc(100%-93px)] flex-col gap-6 overflow-y-auto p-6">
+        <div className="font-bold"> Comments</div>
+        {comments.map(comment => (
+          <CommentItem key={comment.id} comment={comment} />
+        ))}
+      </div>
+    </div>
+  );
+};