Draft: Feature/project info publications modal + table

Description

Initialised publications table

Things done

• added modal for publications list
• added headless table for publications
• added sorting by column
• added pagination
• added search bar (component is ready and functional but decided to comment it out due to need of adjusting whole modal layout)

Things that haven't been done in this PR (yet)

• testing
• elements on map column
• filtering by submap (selector)

src/components/FunctionalArea/Modal/PublicationsModal/PublicationsSearch/PublicationsSearch.component.tsx

+import { ChangeEvent, useEffect, useState } from 'react';
+import lensIcon from '@/assets/vectors/icons/lens.svg';
+import { useDebounce } from '@/hooks/useDebounce';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { getPublications } from '@/redux/publications/publications.thunks';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { isLoadingSelector } from '@/redux/publications/publications.selectors';
+import Image from 'next/image';
+
+export const PublicationsSearch = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const isLoading = useAppSelector(isLoadingSelector);
+  const [value, setValue] = useState('');
+  const debouncedValue = useDebounce<string>(value);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    setValue(event.target.value);
+  };
+
+  useEffect(() => {
+    dispatch(getPublications({ search: debouncedValue }));
+  }, [dispatch, debouncedValue]);
+
+  return (
+    <div className="mt-5">
+      <input
+        value={value}
+        name="search-input"
+        aria-label="search-input"
+        data-testid="search-input"
+        onChange={handleChange}
+        disabled={isLoading}
+        className="h-9 w-72 rounded-[64px] border border-transparent bg-cultured px-4 py-2.5 text-xs font-medium text-font-400 outline-none  hover:border-greyscale-600 focus:border-greyscale-600"
+      />
+      <button disabled={isLoading} type="button" className="bg-transparent">
+        <Image
+          src={lensIcon}
+          alt="lens icon"
+          height={16}
+          width={16}
+          className="absolute right-4 top-2.5"
+        />
+      </button>
+    </div>
+  );
+};