|
@@ -4,17 +4,27 @@ import CUserPosts from "./UserPosts";
|
|
|
|
|
|
|
|
|
|
const UserItem = ({aboutUser = {}}) =>{
|
|
const UserItem = ({aboutUser = {}}) =>{
|
|
- console.log(aboutUser);
|
|
|
|
|
|
+ /* console.log(aboutUser.followers.length); */
|
|
return(
|
|
return(
|
|
<div>
|
|
<div>
|
|
<div className="flex flex-wrap items-center p-4 md:py-8">
|
|
<div className="flex flex-wrap items-center p-4 md:py-8">
|
|
<div className="md:w-3/12">
|
|
<div className="md:w-3/12">
|
|
<img src={aboutUser?.avatar?.url ?`${backendURL}/${aboutUser.avatar.url} `: "nothing"} alt="avatar" className="h-20 w-20 md:w-40 md:h-40 lg:w-60 lg:h-60 object-cover rounded-full"/>
|
|
<img src={aboutUser?.avatar?.url ?`${backendURL}/${aboutUser.avatar.url} `: "nothing"} alt="avatar" className="h-20 w-20 md:w-40 md:h-40 lg:w-60 lg:h-60 object-cover rounded-full"/>
|
|
</div>
|
|
</div>
|
|
- <div className="md:flex md:flex-wrap md:items-center">
|
|
|
|
- <h2 className="text-3x1 inline-block font-light mr-0.5 sm:mb-0">{aboutUser.nick}</h2>
|
|
|
|
- <button className="bg-fuchsia-600 px-2 py-1 text-white font-semibold text-sm rounded block text-center sm:inline-block">Follow</button>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div className="w-8/12 md:w-7/12 m-4">
|
|
|
|
+ <div className="md:flex md:flex-wrap md:items-center">
|
|
|
|
+ <h2 className="text-3x1 inline-block font-light mr-0.5 sm:mb-0">{aboutUser.nick}</h2>
|
|
|
|
+ <button className="bg-fuchsia-600 px-2 py-1 text-white font-semibold text-sm rounded block text-center sm:inline-block">Follow</button>
|
|
|
|
+ </div>
|
|
|
|
+ <div className="block">
|
|
|
|
+ <ul className="md:flex space-x-8 mb-4">
|
|
|
|
+ <li><span className="font-semibold">{aboutUser?.followers?.length ? aboutUser?.followers?.length : "0"}</span> followers</li>
|
|
|
|
+ <li><span className="font-semibold">{aboutUser?.following?.length ? aboutUser?.following?.length : "0"}</span> following</li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
<div className="px-px md:px-3">
|
|
<div className="px-px md:px-3">
|
|
|
|
|