diff --git a/src/components/leaderboard/TopMinersTable.tsx b/src/components/leaderboard/TopMinersTable.tsx index dacf92ce..ae7bc435 100644 --- a/src/components/leaderboard/TopMinersTable.tsx +++ b/src/components/leaderboard/TopMinersTable.tsx @@ -17,12 +17,15 @@ import { Portal, useMediaQuery, TablePagination, + TextField, + InputAdornment, } from '@mui/material'; import { alpha } from '@mui/material/styles'; import TuneOutlinedIcon from '@mui/icons-material/TuneOutlined'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import ViewModuleIcon from '@mui/icons-material/ViewModule'; import ViewListIcon from '@mui/icons-material/ViewList'; +import SearchIcon from '@mui/icons-material/Search'; import { MinerCard } from './MinerCard'; import { MinersList } from './MinersList'; import theme, { STATUS_COLORS } from '../../theme'; @@ -331,6 +334,12 @@ const TopMinersTable: React.FC = ({ [setFilter], ); + const handleSearchChange = useCallback( + (e: React.ChangeEvent) => + setFilter('search', e.target.value), + [setFilter], + ); + // Rank is column-specific: it's the position when sorted by the active // metric, descending. Switching ASC just reverses the list (so the last- // place miner ends up at the top with their actual last-place rank, not @@ -521,9 +530,25 @@ const TopMinersTable: React.FC = ({ mb: 1.5, px: 2, display: 'flex', - justifyContent: 'flex-end', + alignItems: 'center', + justifyContent: 'space-between', + gap: 1, }} > + + + + ), + }} + />