diff --git a/src/components/leaderboard/TopMinersTable.tsx b/src/components/leaderboard/TopMinersTable.tsx index dacf92ce..305170a4 100644 --- a/src/components/leaderboard/TopMinersTable.tsx +++ b/src/components/leaderboard/TopMinersTable.tsx @@ -12,6 +12,8 @@ import { CircularProgress, Collapse, Grid, + InputAdornment, + TextField, Tooltip, Popover, Portal, @@ -21,10 +23,13 @@ import { import { alpha } from '@mui/material/styles'; import TuneOutlinedIcon from '@mui/icons-material/TuneOutlined'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import SearchIcon from '@mui/icons-material/Search'; import ViewModuleIcon from '@mui/icons-material/ViewModule'; import ViewListIcon from '@mui/icons-material/ViewList'; import { MinerCard } from './MinerCard'; import { MinersList } from './MinersList'; +import { ClearSearchAdornment } from '../common'; +import { DebouncedSearchInput } from '../common/DebouncedSearchInput'; import theme, { STATUS_COLORS } from '../../theme'; import { useDataTableParams } from '../../hooks/useDataTableParams'; import { @@ -298,6 +303,11 @@ const TopMinersTable: React.FC = ({ ? MINERS_PAGE_SIZE : storedVisibleCount; + const handleSearchChange = useCallback( + (value: string) => setFilter('search', value), + [setFilter], + ); + const handleViewModeChange = useCallback( (nextMode: ViewMode) => { // Persist the user's choice BEFORE updating the URL. When the serializer @@ -495,35 +505,87 @@ const TopMinersTable: React.FC = ({ const usePortal = portalTarget && isLargeScreen; + const searchInput = ( + + {({ draftValue, setDraftValue }) => ( + setDraftValue(e.target.value)} + InputProps={{ + startAdornment: ( + + + + ), + endAdornment: ( + { + setDraftValue(''); + handleSearchChange(''); + }} + /> + ), + }} + sx={{ + width: { xs: '100%', sm: 260 }, + '& .MuiOutlinedInput-root': { + color: 'text.primary', + backgroundColor: 'background.default', + fontSize: '0.8rem', + height: '36px', + borderRadius: 2, + '& fieldset': { borderColor: 'border.light' }, + '&:hover fieldset': { borderColor: 'border.medium' }, + '&.Mui-focused fieldset': { borderColor: 'primary.main' }, + }, + }} + /> + )} + + ); + return ( {/* On large screens: render controls expanded in the sidebar */} {usePortal ? ( - - - + <> + + + + {searchInput} + ) : ( + {searchInput}