UserList.tsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Container, Grid, TextField, CircularProgress } from '@material-ui/core';

type User = {
  name: string;
  email: string;
  picture: string;
};

type ApiResponse = {
  results: User[];
};

const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');

  const fetchData = async () => {
    setLoading(true);
    try {
      const response = await axios.get<ApiResponse>('https://randomuser.me/api/');
      setUsers(response.data.results);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const filteredUsers = users.filter(user =>
    user.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <Container>
      <TextField
        label="Search"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      {loading ? (
        <CircularProgress />
      ) : (
        <Grid container spacing={3}>
          {filteredUsers.map((user, index) => (
            <Grid item xs={12} sm={6} md={4} key={index}>
              <div>
                <img src={user.picture} alt="Profile" />
                <p>Name: {user.name}</p>
                <p>Email: {user.email}</p>
              </div>
            </Grid>
          ))}
        </Grid>
      )}
    </Container>
  );
};

export default UserList;