konstitisyon.nu/components/versions/version-search.js

import {useState} from 'react'
import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import TextField from '@mui/material/TextField'
import InputAdornment from '@mui/material/InputAdornment'
import IconButton from '@mui/material/IconButton'
import SearchIcon from '@mui/icons-material/Search'
import ClearIcon from '@mui/icons-material/Clear'
import {useDebouncedCallback} from 'use-debounce'

export default function VersionSearch({onSearchChange, placeholder = 'Rechercher dans les versions...'}) {
  const [searchValue, setSearchValue] = useState('')

  // Debounce search to avoid too many filter updates
  const debouncedSearch = useDebouncedCallback(value => {
    onSearchChange(value.trim())
  }, 300)

  const handleSearchChange = event => {
    const {value} = event.target
    setSearchValue(value)
    debouncedSearch(value)
  }

  const handleClearSearch = () => {
    setSearchValue('')
    onSearchChange('')
  }

  return (
    <Box sx={{mb: 2}}>
      <TextField
        fullWidth
        size='small'
        placeholder={placeholder}
        value={searchValue}
        inputProps={{'aria-label': 'Rechercher dans les versions'}}
        InputProps={{
          startAdornment: (
            <InputAdornment position='start'>
              <SearchIcon color='action' />
            </InputAdornment>
          ),
          endAdornment: searchValue && (
            <InputAdornment position='end'>
              <IconButton
                size='small'
                aria-label='effacer recherche'
                edge='end'
                onClick={handleClearSearch}
              >
                <ClearIcon />
              </IconButton>
            </InputAdornment>
          )
        }}
        sx={{
          '& .MuiOutlinedInput-root': {
            backgroundColor: 'background.paper',
            '&:hover': {
              backgroundColor: 'action.hover'
            },
            '&.Mui-focused': {
              backgroundColor: 'background.paper'
            }
          }
        }}
        onChange={handleSearchChange}
      />
    </Box>
  )
}

VersionSearch.propTypes = {
  onSearchChange: PropTypes.func.isRequired,
  placeholder: PropTypes.string
}