update board buttons UI, add catalog search UI

src/components/catalog-search/catalog-search.module.css

@@ -0,0 +1,49 @@
+.button {
+  text-transform: capitalize;
+  color: var(--button-desktop-text-color);
+  text-decoration: var(--button-text-decoration);
+}
+
+.button:hover {
+  color: var(--button-desktop-text-color-hover);
+  cursor: pointer;
+}
+
+.filtersButton {
+  text-transform: capitalize;
+}
+
+.searchContainer {
+  display: inline;
+}
+
+.searchContainer input {
+  width: 75px;
+  margin: 0px 5px;
+  padding: 1px;
+  outline: none;
+  border: 1px solid #AAA;
+  font-size: 11px;
+}
+
+.searchContainer input:focus {
+  border: var(--post-form-field-input-focus-border);
+}
+
+.closeSearch {
+  cursor: pointer;
+  border: none;
+  white-space: nowrap;
+  color: var(--button-desktop-text-color);
+}
+
+.closeSearch:hover {
+  color: var(--button-desktop-text-color-hover);
+}
+
+@media (max-width: 640px) {
+  .searchContainer input {
+    width: 75px;
+    font-size: 16px;
+  }
+}

src/components/catalog-search/catalog-search.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './catalog-search.module.css';
+import useIsMobile from '../../hooks/use-is-mobile';
+
+const CatalogSearch = () => {
+  const { t } = useTranslation();
+  const [openSearch, setOpenSearch] = useState(false);
+
+  useEffect(() => {
+    if (openSearch) {
+      const input = document.querySelector('input');
+      input?.focus();
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          setOpenSearch(false);
+        }
+      };
+      window.addEventListener('keydown', handleKeyDown);
+    }
+  }, [openSearch]);
+
+  const isMobile = useIsMobile();
+
+  return (
+    <>
+      {!isMobile && '['}
+      <span className={`${styles.filtersButton} button`} onClick={() => setOpenSearch(!openSearch)}>
+        {t('search')}
+      </span>
+      {!isMobile && ']'}
+      {openSearch && (
+        <div className={styles.searchContainer}>
+          <input type='text' />
+          <span className={styles.closeSearch} onClick={() => setOpenSearch(false)}>
+            ✖
+          </span>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CatalogSearch;

src/components/catalog-search/index.ts

@@ -0,0 +1 @@
+export { default } from './catalog-search';