feature: добавил кнопку отчистки поля поиска

app/routes/home.tsx

@@ -2,7 +2,7 @@ import {useEffect, useState} from "react";
 import '../assets/styles/home.css';
 import {
     Box, Button,
-    Divider, Fab,
+    Divider, Fab, IconButton, InputAdornment,
     TextField,
     ThemeProvider, Typography,
     useTheme
@@ -16,6 +16,7 @@ import ItemDialog from "~/components/itemDialog";
 import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag';
 import ReportDialog from "~/components/reportDialog";
 import LoopIcon from '@mui/icons-material/Loop';
+import ClearIcon from '@mui/icons-material/Clear';
 
 export default function Home() {
     const outerTheme = useTheme();
@@ -29,6 +30,7 @@ export default function Home() {
     const [fabIsHovered, setFabIsHovered] = useState(false);
     const [showReportDialog, setReportShowDialog] = useState(false);
     const [triggerUpdate, setTriggerUpdate] = useState(0);
+    const [showEraseButton, setShowEraseButton] = useState(false);
 
     useEffect(() => {
         let isIgnore = false;
@@ -52,12 +54,14 @@ export default function Home() {
 
     useEffect(() => {
         if (searchText !== ""){
+            setShowEraseButton(true);
             setIsFetchingList(true);
             let result = search(searchText);
             console.log(result);
             setBlacklistItems(result);
             setIsFetchingList(false);
         } else {
+            setShowEraseButton(false);
             setBlacklistItems(totalBlacklistItems);
         }
     }, [searchText]);
@@ -88,6 +92,10 @@ export default function Home() {
         setTriggerUpdate(triggerUpdate + 1)
     };
 
+    const handleClickEraseSearch = () => {
+        setSearchText("");
+    };
+
     const search = (searchString: string) => {
         searchString = searchString.toLowerCase();
         return totalBlacklistItems.filter((item) => {
@@ -109,6 +117,33 @@ export default function Home() {
                         value={searchText}
                         onChange={(e) => handleSearch(e.target.value)}
                         fullWidth
+                        slotProps={{
+                            input: {
+                                endAdornment: <InputAdornment position="end">
+                                    { showEraseButton ? <IconButton
+                                        onClick={handleClickEraseSearch}
+                                        edge="end"
+                                        sx={{
+                                            marginRight: '1px',
+                                            padding: '5px!important',
+                                            '&:hover': {
+                                                // backgroundColor: '#282c34',
+                                                backgroundColor: '#E0E3E7',
+                                                border: '1px solid #E0E3E7',
+                                                '& > .MuiSvgIcon-root': {
+                                                    color: '#282c34',
+                                                },
+                                            }
+                                        }}
+                                    >
+                                       <ClearIcon sx={{
+                                           color: '#E0E3E7',
+                                           fontSize: '1.2rem'
+                                       }}/>
+                                    </IconButton> : "" }
+                                </InputAdornment>,
+                            },
+                        }}
                     />
                     <Button
                         variant="outlined"