1import React, { useState, useEffect } from 'react'
2
3interface User {
4 id: string
5 name: string
6 email: string
7 role: 'admin' | 'user'
8}
9
10const MAX_RETRIES = 3
11const API_URL = 'https://api.example.com'
12
13// Main component for displaying
user information
14export function UserCard({ userId }: { userId: string }) {
15 const [user, setUser] = useState<User | null>(null)
16 const [loading, setLoading] = useState(true)
17
18 useEffect(() => {
19 async function fetchUser() {
20 try {
21 const response = await fetch(`${API_URL}/users/${userId}`)
22 const data = await response.json()
23 setUser(data)
24 } catch (error) {
25 console.error('Failed to fetch user:', error)
26 } finally {
27 setLoading(false)
28 }
29 }
30 fetchUser()
31 }, [userId])
32
33 if (loading) return <div>Loading...</div>
34 if (!user) return <div>User not found</div>
35
36 return (
37 <div className="user-card">
38 <h2>{user.name}</h2>
39 <p>{user.email}</p>
40 <span className="role">{user.role}</span>
41 </div>
42 )
43}