Improve Empty Team List Display in Team Tab

[Suzzit6]

Description

Currently, when there are no active team members for a project on the Teams tab, the UI displays a blank area, leading to a poor user experience (as shown in the attached screenshot). A placeholder message such as "No team members available" or "This project currently has no active team members" should be displayed instead of leaving the section empty. This enhancement will improve the user experience by providing clear feedback and context to the user.

Suggested Fix

Update the Teams tab component to include a conditional render for cases where the users array is empty. Add a user-friendly message to indicate the absence of active team members.

Code Snippet for Fix

return (
  <>
    <div className="absolute right-4 top-4">
      <EditTeamButton project={project} />
    </div>
    {users.length === 0 ? (
      <p className="text-center text-gray-500">No team members available for this project.</p>
    ) : (
      <div
        className={cn(
          "mx-auto grid max-w-md grid-cols-1 gap-4",
          users.length > 1 && "sm:grid-cols-2",
        )}
      >
        {users.map((user) => (
          <div key={user.username} className="flex items-center space-x-4">
            <Link href={`/${user.username}`} className="flex-none">
              <img
                src={user.image}
                alt="avatar"
                className="h-14 w-14 rounded-full"
              />
            </Link>
            <div className="flex flex-col space-y-0.5">
              <Link
                href={`/${user.username}`}
                className="font-medium text-gray-700 underline-offset-4 hover:underline"
              >
                {user.name}
              </Link>
              <p className="text-sm text-gray-500">{user.role}</p>
            </div>
          </div>
        ))}
      </div>
    )}
  </>
);

Steps to Reproduce

1. Go to the Open Source Gallery website.
2. Navigate to a project with no active team members.
3. Click on the "Team" tab.
4. Observe the blank display area when the team list is empty.