Feature/add drawer ui

next-env.d.ts

 /// <reference types="next" />
-/// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited

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

+import { screen, render, RenderResult } from '@testing-library/react';
+import { Drawer } from './Drawer.component';
+
+const renderComponent = (): RenderResult => render(<Drawer />);
+
+describe('Drawer - component', () => {
+  it('should render Drawer', () => {
+    renderComponent();
+
+    expect(screen.getByRole('drawer')).toBeInTheDocument();
+  });
+});

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

+import { useState } from 'react';
+import { Button } from '@/shared/Button';
+import { twMerge } from 'tailwind-merge';
+import { IconButton } from '@/shared/IconButton';
+
+const drawerRole = 'drawer';
+const closeButtonRole = 'close-drawer-button';
+
+export const Drawer = (): JSX.Element | null => {
+  const [open, setOpenDrawer] = useState(false);
+
+  return (
+    <>
+      <Button
+        className="absolute top-[110px] left-[100px] z-10 peer"
+        onClick={(): void => setOpenDrawer(true)}
+      >
+        Open Drawer
+      </Button>
+
+      <div
+        className={twMerge(
+          'absolute top-[104px] left-[88px] z-10 w-[432px] h-calc-drawer bg-white-pearl text-font-500 transition-all duration-500 transform -translate-x-full',
+          open && 'translate-x-0',
+        )}
+        role={drawerRole}
+      >
+        <div className="flex justify-between items-center text-xl px-6 py-8 border-b border-b-divide">
+          <div>
+            <span className="font-normal">Search: </span>
+            <span className="font-semibold">NADH</span>
+          </div>
+          <IconButton
+            className="bg-white-pearl"
+            classNameIcon="fill-font-500"
+            icon="close"
+            role={closeButtonRole}
+            onClick={(): void => setOpenDrawer(false)}
+          />
+        </div>
+      </div>
+    </>
+  );
+};

src/components/Map/Drawer/index.ts

+export { Drawer } from './Drawer.component';

src/components/Map/Map.component.tsx

 import mapImg from '@/assets/images/image.jpg';
+import { Drawer } from '@/components/Map/Drawer';
 import Image from 'next/image';
 
 export const Map = (): JSX.Element => (
-  <div className="w-100 h-screen bg-black" data-testid="map-container">
-    <Image src={mapImg} fill sizes="100vw" alt="map" />
+  <div className="w-100 h-screen bg-black relative z-0" data-testid="map-container">
+    <Drawer />
+    <Image src={mapImg} fill sizes="100vw" alt="map" className="z-0" />
   </div>
 );

src/shared/Icon/Icon.component.tsx

-import { ChevronRightIcon } from '@/assets/vectors/icons/ChevronRightIcon';
-import { ChevronLeftIcon } from '@/assets/vectors/icons/ChevronLeftIcon';
-import { ChevronUpIcon } from '@/assets/vectors/icons/ChevronUpIcon';
-import { ChevronDownIcon } from '@/assets/vectors/icons/ChevronDownIcon';
-import { PlusIcon } from '@/assets/vectors/icons/PlusIcon';
-import { ArrowIcon } from '@/assets/vectors/icons/ArrowIcon';
-import { DotsIcon } from '@/assets/vectors/icons/DotsIcon';
-import { AdminIcon } from '@/assets/vectors/icons/AdminIcon';
-import { ExportIcon } from '@/assets/vectors/icons/ExportIcon';
-import { InfoIcon } from '@/assets/vectors/icons/InfoIcon';
-import { LegendIcon } from '@/assets/vectors/icons/LegendIcon';
-import { PageIcon } from '@/assets/vectors/icons/PageIcon';
-import { PluginIcon } from '@/assets/vectors/icons/PluginIcon';
+import { ChevronRightIcon } from '@/shared/Icon/Icons/ChevronRightIcon';
+import { ChevronLeftIcon } from '@/shared/Icon/Icons/ChevronLeftIcon';
+import { AdminIcon } from '@/shared/Icon/Icons/AdminIcon';
+import { ArrowIcon } from '@/shared/Icon/Icons/ArrowIcon';
+import { ChevronDownIcon } from '@/shared/Icon/Icons/ChevronDownIcon';
+import { ChevronUpIcon } from '@/shared/Icon/Icons/ChevronUpIcon';
+import { DotsIcon } from '@/shared/Icon/Icons/DotsIcon';
+import { ExportIcon } from '@/shared/Icon/Icons/ExportIcon';
+import { InfoIcon } from '@/shared/Icon/Icons/InfoIcon';
+import { LegendIcon } from '@/shared/Icon/Icons/LegendIcon';
+import { PageIcon } from '@/shared/Icon/Icons/PageIcon';
+import { PluginIcon } from '@/shared/Icon/Icons/PluginIcon';
+import { PlusIcon } from '@/shared/Icon/Icons/PlusIcon';
+import { CloseIcon } from '@/shared/Icon/Icons/CloseIcon';
 
 import type { IconTypes } from '@/types/iconTypes';
 
@@ -33,6 +34,7 @@ const icons = {
   legend: LegendIcon,
   page: PageIcon,
   plugin: PluginIcon,
+  close: CloseIcon,
 } as const;
 
 export const Icon = ({ name, className = '' }: IconProps): JSX.Element => {

src/shared/Icon/Icons/CloseIcon.tsx

+interface CloseIconProps {
+  className?: string;
+}
+
+export const CloseIcon = ({ className }: CloseIconProps): JSX.Element => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2059_12637)">
+      <path d="M11.9997 10.5867L16.9497 5.63672L18.3637 7.05072L13.4137 12.0007L18.3637 16.9507L16.9497 18.3647L11.9997 13.4147L7.04974 18.3647L5.63574 16.9507L10.5857 12.0007L5.63574 7.05072L7.04974 5.63672L11.9997 10.5867Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2059_12637">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);