Εφαρμόστε μια λειτουργία αναζήτησης και φίλτρου σε ένα συστατικό React χρησιμοποιώντας useState. - Χρησιμοποιήστε το useState για να δημιουργήσετε μια κατάσταση αναζήτησης και μια κατάσταση φίλτρου ρόλου. - Συνδέστε την κατάσταση αναζήτησης με την τιμή ενός πεδίου εισαγωγής και ενημερώστε την κατά την αλλαγή. - Συνδέστε την κατάσταση φίλτρου ρόλου με την τιμή ενός αναδυόμενου μενού select και ενημερώστε την κατά την αλλαγή. - Στυλιζάρετε το πεδίο εισαγωγής με padding και μέγεθος γραμματοσειράς.

jsx import React, { useState } from 'react';

function SearchFilterComponent() { const [search, setSearch] = useState(''); const [roleFilter, setRoleFilter] = useState('');

return ( <div> <input type="text" value={search} onChange={e => setSearch(e.target.value)} placeholder="Search..." style={{ padding: '8px', fontSize: '16px' }} />

  <select
    value={roleFilter}
    onChange={e => setRoleFilter(e.target.value)}
  >
    <option value="">All Roles</option>
    <option value="admin">Admin</option>
    <option value="user">User</option>
    <option value="guest">Guest</option>
  </select>

  {/* Здесь можно добавить логику отображения отфильтрованных данных */}
</div>

); }

export default SearchFilterComponent;