feat: add search for list pages

src/pages/Country/CountryListPage/index.tsx

@@ -1,7 +1,7 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { authStore, countryStore, languageStore } from "@shared";
-import { useEffect, useState } from "react";
+import { authStore, countryStore, languageStore, SearchInput } from "@shared";
+import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Trash2, Minus } from "lucide-react";
 
@@ -22,6 +22,7 @@ export const CountryListPage = observer(() => {
   });
   const { language } = languageStore;
   const canWriteCountries = authStore.canWrite("countries");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchCountries = async () => {
@@ -72,11 +73,16 @@ export const CountryListPage = observer(() => {
     }] : []),
   ];
 
-  const rows = countries[language]?.data.map((country) => ({
-    id: country.code,
-    code: country.code,
-    name: country.name,
-  }));
+  const rows = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    return (countries[language]?.data ?? [])
+      .filter((country) => !query || (country.name ?? "").toLowerCase().includes(query))
+      .map((country) => ({
+        id: country.code,
+        code: country.code,
+        name: country.name,
+      }));
+  }, [countries[language]?.data, searchQuery]);
 
   return (
     <>
@@ -102,8 +108,10 @@ export const CountryListPage = observer(() => {
           </div>
         )}
 
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         <DataGrid
-          rows={rows || []}
+          rows={rows}
           columns={columns}
           checkboxSelection={canWriteCountries}
           disableRowSelectionExcludeModel