Profile - Copy this React, Tailwind Component to your project

import-React,-{-useState,-useEffect-}-from-'react';-import-{-useNavigate,-useParams-}-from-'react-router-dom';-import-axios-from-'axios';-const-Profile-=-()-=>-{-const-navigate-=-useNavigate();-const-{-id-}-=-useParams();-const-[userDetails,-setUserDetails]-=-useState(null);-useEffect(()-=>-{-if-(id)-{-const-fetchUserDetails-=-async-()-=>-{-const-response-=-await-axios.get(`http://localhost:8000/users/user/${id}`);-setUserDetails(response.data);-console.log(response);-};-fetchUserDetails();-}-},-[id]);-if-(!userDetails)-{-return-<div>Loading...</div>;-}-return-(-<div-className="profile-container">-<h2-className="text-2xl-font-bold">User-Profile</h2>-<div-className="user-info">-<p><strong>Name:</strong>-{userDetails.name}</p>-<p><strong>Email:</strong>-{userDetails.email}</p>-<p><strong>Phone:</strong>-{userDetails.phone}</p>-<p><strong>Age:</strong>-{userDetails.age}</p>-<div><strong>Addresses:</strong></div>-{userDetails.addresses-&&-userDetails.addresses.length->-0-?-(-userDetails.addresses.map((address,-index)-=>-(-<p-key={index}>{index+1}.-{address}</p>-))-)-:-(-<p>No-addresses-available</p>-)}-</div>-</div>-);-};-export-default-Profile;