-
Notifications
You must be signed in to change notification settings - Fork 0
/
card.js
31 lines (30 loc) · 809 Bytes
/
card.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from "react";
const Users = ({ loading, users }) => {
const mainstyle = {
display: "flex"
};
return loading ? (
<div id="main" align="center">
<img
src="https://miro.medium.com/max/1400/1*CsJ05WEGfunYMLGfsT2sXA.gif"
alt="loading.."
className="loader"
/>
</div>
) : (
<div id="main" style={mainstyle}>
{users.map((user) => (
<div className="profile_cont" key={user.id}>
{console.log(user)}
<img src={user.avatar} alt={user.avatar} className="avatar"></img>
<h1 className="name">
{user.first_name} {user.last_name}
</h1>
<p className="email">{user.email}</p>
<p>User id: {user.id}</p>
</div>
))}
</div>
);
};
export default Users;