feat: add search for list pages

src/pages/Media/MediaListPage/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, languageStore, MEDIA_TYPE_LABELS, mediaStore } from "@shared";
-import { useEffect, useState } from "react";
+import { authStore, languageStore, MEDIA_TYPE_LABELS, mediaStore, SearchInput } from "@shared";
+import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Eye, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
@@ -22,6 +22,7 @@ export const MediaListPage = observer(() => {
   });
   const { language } = languageStore;
   const canWriteMedia = authStore.canWrite("sights");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchMedia = async () => {
@@ -95,15 +96,22 @@ export const MediaListPage = observer(() => {
     },
   ];
 
-  const rows = media.map((media) => ({
-    id: media.id,
-    media_name: media.media_name,
-    media_type: media.media_type,
-  }));
+  const rows = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    return media
+      .filter((item) => !query || (item.media_name ?? "").toLowerCase().includes(query))
+      .map((item) => ({
+        id: item.id,
+        media_name: item.media_name,
+        media_type: item.media_type,
+      }));
+  }, [media, searchQuery]);
 
   return (
     <>
       <div className="w-full">
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         {canWriteMedia && ids.length > 0 && (
           <div className="flex justify-end mb-5 duration-300">
             <button