feat: add search for list pages

src/pages/Article/ArticleListPage/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, articlesStore, languageStore } from "@shared";
-import { useEffect, useState } from "react";
+import { authStore, articlesStore, languageStore, SearchInput } from "@shared";
+import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Trash2, Eye, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
@@ -22,6 +22,7 @@ export const ArticleListPage = observer(() => {
     pageSize: 50,
   });
   const canWriteArticles = authStore.canWrite("sights");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchArticles = async () => {
@@ -72,11 +73,16 @@ export const ArticleListPage = observer(() => {
     },
   ];
 
-  const rows = articleList[language].data.map((article) => ({
-    id: article.id,
-    heading: article.heading,
-    body: article.body,
-  }));
+  const rows = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    return articleList[language].data
+      .filter((article) => !query || (article.heading ?? "").toLowerCase().includes(query))
+      .map((article) => ({
+        id: article.id,
+        heading: article.heading,
+        body: article.body,
+      }));
+  }, [articleList[language].data, searchQuery]);
 
   return (
     <>
@@ -99,6 +105,8 @@ export const ArticleListPage = observer(() => {
           </div>
         )}
 
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         <div className="w-full">
           <DataGrid
             rows={rows}