Built Twitter Like App - 16

Add User List to FollowBar

modify components/layout/FollowBar.tsx

import useUsers from "../../hooks/useUsers";
import Avatar from "../Avatar";

const FollowBar =() =>{
   const { data: users = [] } = useUsers();

   if(users.length === 0) {
    return null;
   }

   return (
    <div className="px-6 py-4 hidden lg:block">
      <div className="bg-neutral-800 rounded-xl p-4">
        <h2 className="text-white text-xl font-semibold">Who to follow</h2>
        <div className="flex flex-col gap-6 mt-4">
          {users.map((user:Record<string,any>) => (
            <div key={user.id} className="flex flex-row gap-4">
              <Avatar userId={user.id} />
              <div className="flex flex-col">
                <p className="
                   text-white 
                   font-semibold 
                   text-m
                ">{user.name}</p>
                <p className="text-neutral-400 text-sm">
                  @{user.username}
                </p>
              </div>
            </div>
          ))}
        </div>
     </div>
   </div>
   );
}
 
export default FollowBar

Modify Avatar Component

modify file components/Avatar.tsx

import { useRouter } from "next/router";
import React, { useCallback } from "react";
import Image from "next/image";

import useUser from "../hooks/useUser";

interface AvatarProps {
  userId: number;
  isLarge?: boolean;
  hasBorder?: boolean;
}

const Avatar: React.FC<AvatarProps> =({
  userId,
  isLarge,
  hasBorder
}) =>{
  const router = useRouter();
  //console.log('Avatar userId',userId);
  const { data: fetchedUser } = useUser(userId);

  const onClick = useCallback((event: any)=>{
    event.stopPropagation();

    const url = `/users/${userId}`;

    router.push(url);
  },[router, userId]); 

  return (
    <div className={`
      ${hasBorder ? `border-4 border-black`: `` }  
      ${isLarge ? `h-32`: `h-12`} 
      ${isLarge ? `w-32`: `w-12`} 
      rounded-full 
      hover:opacity-90 
      transition 
      cursor-pointer 
      relative`} 
      > 
      <Image 
        fill
        style={{
          objectFit:'cover',
          borderRadius: '100%'
        }}
        alt="Avatar"
        onClick={onClick}
        src={ fetchedUser?.profileImage || `/images/placeholder.png`}
      />
    </div>
  );
}
 
export default Avatar;

Demo

run: